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

Question

我正在尝试为我的应用程序的Apple Watch版本创建一个进度圈.我知道我们无法使用UIViews(这将使事情变得如此简单!)所以我正在寻找替代方案.

基本上,我想创建其中一个原型:

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

我基本上计算了百分比,我正在寻找的是旋转箭头的数学代码的一些帮助.

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

谢谢!

Answer 1

从watchOS 3开始,可以使用SpriteKit.

SKShapeNode 可以绘制形状,因此可以创建径向环.

1. WKInterfaceSKScene在故事板中添加到您的界面控制器并通过插座将其连接起来.

2. 在接口控制器的唤醒方法中进行设置

   override func awake(withContext context: Any?) {
      super.awake(withContext: context)
      scene = SKScene(size: CGSize(width: 100, height: 100))
      scene.scaleMode = .aspectFit
      interfaceScene.presentScene(scene)
   }
   

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

   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张图片,每个数字都有一个框架.因此,这样做,您可以使用'startAnimatingWithImagesInRange:duration:repeatCount'方法显示动画.

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

径向条形图生成器

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

你也在git链接上有相同的样本.对于具有单个弧形框架的100帧,磁盘上的大小为1,8 MB.

Answer 3

WKInterface 类不能被子类化。因此，自定义控件是不可能的。

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

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

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