自动布局autolayout与sizeclass

最新推荐文章于 2023-05-10 10:29:20 发布

yejiexiaobai

最新推荐文章于 2023-05-10 10:29:20 发布

阅读量556

点赞数

分类专栏： iPhone开发——UI

本文链接：https://blog.youkuaiyun.com/yejiexiaobai/article/details/49230293

版权

iPhone开发——UI 专栏收录该内容

21 篇文章

订阅专栏

屏幕适配发展：

1. 通过代码计算frame

2. Autoresizing（设置控件与父控件的相对关系,从而实现间接设置frame，ios系统在运行时会根据设置的规则, 计算出对应的frame,无需手动计算frame）

通过设置子控件与父控件的关系来决定如何显示控件

3. autolayout

通过设置某控件与任意其他控件间的关系来决定如何显示这个控件,不仅仅局限与父子控件

4. size classes

通过 size classes +autolayout实现针对不同屏幕为控件设置不同的约束

注意: 无论是通过 autoresizing 还是 autolayout 其实只是间接设置了控件的 frame, 所以一旦使用了 autoreszing 或者 autolayout 那么就不要在直接设置 frame 了, 否者可能产生混乱。

并且： autoresizing 和autolayout 二者是互斥的，同时只能使用其中一种，当使用autoresizing的时候必须禁用autolayout, 当使用autolayout的时候就无法使用Autoresizing了。

设置左右边距的时候16的原因：在 iPhone6 Plus 上怕手误触摸屏幕（单手握手机）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

自动布局所使用的按钮:

示例：

1、

需求：设置一个宽 150 ，高 40 的按钮始终显示在屏幕的正中央（水平居中对齐、垂直居中对齐）

思路：设置水平居中约束、垂直居中约束、高和宽的约束

最终效果：

2、

设置一个 UIView 无论在任何屏幕下距离上下左右四个边的距离都是 50 。思路：设置距离四周的 margin 为 50.

3、

距离左右 20, 两个 View之间间隔始终是20, 两个 View 的高度都是50。宽度不定。（演示使用多种方式都可以实现）

注意：设置右边相对于某个控件的 margin （间距）的时候 , 如果当前控件的右边没有那个控件，则无法选择。

红View 绿View

按住command选中两个View设置等宽

最终效果：

4、

在控制器 view 顶部添加 2 个 view ， 1 个蓝色， 1 个红色

2 个 view 高度永远相等 , 50

红色 view 和蓝色 view 右边对齐

蓝色 view 距离父控件左边、右边、上边间距相等， 30

蓝色 view 距离红色 view 间距固定， 3 0

红色 view 的左边和父控件的中点对齐 ( 或者红色 View 的宽度是蓝色 View 的一半 )

先设置蓝色view的上、左、右为30，高度为50

然后设置红色与蓝色view等高，设置红色view距蓝色view间距30 ，设置红色view与蓝色view右边对齐；

设置红色view水平居中对齐，然后在约束中设置红色view的左边与父容器水平中线对齐

最终效果：

5、效果图:

以红色为例：

固定红色view的上边、左边距离父控件的距离为0，设置水平，垂直居中，然后选中水平居中的约束

红色view的bottom等于父控件的中心点的y

这样红色控件的约束就设置好了，其他控件类似

6、伪屏幕适配

因为我们这里只有4寸的应用图片，所以我们就用启动图限制控制器的大小不能超过4寸

然后设置图片：水平居中显示，垂直居中显示

思路：如果是3.5寸的，我就让你显示中间的主要部分效果：

如果比4寸大，就把图片拉伸（不管多大，你横着还得给我显示320个点，竖着568个点）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

代码创建约束：

添加约束的规则：

如果添加的约束和其它控件没有关系, 会添加到自己身上

如果是父子关系, 设置子控件的约束, 约束会添加到父控件上

如果是兄弟关系, 设置两兄弟的约束, 约束会添加到第一个共同的父控件上

一个 NSLayoutConstraint 对象就代表一个约束

创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 要约束的控件

attribute:(NSLayoutAttribute)attr1 约束的类型（做怎样的约束）

relatedBy:(NSLayoutRelation)relation 与参照控件之间的关系

toItem:(id)view2 参照的控件

attribute:(NSLayoutAttribute)attr2 约束的类型（做怎样的约束）

multiplier:(CGFloat)multiplier 乘数

constant:(CGFloat)c; 常量

自动布局有个核心公式

obj1.property1 =（obj2.property2* multiplier）+constantvalue

typedef NS_ENUM(NSInteger,NSLayoutAttribute) {

NSLayoutAttributeLeft =1, //左侧

NSLayoutAttributeRight, //右侧

NSLayoutAttributeTop, //上方

NSLayoutAttributeBottom, //下方

NSLayoutAttributeLeading, //首部

NSLayoutAttributeTrailing, //尾部

NSLayoutAttributeWidth, //宽度

NSLayoutAttributeHeight, //高度

NSLayoutAttributeCenterX, //X轴中心

NSLayoutAttributeCenterY, //Y轴中心

NSLayoutAttributeBaseline, //文本底标线

NSLayoutAttributeNotAnAttribute =0 //没有属性

};

typedef NS_ENUM(NSInteger,NSLayoutRelation) {

NSLayoutRelationLessThanOrEqual =-1, //小于等于

NSLayoutRelationEqual =0, //等于

NSLayoutRelationGreaterThanOrEqual =1, //大于等于

};

步骤：

1》创建控件并添加到其父控件上

 // 创建蓝色View
    UIView *blueView = [[UIView alloc] init];
    // 设置背景色
    blueView.backgroundColor = [UIColor blueColor];
    // 设置frame
    //blueView.frame = CGRectMake(0, 0, 100, 100);
    // 把蓝色view加到self.view中
    [self.view addSubview:blueView];

2》禁用autoresizing功能

blueView.translatesAutoresizingMaskIntoConstraints =NO;

3》利用 NSLayoutConstraint 类创建具体的约束对象，并添加约束到相应的view上

//1. 创建蓝色view的约束
    // 1.1 创建蓝色view高度的约束
    // A对象  的  某属性 等于 B对象 的 某属性 乘以 multiplier 加 constant
    NSLayoutConstraint *blueHC = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];
    // 把约束添加到控件上
    [blueView addConstraint:blueHC];
    
    
    
    // 1.2 距离左边30
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView.superview  attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
    [self.view addConstraint:blueLeft];
    
    
    
    // 1.3 距离上边30 (self.topLayoutGuide 状态栏)
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
   [self.view addConstraint:blueTop];
    
    // 1.4 距离右边30
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30];
    [self.view addConstraint:blueRight];

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

基于Autolayout的动画

思路：通过添加约束后，在修改约束的值，来实现动画