xib基础教程,手把手教你搭建炫酷的界面
一、我们首先来看一下效果原型图
二、我们将要搭建出来的框架图
三、接下来我们将要一步步来学习如何完成整个界面的搭建
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、添加背景色,最终运行效果如图