最近忙了一阵子Apple Watch 的开发。虽然Apple Watch 4马上就要发布了,但详细的中文开发资料还不是很多。我这里就不按照步骤走了,总结一下非常规的知识点以及个人理解。
静态布局
所有静态UI控件都在 Storyboard 上完成,彻底抛弃frame的概念。WatchKit 布局方式很像CSS,包括绝对布局和相对布局,支持横向排列和纵向排列,UI之间无法重叠。但可以使用 Group 处理。 比如我们去拖一个 左图片 右文字 的 Button,该如何操作呢?
1、拖一个button, 设置其 Content 为 Group 类型(默认为 Text)。
2、在该 Group 上再拖一个 Group2 ,用来容纳图片和文字,只要让该 Group2 居中,那么图片和文字就可以居中啦。
3、设置 Group2 的 Layout 为 Horizontal ,在 Group2 上拖进来一个 WKInterfaceImage 和一个 WKInterfaceLabel 即可。
具体层级关系如下图:
动态绘制
WatchKit 上的 UI 控件不多,和 UIKit 有些类似。但由于不支持frame的概念,所以很难处理根据网络数据的不同,frame 不同的问题。比如这种曲线图。
WatchKit 上没有提供 CALayer 相关的 类。但可以采用 UIBezierPath 和 CGContextRef 相结合的方法去动态绘制。绘制完成后,将画布合成为 UIImage, 然后就可以放到 WKInterfaceImage 上显示了。
需要注意的是,画布的大小要设置为屏幕尺寸的二倍(或者直接乘以 screenScale ),不然绘制出来的很模糊。
这里只摘要一小段代码示例(根据不同体重绘制不同位置的白点)
- (void)drawGraph{ CGFloat graphWidth = CGRectGetWidth([WKInterfaceDevice currentDevice].screenBounds); CGFloat graphHeight = CGRectGetWidth([WKInterfaceDevice currentDevice].screenBounds); float scaleFactor = [WKInterfaceDevice currentDevice].screenScale; CGSize size = CGSizeMake(graphWidth*scaleFactor, graphHeight*scaleFactor); NSArray *positionsArray = [self transPointToValue:self