Создание круга прогресса в качестве приложения WKInterfaceImage в Watch

Я пытаюсь создать круг прогресса для версии приложения Apple Watch. Я знаю, что мы не можем использовать UIViews (что сделает вещи намного проще!), Поэтому я ищу альтернативы.

В принципе, я хотел бы создать один из этих прототипов:

enter image description here

То, что я надеялся сделать, это добавить фоновые уровни как обычный WKInterfaceImage, а затем стрелку прогресса/строку сверху как WKInterfaceImage, которая вращается вокруг круга в зависимости от процентного значения.

У меня процент, рассчитанный так, в основном, то, что я ищу, - это некоторая помощь с математическим кодом для поворота стрелки.

Кто-нибудь знает, возможно ли это, и может ли кто-нибудь помочь мне, если так? Я не пытаюсь обновить круг во время работы приложения; ему просто нужно обновить, когда приложение Watch запускается, чтобы соответствовать версии iOS.

Спасибо!

Ответ 1

Другим решением является создание 100 изображений, для каждого номера у вас есть кадр. Таким образом, вы можете показать анимацию, используя метод startAnimatingWithImagesInRange: duration: repeatCount.

Проблема заключается в том, что трудно настроить каждый кадр. Кто-то подумал об этой проблеме и создал генератор. Вы можете найти его по этому имени:

Генератор радиальной диаграммы диаграммы

Эта ссылка должна помочь вам настроить фреймы: http://hmaidasani.github.io/RadialChartImageGenerator/

Также у вас есть те же образцы на ссылке git. Для 100 кадров с рамкой с одной дугой вы получаете около 1,8 МБ на диске.

Ответ 2

В качестве watchOS 3 можно использовать SpriteKit.

SKShapeNode может рисовать фигуры, поэтому можно создавать радиальные кольца.

  • Добавьте WKInterfaceSKScene в свой контроллер интерфейса в раскадровке и подключите его через розетку.
  • Установите его в активном методе контроллера интерфейса

    override func awake(withContext context: Any?) {
       super.awake(withContext: context)
       scene = SKScene(size: CGSize(width: 100, height: 100))
       scene.scaleMode = .aspectFit
       interfaceScene.presentScene(scene)
    }
    
  • Создайте форму node и добавьте ее в сцену

    let fraction: CGFloat = 0.75
    let path = UIBezierPath(arcCenter: .zero,
                             radius: 50,
                             startAngle: 0,
                             endAngle: 2 * .pi * fraction,
                             clockwise: true).cgPath
    
    let shapeNode = SKShapeNode(path: path)
    shapeNode.strokeColor = .blue
    shapeNode.fillColor = .clear
    shapeNode.lineWidth = 4
    shapeNode.lineCap = .round
    shapeNode.position = CGPoint(x: scene.size.width / 2, y: scene.size.height / 2)
    scene.addChild(shapeNode)
    

Пример

Ответ 3

Большая часть того, что доступно на iOS, пока отсутствует в WatchKit. В частности, некоторые из вещей, которые вы хотите сделать, почти невозможны. (Глянцевая надежда в какой-то момент). В частности, вы не можете повернуть изображение. Вернее, вы можете повернуть изображение, но вам нужно сделать это по телефону, а затем передать это изображение на часы во время выполнения. Кроме того, вы не можете легко создавать сложные изображения, но есть способ сделать это.

Одним из способов было бы построить все повернутое, скомпонованное изображение так, как вы хотите его на телефоне, и передать окончательные данные до кнопки, используя [WKInterfaceButton setBackgroundImage:]. К сожалению, вы, скорее всего, найдете это медленным в симуляторе, и, скорее всего, он будет плохо работать на реальных часах. Трудно знать наверняка, потому что у нас его нет, но это отправляет изображение на лету по Bluetooth. Таким образом, вы не получите гладкой анимации или хорошего времени отклика.

Лучше всего взломать свой путь к нему на часах. Это зависит от двух трюков: одного, группы слоев вместе с фоновыми изображениями. Два, используя - [WKInterfaceImage startAnimatingWithImagesInRange: duration: repeatCount:].

Для первого трюка отбросьте группу в свой макет, затем поместите в нее другую группу, а затем (возможно) кнопку внутри нее. Затем используйте - [WKInterfaceGroup setBackgroundImage:], и изображения будут объединены вместе. Убедитесь, что вы используете правильную прозрачность и т.д.

Для второго трюка обратитесь к официальной документации - по сути, вам понадобится серия изображений, по одному для каждого возможного значения вращения, как сказал erdekhayer. Теперь это может показаться вопиющим (и есть) и, возможно, непрактичным (это не так). Это на самом деле то, как Apple рекомендует создавать прядильщиков и тому подобное - по крайней мере пока. И, да, это может означать создание 360 различных изображений, хотя из-за небольшого экрана мой совет должен идти каждые 3-5 градусов или около того (никто не сможет сказать разницу).

Надеюсь, что это поможет.

Ответ 4

Класс WKInterface не может быть подклассом. Поэтому настраиваемый элемент управления невозможен.

Также анимация ограничена. Чтобы создать анимацию, вы должны сохранить каждый кадр в качестве изображения. Затем вы можете иметь представление изображения в приложении WatchKit, которое циклически проходит через эти изображения.

Сохраните изображения в папке Images.xcassets в целевой части чата и попытайтесь объединиться с изменением фрейма в зависимости от процента завершения действия.

Еще одно примечание: 100 изображений не будут эффективными, так как каждое приложение WatchKit имеет ограниченное пространство на часах, которые он может принять (я считаю, что это 20 МБ, но я не уверен). Возможно, есть изображение на каждые 5%.

Ответ 5

Никто не пишет код??? Вот! наслаждаться:

1) Создайте изображения здесь: http://hmaidasani.github.io/RadialChartImageGenerator/

2) Перетащите n Переместите сборщик в свой контроллер просмотра и привяжите его к некоторому файлу viewController.swift. Установите стиль Picker в "Sequence" в меню, которое появляется справа.

3) Добавьте этот код в viewController.swift и подключите сборщик к IBOutlet и IBAction:

import WatchKit
import Foundation

class PickerViewController: WKInterfaceController {

    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
    }

    @IBOutlet var itemPicker: WKInterfacePicker!

    override func willActivate() {
        super.willActivate()

        let pickerItems: [WKPickerItem] = (0...100).map {
            let pickerItem = WKPickerItem()
            pickerItem.contentImage = WKImage(imageName: "singleArc\($0).png")
            return pickerItem
        }
        itemPicker.setItems(pickerItems)
    }

    @IBAction func pickerSelectedItemChanged(value: Int) {
        NSLog("Sequence Picker: \(value) selected.")
    }

    override func didDeactivate() {
        super.didDeactivate()
    }

}

Ответ 6

Нет, создать этот настраиваемый круг в наборе часов невозможно, потому что UIView не работает с набором часов.

существует только решение вашей проблемы: вам нужно поставить 100 изображений каждого кадра... и убедиться, что размер изображений меньше 20 МБ. потому что размер приложения часов составляет до 20 МБ