Autolayout
标签(空格分隔): UI
iPhone4之前
- 没有适配
- 经常会出现坐标值写死的代码
//#define ScreenW 320
//#define ScreenH 480
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height
// 创建一个显示在屏幕右下角的按钮
CGFloat buttonW = 100;
CGFloat buttonH = 50;
button.frame = CGRectMake(ScreenW - buttonW, ScreenH - buttonH, buttonW, buttonH);
iPad出现以后
- 需要横竖屏适配
- 出现了一种方便的屏幕适配技术:Autoresizing
- 局限性:仅仅能解决子控件和父控件之间的相对关系问题
- iOS6开始(Xcode4开始)
- 出现了一种新的屏幕适配技术:Autolayout
- 解决任何控件之间的相对关系问题
- iOS8开始(Xcode6开始)
- VFL全称是Visual Format Language,翻译过来是“可视化格式语言”
- VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言
- 使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
* format :VFL语句
* opts :约束类型
* metrics :VFL语句中用到的具体数值
* views :VFL语句中用到的控件
* 出现了一种新的屏幕适配技术:Sizeclass
Autoresizing
UIViewAutoresizingFlexibleLeftMargin
= 1 << 0,
- 距离父控件左边的间距是伸缩的
UIViewAutoresizingFlexibleRightMargin
= 1 << 2,
- 距离父控件右边的间距是伸缩的
UIViewAutoresizingFlexibleTopMargin
= 1 << 3,
- 距离父控件上边的间距是伸缩的
UIViewAutoresizingFlexibleBottomMargin
= 1 << 5
- 距离父控件下边的间距是伸缩的
UIViewAutoresizingFlexibleWidth
= 1 << 1,
- 宽度跟随父控件宽度进行伸缩
UIViewAutoresizingFlexibleHeight
= 1 << 4,
- 高度跟随父控件高度进行伸缩
Autolayout
- 2个核心概念
约束
- 尺寸约束
- width约束
- height约束
- 位置约束
- 间距约束(上下左右间距)
- 尺寸约束
参照
- 所添加的约束跟哪个控件有关(相对于哪个控件来说)
常见单词
- Leading -> Left -> 左边
- Trailing -> Right -> 右边
代码实现Autolayout的步骤
- 利用NSLayoutConstraint类创建具体的约束对象
- 添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
- 代码实现Autolayout的注意点
- 要先禁止autoresizing功能,设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
* 添加约束之前,一定要保证相关控件都已经在各自的父控件上
* 不用再给view设置frame
- 创建约束对象的常用方法
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
* view1 :要约束的控件
* attr1 :约束的类型(做怎样的约束)
* relation :与参照控件之间的关系
* view2 :参照的控件
* attr2 :约束的类型(做怎样的约束)
* multiplier :乘数
* c :常量
- 添加约束的规则
- 对于两个
同层级view
之间的约束关系,添加到它们的父view上 - 对于两个
不同层级view
之间的约束关系,添加到他们最近的共同父view上 - 对于
有层次关系的两个view
之间的约束关系,添加到层次较高的父view上
- 对于两个