xib基础教程,手把手教你搭建炫酷的界面

一、我们首先来看一下效果原型图

二、我们将要搭建出来的框架图

xib基础教程,手把手教你搭建炫酷的界面_第1张图片

三、接下来我们将要一步步来学习如何完成整个界面的搭建

1、创建空的工程

xib基础教程,手把手教你搭建炫酷的界面_第2张图片

2、创建一个新的类XIbTestVCViewController,勾选xib

xib基础教程,手把手教你搭建炫酷的界面_第3张图片

3、启动后加载新创建的类xib基础教程,手把手教你搭建炫酷的界面_第4张图片

4、点开新创建的xib文件,它默认展示是个正方形的Viewxib基础教程,手把手教你搭建炫酷的界面_第5张图片

5、选中View,点击设置

xib基础教程,手把手教你搭建炫酷的界面_第6张图片

6、方便布局随便选一个

xib基础教程,手把手教你搭建炫酷的界面_第7张图片

7、然后View变成了4.0的屏幕了

xib基础教程,手把手教你搭建炫酷的界面_第8张图片

8、改变背景色

xib基础教程,手把手教你搭建炫酷的界面_第9张图片

9、背景色改变效果xib基础教程,手把手教你搭建炫酷的界面_第10张图片

10、搜索并添加uiimage

xib基础教程,手把手教你搭建炫酷的界面_第11张图片

11、布局imageView

xib基础教程,手把手教你搭建炫酷的界面_第12张图片

12、imageView左右约束100

xib基础教程,手把手教你搭建炫酷的界面_第13张图片

13、设置宽高比1:1(一)

xib基础教程,手把手教你搭建炫酷的界面_第14张图片

14、修改宽高比例(二)

xib基础教程,手把手教你搭建炫酷的界面_第15张图片

15、设置宽高比例值(三)

xib基础教程,手把手教你搭建炫酷的界面_第16张图片

16、设置顶部约束(一)

xib基础教程,手把手教你搭建炫酷的界面_第17张图片

17、设置顶部约束(二)xib基础教程,手把手教你搭建炫酷的界面_第18张图片

18、设置顶部约束(三)

xib基础教程,手把手教你搭建炫酷的界面_第19张图片

19、设置顶部约束(四)xib基础教程,手把手教你搭建炫酷的界面_第20张图片

20、更新imageView的frame符合约束值xib基础教程,手把手教你搭建炫酷的界面_第21张图片

21、设置imageVIew背景色xib基础教程,手把手教你搭建炫酷的界面_第22张图片

22、运行效果

xib基础教程,手把手教你搭建炫酷的界面_第23张图片

23、调整两侧和顶部约束值

xib基础教程,手把手教你搭建炫酷的界面_第24张图片

24、拖拽VIew控件xib基础教程,手把手教你搭建炫酷的界面_第25张图片

25、设置VIew的约束

xib基础教程,手把手教你搭建炫酷的界面_第26张图片

26、VIew的约束详情

xib基础教程,手把手教你搭建炫酷的界面_第27张图片

27、最后upframe

xib基础教程,手把手教你搭建炫酷的界面_第28张图片

28、设置VIew的背景色

xib基础教程,手把手教你搭建炫酷的界面_第29张图片

29、拖拽底部试图

xib基础教程,手把手教你搭建炫酷的界面_第30张图片

30、底部试图的约束

xib基础教程,手把手教你搭建炫酷的界面_第31张图片

31、最后upframe底部试图

xib基础教程,手把手教你搭建炫酷的界面_第32张图片

32、增加底部试图的三个buttonxib基础教程,手把手教你搭建炫酷的界面_第33张图片

33、button1添加左约束

xib基础教程,手把手教你搭建炫酷的界面_第34张图片

34、button3添加右约束

xib基础教程,手把手教你搭建炫酷的界面_第35张图片

35、button2添加左右约束

xib基础教程,手把手教你搭建炫酷的界面_第36张图片

36、添加button1宽高比例1:1

xib基础教程,手把手教你搭建炫酷的界面_第37张图片

37、设置三个button 顶部约束xib基础教程,手把手教你搭建炫酷的界面_第38张图片

38、设置约束三个button 等宽高xib基础教程,手把手教你搭建炫酷的界面_第39张图片

39、update frame 约束xib基础教程,手把手教你搭建炫酷的界面_第40张图片

40、添加背景色,最终运行效果如图

xib基础教程,手把手教你搭建炫酷的界面_第41张图片

你可能感兴趣的:(xib基础教程,手把手教你搭建炫酷的界面)