iOS技术文章系列: Constraints布局

2016年10月21日 澳洲IT匠人圈

点击上方“公众号” 可以订阅哦！


这是我们 Universapp iOS 系列文章的第二篇。我们在上一次讲了如何使用 Constraints 来使一个view在屏幕的中央进行水平和垂直居中，这一次我们来说说如何使用 Constraints 来布局。

第一个例子中使左右两个 view 始终在左和右上角
第二个例子是

Ref: https://github.com/arkilis/AutolayoutSimpleDemo 

效果图： 

Step 1： 给左边方块添加约束。 小技巧：如果你看不到 “Add Constraints” 这个时候可以在 storyboard view上适当拖动控件，这个时候约束上的值不太一样，之后再把控件拖回来


Step 2: 给右边的控件添加约束 


在右边的控件上添加相对约束




在完成了上面的第一个例子之后，我们来看一看怎么去布局：要求

  1. 第一个view是整个的屏幕的一半，左右边距20
  2. 第二个view是是第一个view的宽的一半，右边的边距是20，高度跟第一个view相同。距离第一个view为20，距离底部的边距是20


效果图如下：


Step 1: 上半部黑色部分, 对于属性尽量一次性添加完毕。 

Step 2: 下半部灰色部分，添加 右下 约束，保证右边是对齐的


Step 3: 下半部灰色部分，添加相对黑色的相对约束：等高，等宽，其中并不是等宽，灰色部分是黑色部分宽度的一半.  在图中，设置 multiplier 为0.5



如果你在试验过程中有什么疑问，可以关注我们的微信公众号，或者给我们留言。




我们是谁

Universapp是一家面向全球提供解决方案与服务供应商，致力于通过创新的信息化技术来推动社会的发展与变革，为个人创造新的生活方式，为社会创造价值。Universapp拥有自主研发的系统，大数据和机器学习算法。 公司主营业务包括：行业解决方案、产品工程解决方案及相关软件产品、平台及服务等。包括IOS，Android，Web消费级平台级及企业级开发，对SEO也有相当长的经验。团队由行业顶级IT人才组成，只做情怀产品。

 
Universapp
微信：universapp

Bring stunning products to life
长按二维码关注
点击阅读原文，查看更多
收藏 赞 已赞
猜你感兴趣