watchOS系统开发 - Layout布局(3)

在iOS系统中, 可以使用frame进行布局, 也可以使用Auto Layout 进行布局. 但是不好意思, 在watchOS 中这两个布局方式都没有, 那么WatchOS中如何布局呢?

在watchOS 中, 控件的大小是根据内容自动填充的. 控件之间是根据相对和绝对位置进行布局的, 如果你曾经有过HTML的开发经验, 你很清楚WatchOS的布局和HTML是如此的相似.

如下图所示, 有三个控件, 最底部是一个WKInterfaceGroup控件, 类似于HTML中的div, 在此控件上面添加两个控件, 一个WKInterfaceLabel, 一个WKInterfaceImage

Layout属性

如果设置成Horizontal, 则为水平布局, 控件会一个一个的依次向右排列. 如果设置成Vertical, 则为垂直布局, 控件一个一个的依次向下布局. 这个很像HTML中的弹性盒子布局.

屏幕快照 2017-08-01 下午10.34.06.jpg

Horizontal效果

Simulator Screen Shot 2017年8月1日 下午10.33.54.png

屏幕快照 2017-08-01 下午10.34.25.jpg

Vertical效果

Simulator Screen Shot 2017年8月1日 下午10.35.24.png

Insets属性

这个属性和HTML中的padding的效果是一样的, 就是设置当前group控件的内边距.

设置四周的内边距为10

屏幕快照 2017-08-01 下午10.43.34.png

运行之后的效果

Simulator Screen Shot 2017年8月1日 下午11.23.12.png

苹果手表人机界面指南建议您的界面控制器中的界面元素紧靠屏幕的一侧，因为在物理屏幕周围有一个黑色边框，提供自然的边缘。 然而，屏幕中间的内容有时可以从一点额外的填充中受益，以防止您的界面变得太狭隘。

下面的几个属性和iOS中基本都一样

屏幕快照 2017-08-02 上午9.18.20.png

Content size

在WatchKit中，文本占用的空间由NSAttributedString确定，它包含字体，行间距和颜色等属性。 WatchKit使文本离开屏幕，根据字符串的边框确定高度和宽度
然后将其应用于布局。
与iOS不同，WatchKit会为您自动处理所有布局。

Relative spacing

屏幕快照 2017-08-02 上午9.27.30.png

布局系统在三个点会更新界面元素的位置：
•接口首次加载时;
•任何时候, 如标签文字和背景图片都会发生变化;
•任何时间的兄弟元素被隐藏或不被隐藏。

Alignment:设置控件相对于父控件的相对位置
Size:有三种模式

1. Size To Fit Content: 自适应, 根据内容自适应大小
   2)Relative to Container:相对于容器的设置允许您指定0和1之间的乘数，它表示接口元素的大小与其父级大小的比例。 您还可以更改调整值，从而抵消最终尺寸。这一点很像HTML中的响应式布局, 采用比例来确定控件的大小.

  Parent[width|height] * multiplier + adjustment = [width|height]

例如，如果您有一个宽度为250点的父组，并且想要并排确定大小相同的图像，则可以将它们的乘数设置为0.5（或50％），使每个图像的宽度为125。 如果您随后意识到需要缩小的图像来解释填充，则可以将每个图像视图的调整设置为-10，使每个图像的宽度为115。

Fixed

设置固定尺寸的大小, 超出的部分将被截取掉

屏幕快照 2017-08-02 上午9.58.42.png