Question

我正在尝试为我的应用的Apple Watch版本创建一个进度圈。我知道我们无法使用UIViews（这会让事情变得如此简单！）所以我正在寻找替代方案。

基本上，我想创建其中一个原型：

enter image description here

我希望做的事情是将背景图层添加为普通的WKInterfaceImage，然后将顶部的进度箭头/线添加为基于计算的百分比围绕圆圈旋转的WKInterfaceImage。

我的百分比基本计算得出，我正在寻找的是旋转箭头的数学代码的一些帮助。

有谁知道这是否可行，如果有的话，有人可以帮助我吗？我不是在应用程序运行时尝试更新圈子;它只需要在Watch App启动时更新以与iOS版本对应。

谢谢！

Answer 1

从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)
}

创建一个形状节点并将其添加到场景

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)

Answer 2

另一个解决方案是创建100张图片，每个数字都有一个框架。因此，这样做，您可以使用＆amp; startAnimatingWithImagesInRange：duration：repeatCount＆＃39;来显示动画。方法。

问题是每个框架都很难定制。有人想到了这个问题，并创造了一个发电机。你可以用这个名字找到它：

径向条形图生成器

此链接可帮助您自定义框架：http://hmaidasani.github.io/RadialChartImageGenerator/

你也在git链接上有相同的样本。对于具有单个弧形框架的100帧，您可以在磁盘上获得大约1,8 MB的空间。

Answer 3

iOS上的大部分功能在WatchKit中尚不存在。特别是，您想要做的几件事几乎是不可能的。（片刻希望的微光）。特别是，您无法旋转图像。或者更确切地说，您可以旋转图像，但必须在手机上执行此操作，然后在运行时将该图像传递给手表。此外，您无法轻松合成图像 - 但是，有一种方法可以实现。

一种方法是按照您想要的方式在手机上构建整个旋转的合成图像，并使用[WKInterfaceButton setBackgroundImage：]将最终数据传递给按钮。不幸的是，你可能会发现这在模拟器中很慢，并且很可能它在实际手表上效果不佳。很难确定，因为我们没有，但这是通过蓝牙动态发送图像。所以你不会得到流畅的动画或良好的响应时间。

更好的方法是在手表上破解它。这依赖于两个技巧：一个，将组与背景图像分层。二，使用 - [WKInterfaceImage startAnimatingWithImagesInRange：duration：repeatCount：]。

对于第一个技巧，将一个组放入你的布局，然后在其中放入另一个组，然后（可能）在其中的一个按钮。然后使用 - [WKInterfaceGroup setBackgroundImage：]并将图像合成在一起。确保使用适当的透明度等。

对于第二个技巧，参考官方文档 - 基本上，你将需要一系列图像，每个可能的旋转值一个，正如erdekhayser所说。现在，这可能看起来很恶劣（它）并且可能是不切实际的（它不是）。这实际上是Apple推荐创建微调器等的方式 - 至少目前如此。并且，是的，这可能意味着生成360个不同的图像，但由于屏幕较小，我的建议是每3-5度左右（没有人能分辨出来）。

希望这有帮助。

Answer 4

没有人发帖代码???这里是！享受：

1）在此创建图像：http://hmaidasani.github.io/RadialChartImageGenerator/

2）拖动n将选择器拖放到View Controller中，并将其链接到某个viewController.swift文件。将Picker样式设置为＆＃34; Sequence＆＃34;在右侧显示的菜单上。

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()
    }

}

Answer 5

WKInterface类无法进行子类化。因此，无法进行自定义控制。

此外，动画有限。要创建动画，您必须将每个帧存储为图像。然后，您可以在WatchKit应用程序中拥有一个循环显示这些图像的图像视图。

将图像存储在监视目标的Images.xcassets文件夹中，并根据活动完成的百分比尝试更改框架。

一个额外的注意事项：拥有100张图片效率不高，因为每个WatchKit应用程序在手表上只占用有限的空间（我相信它是20MB，但我不确定）。也许每5％就有一张图片。

Answer 6

不，不可能在手表套件上创建这个自定义圈子，因为UIView不在手表套件上工作。

只有您的问题的解决方案是您必须为每个帧放置100个图像...并确保图像的大小小于20 MB。因为手表应用程序的大小高达20 MB

在Watch App中将进度循环创建为WKInterfaceImage

6 个答案: