一、屏幕适配-autoresizing简单使用
1、为什么要屏幕适配?
> iphone手机屏幕尺寸呈现多样化。
> 横竖屏适配(ipad)
2、屏幕适配的发展过程。
> 纯代码计算frame适配--> autoresizing--> autolayout。
* autoresizing:ios7之前经常使用
* autolayout:ios6开始出现,ios7之后大范围使用
> PPT介绍页面布局的三个时期
3 autoresizing示例
//注意:autoresizing和autolayout是一般情况下不能共存,要开启autoresizing(去掉Use Auto Layout)
3.1、通过storyboard讲解autoresizing使用
> 在四个角放入4个控件运行查看两种情况下默认的效果
> 依次设置4个控件autosizing周围的线条讲解四周线条含义(固定距离周围的距离)
3.2、通过代码实现autosizing
> 需求:蓝色父控件和红色小控件
/**
1.红色工具条永远粘着蓝色父控件的底部
* 距离父控件底部、左边、右边的间距是固定的
* 距离父控件顶部的间距是伸缩的
2.红色工具条的宽度永远填充整个蓝色父控件
* 自己的宽度跟随父控件宽度的改变而伸缩(改变)
3.红色工具条的高度永远固定是44
*/
设置autoreizingMask属性距离顶部可拉伸、宽度可拉伸。
> autoreizingMask每个枚举值的含义如下:
/*
UIViewAutoresizingNone = 0,
默认情况,父控件的尺寸修改了,子控件没有任何反应
UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
距离父控件左边的间距是伸缩的(右边距离固定)
UIViewAutoresizingFlexibleWidth = 1 << 1,
自己的宽度跟随父控件宽度的改变而伸缩
UIViewAutoresizingFlexibleRightMargin = 1 << 2,
距离父控件右边的间距是伸缩的(左边的距离固定)
UIViewAutoresizingFlexibleTopMargin = 1 << 3,
距离父控件顶部的间距是伸缩的
UIViewAutoresizingFlexibleHeight = 1 << 4,
自己的高度跟随父控件高度的改变而伸缩
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
距离父控件底部的间距是伸缩的
*/
> 切记:代码中设置某个方向可伸缩代表另一个方向固定,(storyboard里面)中正好相反
二、Autolayout基本使用
1、autoresizing的缺陷
> 需求:如果想设置A控件和B控件之间距离固定。
> 无论如何Autosizing无法满足需求,因为Autosizing是相对父控件计算的,不能单独设置两个子控件之间的相对位置。
> autolayout的出现就是为了拟补autoresizing的缺陷。
2、Autolayout简单使用
> PPT介绍Autolayout基本概念
* 参照:就是一个控件可以参照另一个控件的位置
* 约束:就是限制条件。比如里两个控件之间的距离是20
3、新建项目演示autolayout的基本使用。
> 验证无法通过autoresizing来固定两个子控件之间的间距。
> 使用autolayout来约束子控件的宽高和距离父控件上下左右的间距。
> 警告和错误
1)、警告(黄色提示)
* 控件的frame不匹配所添加的约束, 比如比如约束控件的宽度为100, 而控件现在的宽度是110
2)、错误(红色提示)
* 缺乏必要的约束, 比如只约束了宽度和高度, 没有约束具体的位置
* 两个约束冲突, 比如1个约束控件的宽度为100, 1个约束控件的宽度为110
> Top Layout Guide 上面的参照线
> Bottom Layout Guide 下面的参照线
三、Autolayout其它用法
1、约束两个子控件
> 宽高相等
> 垂直方向距离固定20
> 两个子控件永远在父控件中间
四、Autolayout练习(PPT)
五、Autolayout代码实现
1、使用代码实现AutoLayout的注意点。
> 要先禁止autoresizing功能,设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
> 添加约束之前,一定要保证相关控件都已经在各自的父控件上
> 不用再给view设置frame
2、代码实现Autolayout概念(PPT讲解)
> 对照公式讲解NSLayoutConstraint对象每个参数的含义
/*
typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
NSLayoutAttributeLeft = 1, //左侧
NSLayoutAttributeRight, //右侧
NSLayoutAttributeTop, //上方
NSLayoutAttributeBottom, //下方
NSLayoutAttributeLeading, //左边
NSLayoutAttributeTrailing, //右边
NSLayoutAttributeWidth, //宽度
NSLayoutAttributeHeight, //高度
NSLayoutAttributeCenterX, //X轴中心
NSLayoutAttributeCenterY, //Y轴中心
NSLayoutAttributeBaseline, //文本底标线
NSLayoutAttributeNotAnAttribute = 0 //没有属性
};
其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文) 则会对调,换句话说就是只用left和right就好了
typedef NS_ENUM(NSInteger, NSLayoutRelation) {
NSLayoutRelationLessThanOrEqual = -1, //小于等于
NSLayoutRelationEqual = 0, //等于
NSLayoutRelationGreaterThanOrEqual = 1, //大于等于
};
*/
3、代码实现AutoLayout(PPT练习2)
> 添加控件并禁止Autoresizing
> 创建蓝色控件约束(高度、距离左边、顶部、右边)
> 创建红色控件约束(右边等于蓝色、高度等于蓝色、顶部对齐蓝色底部、宽度等于蓝色一半)
4、VFL
> VFL基本概念(PPT)
> 利用VFL实现PPT练习2
* 注意在设置垂直方向属性时设置右对齐
* 注意VFL语句中不能有乘除法(还需要代码写约束配合)
/*** 利用VFL语言生成约束*/
NSString *vfl = @"V:|-padding-[blueView(40)]-padding-[redView(==blueView)]";
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSDictionary *metrics = @{@"padding" : @20};
NSArray *contrains = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:0 metrics:metrics views:views];
/*
Autolayout基础知识
http://commandshift.co.uk/blog/2013/02/20/creating-individual-layout-constraints/
http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/
*/
/*
TableView中使用Autolayout (MeXXX)
https://github.com/smileyborg/TableViewCellWithAutoLayout
https://github.com/smileyborg/TableViewCellWithAutoLayoutiOS8
注意:利用Autolayout约束UIScrollView和TableView需要特殊处理
*/
5、AutoLayout动画(PPT)
> 每个约束都是NSLayoutConstraint对象,可以修改该对象的constant调整控件的布局然后调用layoutIfNeeded更新布局
6、UILabel使用autolayout(PPT)
六、sizeclass
1> 发展历程
代码计算frame -> autoreszing(父控件和子控件的关系) -> autolayout(任何控件都可以产生关系) -> sizeclass
2> sizeclass
* 仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout
* 不再有横竖屏的概念, 只有屏幕尺寸的概念
* 不再有具体尺寸的概念, 只有抽象尺寸的概念
* 把宽度和高度各分为3种情况
1) Compact : 紧凑(小)
2) Any : 任意
3) Regular : 宽松(大)
4) 符号代表
- : Compact
* : Any
+ : Regular
5) 继承性(不建议大家使用Any)
* * : 其它8种情况都会继承
* - : 会被- - \ + -继承
+ * : 会被+ - \ + +继承
6) sizeclass和autolayout的作用
sizeclass:仅仅是对屏幕进行了分类
autolayout:对屏幕中各种元素进行约束(位置\尺寸)
7) 从xcode6开始,iPhone&ipad的开发可以使用同一个 stroyboard。