自动布局(Auto Layout)

作者: Magenta_she | 来源:发表于2016-08-04 20:25 被阅读402次

    参考资料:

    Auto Layout 和 Constraints - iOS · 碎碎念 - SegmentFault

    Auto Layout Tutorial in iOS 9 Part 1: Getting Started

    www.zybuluo.com/MicroCai/note/73867#autolayout-常见问题

    #1 Auto Layout 简介

    1. Auto Layout,通过设置在View上的约束,动态计算所有View的尺寸和位置。比如,你约束一个Button,使得它的水平中心线和一个ImageView相同。如果ImageView的尺寸或位置改变,Button会自动调整,以符合之前设置的约束。

    外部变化 -> 发生于Superview的尺寸或位置改变。这时,所有view都要重新计算尺寸和位置。这些变化大部分发生在运行时,它们需要app能动态响应。

    内部变化 -> 界面中的View的位置或尺寸的改变。比如,

    --显示内容或图片时,新的内容或图片需要新的布局

    --用户设置字体大小时,将改变与文本相关的控件的高度或宽度,布局必须能适应变化

    2.Auto Layout是如何工作的呢?

    考虑你设定的约束,自动计算出理想的位置和尺寸

    3.Auto Layout常见问题

    (1)设置了autolayout后,在代码中还能用self.someView.frame修改frame吗?   不能。

    (2)为什么有些控件只设置x,y值约束,也不会出错?

    UIKit 的一些控件如 UILabel、UIImageView 等有自适应特性,会根据内容自适应尺寸,所以不需要再约束其宽高。

    (3)同样的约束用在 UIScrollView 和 UIImageView上,为什么会出现错误?

    参考Nonomori 的文章:ScrollView 与 Autolayout

    #2 不使用Auto Layout

    1.打开File Inspector,不勾选Auto Layout

    2.拖三个View出来,设置尺寸,位置,颜色。

    Top left:Origin 20,20, Size 130 x 254 Green

    Top right:Origin 170,20, Size 130 x 254 Yellow

    Bottom:Origin 20,294, Size 280 x 254   Blue

    3.在Size Inspector里,选择Frame Rectangle。就以左上角的View为例吧,Frame Rectangle能让它紧贴顶部和左部边缘,并且随着superview尺寸的改变,能在水平和垂直方向上相应调整布局。

    Size Inspector

    但此时横向的效果图并不如意,三个view间并没有20的间隙。

    横向效果图

    4.改变需要重新布局的view的frame

    --将view与属性关联起来,并override viewWillLayoutSubviews()方法

    ViewController.swift

    注意:viewWillLayoutSubviews()方法是针对4英寸的设备上的,所以对4.7或3.5英寸的设备并不奏效。而用nib方法或继续添加if分句都会过于麻烦,所以我们不妨回到Auto Layout上来。

    当然,SnapKit也是一种解决的办法,可以尝试玩玩。

    #3 使用Auto Layout

    1.勾选Auto Layout,并去掉viewWillLayoutSubviews()方法。

    2.加constraints

    topLeftView topRightView bottomView

    看一下最后的效果

    在不同尺寸不同方向上的布局

    github项目地址

    相关文章

      网友评论

      • 苏堤拂晓:xib没有QuickVFL直观快速:

        UIView* viewWrapper = QUICK_SUBVIEW(self.view, UIView);
        UIView* viewGreen = QUICK_SUBVIEW(viewWrapper, UIView);
        UIView* viewYellow = QUICK_SUBVIEW(viewWrapper, UIView);
        UIView* viewBlue = QUICK_SUBVIEW(self.view, UIView);

        NSString* layoutTree = @"\
        V:|[viewWrapper][viewBlue(viewWrapper)]| {left, right};\
        H:|[viewWrapper]|;\
        H:|[viewGreen][viewYellow(viewGreen)]| {top, bottom};\
        V:|[viewGreen]|;";

        [self.view q_addConstraintsByText:layoutTree
        involvedViews:NSDictionaryOfVariableBindings(viewWrapper, viewGreen, viewYellow, viewBlue)];

      本文标题:自动布局(Auto Layout)

      本文链接:https://www.haomeiwen.com/subject/auuxsttx.html