AutoLayout适配教程(一)控件的等比例伸缩

AutoLayout适配教程(一)控件的等比例伸缩

在Storyboard开发(Xib)中,控件的等比例伸缩适配是iPhone不同机型屏幕适配的一个难点也是重要。这边以一个首界面的4个button等比例伸缩适配为例。效果图是以6的尺寸出的,Storyboard中屏幕size也是以4.7寸为基础。效果图如下:
效果图

(PS:教程对应代码Github地址,需要的可以点击进入Github

也可以直接在终端下用命令进行下载:

ishios-MacBook-Pro:~ shixiongwei$ git clone https://github.com/IDOshi201109/TjjWidgetEqualProportion

未使用AutoLayout适配前各个机型下运行效果如下:
4/4S:
4s

5/5S/5SE:
5s-1

6/6S:
6s

6P/6S P
6p

分析:
从上面的运行效果图看,只有iPhone6屏幕上的显示是正常的,因为我们在storyboard中拖取空间,就是以4.7寸屏幕为基准的。在4S、5S屏幕闪,会显示不全。在6Plus屏幕上,屏幕右边空出太多。其实这么都是没有对屏幕进行适配的问题。
下面我们将一步一步截图进行AutoLayout适配讲解。
AutoLayout适配教程(一) 控件的等比例伸缩
第一步:
选中4个button,(从左上编号1,右上编号2,左下编号3,右下编号4),设置为等宽、等高、等比例。操作如下图:
1

第二步:
对button1进行左、上的约束。
2

第三步:
对button2(右上)进行左、上、右约束。
3

第四步:
对button3(左下)进行左、上约束。
4

第五步:
对button4(右下)进行左、上、右约束。
5

这边等比例伸缩,没有固定设置button的宽度和高度。4个button都是正方形,每个button进行等比例约束。
最终适配之后运行效果图如下:
8

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值