第一个Xcode项目(2) - Auto Layout - 布局⑤

[相关信息:Xcode7.2 ; Swift2.0]

先回顾一下效果图


第一个Xcode项目(2) - Auto Layout - 布局⑤_第1张图片
看起来还不错的设计图

上次我们已经把大致的框架搭好了,那接下来只要把东西放满就好了,Go,Go,Go!


第一个Xcode项目(2) - Auto Layout - 布局⑤_第2张图片
添加文本框
然后我们把文本框的高度设置的高一点,方便使用的时候点击
第一个Xcode项目(2) - Auto Layout - 布局⑤_第3张图片
设置文本框的高度

当然时间栏跟上面这个是一样的,就不赘述了。


第一个Xcode项目(2) - Auto Layout - 布局⑤_第4张图片
添加Label控件并设置属性
控件添加完以后是这样子的
第一个Xcode项目(2) - Auto Layout - 布局⑤_第5张图片
控件添加完的样子
接下来当然是要添加约束了
第一个Xcode项目(2) - Auto Layout - 布局⑤_第6张图片
设置第一个文本框的约束

第一个Xcode项目(2) - Auto Layout - 布局⑤_第7张图片
设置第二个文本框的约束

第一个Xcode项目(2) - Auto Layout - 布局⑤_第8张图片
设置第二个文本框右边的按钮的约束

第一个Xcode项目(2) - Auto Layout - 布局⑤_第9张图片
设置三个小按钮的约束

第一个Xcode项目(2) - Auto Layout - 布局⑤_第10张图片
设置三个小按钮边上的分割线的约束

剩下还有那个Label约束没有添加,其实那个不用添加,因为容器的高度不变,Label又是左对齐的。

下一步是把三个按钮的图标设置一下


第一个Xcode项目(2) - Auto Layout - 布局⑤_第11张图片
设置按钮的圆角和边框,图片和背景颜色

第一个Xcode项目(2) - Auto Layout - 布局⑤_第12张图片
设置第二个按钮的文字和文字格式

第一个Xcode项目(2) - Auto Layout - 布局⑤_第13张图片
设置按钮文字格式的对比图

so~~我们来运行下看看APP的效果 (Command+R)


第一个Xcode项目(2) - Auto Layout - 布局⑤_第14张图片
运行APP的效果

收工~

你可能感兴趣的:(第一个Xcode项目(2) - Auto Layout - 布局⑤)