iOS开发:XIB之AutoLayout添加约束
2016-03-16 18:48
429 查看
XIB——AutoLayout添加约束
仿QQ登录界面:
说明:以下各图背景红色只是方便看清楚;
1.创建工程:创建xib文件,不会,可看上上上篇:初识xib;
2.打开xib文件:
(1).创建头像:
拖控件:uiimageview——》放到任意位置——》点击Align键,Pin键;如下图:
![](http://img.blog.csdn.net/20160316181250948?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20160316175146287?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此时:就可以对控件任意约束了:
说明:由于时间原因,没介绍的以后慢慢自己琢磨;
Align键:Horizontally: 垂直居中对齐; Vertically:水平居中对其;
Pin键:
Add New Constraints:表示这个控件距离上下左右的间距;
Constrain to margins: 以AutoMargins的位置作为起点进行约束,一般选中即可;
Width:就是该控件的宽度;
Height:就是该控件的高度;
![](http://img.blog.csdn.net/20160318092227173?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20160318092249598?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
注意:上下左右的间距和控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行;笔者建议就是:给了距离左边的间距,同时给出空间宽度即可,适用于lable,textfile等控件,不考虑它到底距离右边多少;如果给了距离左右的间距,就不要给宽度了,适用于button之类的控件;
下面:开始添加imageview的约束:
1》.垂直居中:点击align——》选中Horizontally——》点击Add 1 constraint:
![](http://img.blog.csdn.net/20160316182004951?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2》.给大小: 130 * 130, 距离上边缘 20;
注意:给上下左右的大小时:先点击红色虚线的部分,让他变成实线;
给宽度、高度时先打勾选中,再给大小;
最后点击:Add 3 constraint:
![](http://img.blog.csdn.net/20160316182241029?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3》.点击 Resolve Auto Layout Issues——》点击 Update Frames;
![](http://img.blog.csdn.net/20160316182720270?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
4》.其他处理:
在右侧可以添加图片,修改背景等属性
![](http://img.blog.csdn.net/20160316183038587?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
运行:5和6s效果图:
![](http://img.blog.csdn.net/20160316183234346?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20160316183244011?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
修改成圆角:
点击右上角:两个圈的那个——》在.m文件创建属性关联;
![](http://img.blog.csdn.net/20160316183644485?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
关联:
选中控件(uiimageview)——》右键:
![](http://img.blog.csdn.net/20160316184201007?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
选中New Prferencing Outlet后面的小圆圈,拖到.m文件的@interface与@end中:
![](http://img.blog.csdn.net/20160316184328759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
给属性命名qqImg,并点击Connect关联:
![](http://img.blog.csdn.net/20160316184500149?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
最后修改边角:
_qqImg.layer.cornerRadius = 65;
运行:
![](http://img.blog.csdn.net/20160316184608900?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
最终效果图:6s和5:
![](http://img.blog.csdn.net/20160317084806977?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
仿QQ登录界面:
说明:以下各图背景红色只是方便看清楚;
1.创建工程:创建xib文件,不会,可看上上上篇:初识xib;
2.打开xib文件:
(1).创建头像:
拖控件:uiimageview——》放到任意位置——》点击Align键,Pin键;如下图:
此时:就可以对控件任意约束了:
说明:由于时间原因,没介绍的以后慢慢自己琢磨;
Align键:Horizontally: 垂直居中对齐; Vertically:水平居中对其;
Pin键:
Add New Constraints:表示这个控件距离上下左右的间距;
Constrain to margins: 以AutoMargins的位置作为起点进行约束,一般选中即可;
Width:就是该控件的宽度;
Height:就是该控件的高度;
注意:上下左右的间距和控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行;笔者建议就是:给了距离左边的间距,同时给出空间宽度即可,适用于lable,textfile等控件,不考虑它到底距离右边多少;如果给了距离左右的间距,就不要给宽度了,适用于button之类的控件;
下面:开始添加imageview的约束:
1》.垂直居中:点击align——》选中Horizontally——》点击Add 1 constraint:
2》.给大小: 130 * 130, 距离上边缘 20;
注意:给上下左右的大小时:先点击红色虚线的部分,让他变成实线;
给宽度、高度时先打勾选中,再给大小;
最后点击:Add 3 constraint:
3》.点击 Resolve Auto Layout Issues——》点击 Update Frames;
4》.其他处理:
在右侧可以添加图片,修改背景等属性
运行:5和6s效果图:
修改成圆角:
点击右上角:两个圈的那个——》在.m文件创建属性关联;
关联:
选中控件(uiimageview)——》右键:
选中New Prferencing Outlet后面的小圆圈,拖到.m文件的@interface与@end中:
给属性命名qqImg,并点击Connect关联:
最后修改边角:
_qqImg.layer.cornerRadius = 65;
运行:
最终效果图:6s和5:
相关文章推荐
- NSMutableAttributedString
- 判断iOS设备型号
- iOS 生成二维码
- iOS企业开发In House ipa发布流程
- iOS开发zhiATM机的设计与实现
- 使用设计模式中的Singleton单例模式来开发iOS应用程序
- iOS7程序后台运行
- iOS开发企业版ipa分发(in-house)
- iOS LeftMenu抽屉效果与ScrollView共存时的手势冲突
- 获取iOS应用中当前处于Activity状态的ViewController
- iOS开发~CocoaPods使用详细说明
- iOS开发——GCDAsyncSocket
- iOS开发拓展篇—CoreLocation定位服务
- ios开发之你真的了解了KVC吗?
- iOS 手势操作:拖动、捏合、旋转、点按、长按、轻扫、自定义
- iOSURL编码
- ios一个自定义的下拉多选菜单
- ios屏幕适配-sizeclass
- iOS 封装一个 Date处理服务器中返回的时间
- IOS 汉字拼音排序