IOS开发之UI布局
2016-04-04 01:54
375 查看
前言:本篇随笔会经常更新,随着本人对布局的深入学习,会不断补充新的知识、新的使用技巧、新的认识等等。
[b]1、Autoresizing(在代码中使用)[/b]
先简单的看看下面的代码,以及左边运行出来的效果,然后后面就会对iPhone模拟器进行旋转,再看看效果,然后结合代码中的autoresizingMask属性来体会一下:
横屏之后,说明竖屏默认的frame(0,0,100,500)换到横屏之后会默认在中间一些的位置,但是因为上面设置autoresizingMask属性是左边和上边自动伸缩:
以上就是基本的autoresizing在代码中的使用。
[b]2、Autolayout的使用(代码中使用)[/b]
在Autolayout之前,有Autoresizing可以做屏幕适配,但是局限性很大,有些任务根本无法完成(Autoresizing只能设置自身和父控件之间的相对关系)。
相比之下,Autolayout的功能就比Autoresizing的功能就强大的多,它能解决任何控件之间的关系。
AutoLayout的2个核心概念:
①约束:通过给控件添加约束,来决定控件的位置和尺寸。
使用AutoLayout就需要创建约束类创建约束对象:
NSLayoutConstraint *leftLC = [NSLayoutConstraint constrainWithItem:......];
②参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)。
如果会使用Autolayout就可以不需要考虑Frame值了。
在实际开发中,如果要使用AutoLayout,要注意一个问题,有的苹果Cocoa框架提供UIView或者自定义的UIView可能默认设置了相关Autoresizing,那么可能会和你后面添加的AutoLayout代码相互冲突,所以就需要下面的代码,将Autoresizing自动转换为AutoLayout:
代码实现Autolayout的步骤
利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
然后下面代码来使用AutoLayout,我们来实现下面的效果,当然旋转成竖屏还是要这样的布局哦,不然自动布局还有啥意义:
在代码实现之前,我需要补充几个知识:
使用自动布局是需要遵守一些约束的规则的:
添加约束的规则(1)
在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上
添加约束的规则(2)
2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
添加约束的规则(3)
3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
在下面展示全部的代码中,我抽取一部分来理解上面约束添加规则的意思:
接着再补充这个约束的类和创建对象的各个参数的意义:
一个NSLayoutConstraint对象就代表一个约束。
创建约束对象的常用方法
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
下面展示实现的完整代码:
补充:
[b]1、Autoresizing(在代码中使用)[/b]
先简单的看看下面的代码,以及左边运行出来的效果,然后后面就会对iPhone模拟器进行旋转,再看看效果,然后结合代码中的autoresizingMask属性来体会一下:
横屏之后,说明竖屏默认的frame(0,0,100,500)换到横屏之后会默认在中间一些的位置,但是因为上面设置autoresizingMask属性是左边和上边自动伸缩:
以上就是基本的autoresizing在代码中的使用。
[b]2、Autolayout的使用(代码中使用)[/b]
在Autolayout之前,有Autoresizing可以做屏幕适配,但是局限性很大,有些任务根本无法完成(Autoresizing只能设置自身和父控件之间的相对关系)。
相比之下,Autolayout的功能就比Autoresizing的功能就强大的多,它能解决任何控件之间的关系。
AutoLayout的2个核心概念:
①约束:通过给控件添加约束,来决定控件的位置和尺寸。
使用AutoLayout就需要创建约束类创建约束对象:
NSLayoutConstraint *leftLC = [NSLayoutConstraint constrainWithItem:......];
②参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)。
如果会使用Autolayout就可以不需要考虑Frame值了。
在实际开发中,如果要使用AutoLayout,要注意一个问题,有的苹果Cocoa框架提供UIView或者自定义的UIView可能默认设置了相关Autoresizing,那么可能会和你后面添加的AutoLayout代码相互冲突,所以就需要下面的代码,将Autoresizing自动转换为AutoLayout:
代码实现Autolayout的步骤
利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
然后下面代码来使用AutoLayout,我们来实现下面的效果,当然旋转成竖屏还是要这样的布局哦,不然自动布局还有啥意义:
在代码实现之前,我需要补充几个知识:
使用自动布局是需要遵守一些约束的规则的:
添加约束的规则(1)
在创建约束之后,需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则:
1)对于两个同层级view之间的约束关系,添加到它们的父view上
添加约束的规则(2)
2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
添加约束的规则(3)
3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
在下面展示全部的代码中,我抽取一部分来理解上面约束添加规则的意思:
接着再补充这个约束的类和创建对象的各个参数的意义:
一个NSLayoutConstraint对象就代表一个约束。
创建约束对象的常用方法
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
下面展示实现的完整代码:
- (void)viewDidLoad { [super viewDidLoad]; // 1.创建蓝色的view UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; // 禁止autoresizing自动转为autolayout的约束 blueView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:blueView]; // 2.创建红色的view UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; // 禁止autoresizing自动转为autolayout的约束 redView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:redView]; // 设置约束 /*****蓝色view的约束****/ // 左边的约束 // 左边约束 NSLayoutConstraint *leftlc_b = \ [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30]; [self.view addConstraint:leftlc_b]; // 底部约束 NSLayoutConstraint *bottomlc_b = \ [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-30]; [self.view addConstraint:bottomlc_b]; // 右边约束 NSLayoutConstraint *rightlc_b = \ [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-30]; [self.view addConstraint:rightlc_b]; // 宽度约束 NSLayoutConstraint *wlc_b = \ [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]; [self.view addConstraint:wlc_b]; // 高度约束 NSLayoutConstraint *hlc_b = \ [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50]; [blueView addConstraint:hlc_b]; /*****红色view的约束****/ // 右边约束 NSLayoutConstraint *rightlc_r = \ [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30]; [self.view addConstraint:rightlc_r]; // 顶部对齐 NSLayoutConstraint *toplc_r = \ [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]; [self.view addConstraint:toplc_r]; // 底部对齐 NSLayoutConstraint *bottomlc_r = \ [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0]; [self.view addConstraint:bottomlc_r]; }
补充:
相关文章推荐
- [Elixir006]CSV(Comma-separated values)处理
- Textarea - 百度富文本编辑器插件UEditor
- php函数mysql_query批量执行多句sql语句
- Ant_的最完整build.xml解释
- Apue学习:线程
- UITableView优化
- DuiLib(6)——界面管家CPaintManagerUI的函数简介
- UICollectionView基础
- lintcode:Unique Binary Search Trees II
- DuiLib(5)——CWindowWnd窗口函数简介
- [Queue]——面向接口编程
- 【POJ2926】Requirements【二进制】【最大曼哈顿距离】
- String、StringBuffer和StringBuilder
- lintcode: Unique Binary Search Trees
- [html][LigerUI]使用示例
- DELL DOSA 6.X 服务器引导光盘Dell Systems Build and Update Utility ISO下载地址
- IOS9 UIStackView简介
- DuiLib(4)——消息响应
- Android 入门三 UI界面
- 02-线性结构3 Pop Sequence