一、我们首先来看一下效果原型图
二、我们将要搭建出来的框架图
三、接下来我们将要一步步来学习如何完成整个界面的搭建
1、创建空的工程
2、创建一个新的类XIbTestVCViewController，勾选xib
3、启动后加载新创建的类
4、点开新创建的xib文件，它默认展示是个正方形的View
5、选中View，点击设置
6、方便布局随便选一个
7、然后View变成了4.0的屏幕了
8、改变背景色
9、背景色改变效果
10、搜索并添加uiimage
11、布局imageView
12、imageView左右约束100
13、设置宽高比1：1（一）
14、修改宽高比例（二）
15、设置宽高比例值（三）
16、设置顶部约束（一）
17、设置顶部约束（二）
18、设置顶部约束（三）
19、设置顶部约束（四）
20、更新imageView的frame符合约束值
21、设置imageVIew背景色
22、运行效果
23、调整两侧和顶部约束值
24、拖拽VIew控件
25、设置VIew的约束
26、VIew的约束详情
27、最后upframe
28、设置VIew的背景色
29、拖拽底部试图
30、底部试图的约束
31、最后upframe底部试图
32、增加底部试图的三个button
33、button1添加左约束
34、button3添加右约束
35、button2添加左右约束
36、添加button1宽高比例1：1
37、设置三个button 顶部约束
38、设置约束三个button 等宽高
39、update frame 约束
40、添加背景色，最终运行效果如图
原文：http://www.cnblogs.com/ulovewb/p/5204488.html