xib适配问题

  前言:在咱们iOS平时的开发过程中,难免会跟xib打交道,所以掌握xib适配就成了非纯代码开发人员必须学会的一门技能,我这里列举一些xib适配的技巧,除了方便那些对xib还没玩透的童鞋参阅,也算是对自己学习的总结归纳。

一:当我们开发需求中要求有多个视图一起平分某一个视图宽度的时候(注:假设这里是需要三个UIView平分屏幕宽度)

1.第一点,咱们需要向创建的xib文件中拖入一个UIView,然后复制出两个UIView出来
xib适配问题_第1张图片

2.然后设置三个视图等宽等高
xib适配问题_第2张图片

3.设置第一个视图距离上左下间距为0


xib适配问题_第3张图片

4.设置第二个视图距离上左下间距为0
xib适配问题_第4张图片

5.设置第三个视图距离上下左右都是0
xib适配问题_第5张图片

6.最后选中三个视图按下command + option + 加号快捷键,这三个视图就平分整个屏幕了。你可以将三个视图设置不同颜色就可以看到效果。
xib适配问题_第6张图片

二:在平时开发中难免会遇到图片和文字需要放在一起,并且文字是动态变长的,但是如果需要将挨着的图片和文字同时居中对齐,而不采用拉约束代码控制,可能就要复杂一些了,下面咱们来讲讲这种情况怎么设置约束

1.创建一个UIView视图来装我们需要控制的Label和图片,


xib适配问题_第7张图片

2.并且设置UIView居中相对父视图居中对齐,并设置距离上边的约束


xib适配问题_第8张图片

3.这时你会发现xib报错,点开错误提示你没有设置UIView的宽高,这时不用理会
xib适配问题_第9张图片

4.将图标加入到UIView中,并且设置它水平居中


xib适配问题_第10张图片

5.然后设置到父视图左边的距离,以及宽高,此时我们会发现xib满篇报错,不用紧张,咱们继续
xib适配问题_第11张图片

6.加入Label,并且设置它距离上下左右间距为0
xib适配问题_第12张图片

7.选中图片和Label以及装载它们的UIView,同时一起更新约束,OK,完美解决,之后你的文字不管你怎么变长,只有文字只有一行,图片和文字作为一个整体就是居中对齐的,看下效果图吧。(注:还可以添加上去一个Button同时设置图片和文字,并调整他们的位置关系也可以达到相同的效果)


xib适配问题_第13张图片

你可能感兴趣的:(xib适配问题)