iOS – XIB之AutoLayout添加约束

热门标签

,

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

XIB——AutoLayout添加约束

仿QQ登录界面:

说明:以下各图背景红色只是方便看清楚;

1.创建工程:创建xib文件

2.打开xib文件:

(1).创建头像:

拖控件:uiimageview——》放到任意位置——》点击Align键,Pin键;如下图:

iOS - XIB之AutoLayout添加约束
iOS - XIB之AutoLayout添加约束

此时:就可以对控件任意约束了:

说明:由于时间原因,没介绍的以后慢慢自己琢磨;

Align键:Horizontally: 垂直居中对齐; Vertically:水平居中对其;

Pin键:

Add New Constraints:表示这个控件距离上下左右的间距;

Constrain to margins: 以AutoMargins的位置作为起点进行约束,一般选中即可;

Width:就是该控件的宽度;

Height:就是该控件的高度;

iOS - XIB之AutoLayout添加约束
iOS - XIB之AutoLayout添加约束

注意:上下左右的间距和控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行;笔者建议就是:给了距离左边的间距,同时给出空间宽度即可,适用于lable,textfile等控件,不考虑它到底距离右边多少;如果给了距离左右的间距,就不要给宽度了,适用于button之类的控件;

下面:开始添加imageview的约束:

1》.垂直居中:点击align——》选中Horizontally——》点击Add 1 constraint:

iOS - XIB之AutoLayout添加约束

2》.给大小: 130 * 130, 距离上边缘 20;

注意:给上下左右的大小时:先点击红色虚线的部分,让他变成实线;

给宽度、高度时先打勾选中,再给大小;

最后点击:Add 3 constraint:

iOS - XIB之AutoLayout添加约束

3》.点击 Resolve Auto Layout Issues——》点击 Update Frames;

iOS - XIB之AutoLayout添加约束

4》.其他处理:

在右侧可以添加图片,修改背景等属性

iOS - XIB之AutoLayout添加约束

运行:5和6s效果图:

iOS - XIB之AutoLayout添加约束
iOS - XIB之AutoLayout添加约束

修改成圆角:

点击右上角:两个圈的那个——》在.m文件创建属性关联;

iOS - XIB之AutoLayout添加约束

关联:

选中控件(uiimageview)——》右键:

iOS - XIB之AutoLayout添加约束

选中New Prferencing Outlet后面的小圆圈,拖到.m文件的@interface与@end中:

iOS - XIB之AutoLayout添加约束

给属性命名qqImg,并点击Connect关联:

iOS - XIB之AutoLayout添加约束

最后修改边角:

_qqImg.layer.cornerRadius = 65;

运行:

iOS - XIB之AutoLayout添加约束

最终效果图:6s和5:

iOS - XIB之AutoLayout添加约束
iOS - XIB之AutoLayout添加约束

标签:

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术狗|博客
原文地址:《iOS – XIB之AutoLayout添加约束》 发布于2019-10-02

分享到:
赞(0)

评论 抢沙发

6 + 2 =


iOS – XIB之AutoLayout添加约束

长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录