AppleWatch开发入门二——界面布局

AppleWatch开发入门二——界面布局

1、简介

        在iphone开发中，最基本的布局方式是经过frame，将控件的位置和大小固定在屏幕上，后来，因为手机屏幕的尺寸有了略微变化，有了autoresizing的布局框架，咱们能够设置子视图随父视图的改变作一些相应的变化，再后来，iphone的尺寸与分辨率也愈来愈多，适配各个屏幕也成为了iOS开发者遇到的新的问题，幸运的是，autolayout机制的出现，大大减少了开发者在适配方面的成本。以上提到的两种布局方式，在之前博客中有讨论：

使用autoresizing进行动态布局：http://my.oschina.net/u/2340880/blog/423357

使用autolayout进行动态布局：http://my.oschina.net/u/2340880/blog/423500

        在watch的布局方式中，咱们须要抛弃iphone里的思路，从新接受一套新的布局框架。

        首先，watch的屏幕不大，目前只有38mm和42mm两个尺寸，咱们不可能在这个有限的空间里作很是复杂的界面效果，所以，在界面开发中，应该遵循便于使用和一目了然的原则。watch上的布局方式采用的是一种平面堆放的方式，再也不有frame，也再也不有约束，控件的布局方式只是一个挨着一个的平面堆放，也不可重叠。但在watch中，提供了group这样一种布局方式，可让咱们在布局中体现自由与个性的方面。         

2、最基础的堆放布局

        咱们在不使用group的时候，watch的布局采用的是最基础的堆放方式，从上到下依次排开，例如，咱们添加四个label，效果以下：

经过改变label的添加顺序，能够改变其上下位置：

这种方式的布局高度并无限制，咱们能够一直往下排列，在watch上，会出现滑动的效果：

    

3、使用Group进行复杂的界面布局

        经过上面的布局方式，咱们只能进行纵向的排列布局，这并不能达到咱们的需求，WatchKit中提供那一套布局的模型：Group。

        能够这样理解，group就是将屏幕分红了几各分区，咱们能够设置各个分区的排列方式，例如水平或者垂直，经过这样的思路，完成复杂的watch界面布局，例以下面的效果：

这样效果的一个界面，就是将在屏幕中添加了三个Group，最上面的Gorup设置为水平排列模式，在其中添加了两个按钮和一个分割线，中间一个Group是垂直排列模式，放入了一个选择器和一个按钮，最下面一个Group也是水平排列模式，放入了一个按钮和一个时间栏。

扩展：所谓Group

        Group在界面布局上，不只能够起到分区屏幕的做用，其还能够设置一些属性来使布局更加漂亮。在storyBoard右侧的设置菜单中，咱们能够对这些属性进行操做：

Layout：设置布局模式，分为水平布局和垂直布局两种

insert：能够设置内容区域偏移量，经过这个属性，咱们可使其中填充的控件四周留白

Spacing：其中填充的控件的间距

BackGround：设置Group的背景图案

Mode：设置背景图案的填充方式

Animate：出现时带动画

color：设置Group的背景颜色

Radius：设置Group的圆角度

4、布局中控件的位置和尺寸设置

        在iphone中，咱们使用frame或者约束来控制控件的位置和尺寸，在watch中则简单不少，尺寸和位置都是固定的模式，咱们只须要作一些设置便可。

一、控件尺寸的控制

        对于控件的尺寸，有三种模式，控件的width和Height都是经过这三个模式设置的：

Relative to Container：自身的尺寸是按照容器的尺寸比例设置的。例如设置为0.5的话，当前控件的尺寸就是容纳其Group的一半。

Size To Fit Content:自身的尺寸与自身内容相关，例如，label中字数的多少决定了label的尺寸。

Fixed：手动设置一个固定的值。

二、控件位置的控制

        由于watch的界面十分简洁，对于控件的位置设置，是经过水平和垂直两个维度来设置的，经过设置每一个维度的属性来控制其在容纳它的Group中的位置：

Horizontal：left（左），center（中心），right（右）

Vertical：top（上），center（中心），bottom（下）

 

一点注意:

        关于图片素材，你能够发现，在Extension和App文件夹中各有一个Assets.xcasssets组，只有将素材放入APP文件夹下的这个组watch才能使用。

 

 

专一技术，热爱生活，交流技术，也作朋友。

——珲少 QQ群：203317592