14

我正在尝试为我的应用程序的 Apple Watch 版本创建一个进度圈。我知道我们无法使用 UIViews（这会让事情变得更容易！）所以我正在寻找替代品。

基本上，我想创建以下原型之一：

在此处输入图像描述

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

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

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

谢谢！

4

6 回答 6

18

从 watchOS 3 开始，可以使用 SpriteKit。

SKShapeNode可以绘制形状，因此可以创建径向环。

  1. 在情节提要中添加一个WKInterfaceSKScene到您的界面控制器并通过插座将其连接起来。

  2. 在接口控制器的awake方法中设置

    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)

例子

于 2017-08-01T09:40:55.967 回答
11

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

问题是很难自定义每一帧。有人考虑过这个问题并创建了一个生成器。您可以通过以下名称找到它：

径向条形图生成器

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

您在 git 链接上也有相同的示例。对于具有单个弧形框架的 100 帧，您可以获得大约 1.8 MB 的磁盘空间。

于 2015-02-19T14:51:16.540 回答
2

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

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

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

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

对于第二个技巧，请参阅官方文档 - 本质上，您将需要一系列图像，一个用于每个可能的旋转值，正如 erdekhayser 所说。现在，这可能看起来令人震惊（确实如此）并且可能不切实际（事实并非如此）。这实际上是 Apple 建议创建微调器等的方式 - 至少目前如此。而且，是的，这可能意味着生成 360 个不同的图像，尽管由于屏幕小，我的建议是每 3-5 度左右移动一次（没有人能够分辨出区别）。

希望这可以帮助。

于 2014-11-24T03:22:19.527 回答
2

没人贴代码？？？这里是！请享用：

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

2）将选择器拖放到您的视图控制器中，并将其链接到一些 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()
    }

}
于 2016-02-09T11:11:28.540 回答
1

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

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

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

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

于 2014-11-22T02:34:50.963 回答
0

不，不可能在手表套件上创建此自定义圆圈，因为 UIView 不适用于手表套件。

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

于 2015-05-13T04:52:42.563 回答