• iOS开发之Auto Layout入门


        随着iPhone6与iOS8的临近。适配的问题讲更加复杂,近期学习了一下Auto Layout的使用,与大家分享。


     什么是Auto Layout?

        Auto Layout是iOS6公布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对很多其它尺寸适配时界面布局能够更好的适应。


    为什么要用Auto Layout?

        Autolayout能解决不同屏幕(iPhone4。iPhone5,iPad...)之间的适配问题。 

        在iPhone4时代开发人员仅仅须要适配一种屏幕尺寸。相比与Android阵营的相对布局,iOS开发人员们最长用的做法是使用绝对布局。坐标和大小仅仅要写死就ok了。

    随后iPhone5出了,对于两种屏幕尺寸,就须要考虑一个新的问题,屏幕适配。苹果事实上非常早就考虑到了这一点Autoresizing技术,诚然Autoresizing有所不足,苹果在iOS6公布后引入了Autolayout特性,适应更广泛场景下的布局需求。当然了iPhone5因为和iPhone4在屏幕宽度上一致,即便不用上这些技术适配起来也不麻烦(笔者再之前也仅仅用到了Autoresizing),只是在iPhone6即将推出,即将面临更复杂的屏幕适配时,Auto Layout能帮助我们非常好地解决问题,此外也能解决横屏竖屏切换,iPad的适配问题。

        以下是本文事例代码在横竖屏切换下的效果:

        


    怎样使用Auto Layout?

    Auto Layout的基本概念

        Auto Layout的核心是约束(constraint),通过对view的约束(view的大小,view与view之间的关系)使得view可以自己计算出尺寸和坐标。

        Visual Format Language。在Auto Layout中使用的形象描写叙述约束的一种语言规则。

        Auto Layout的使用还是比較复杂的,一開始用可能会感觉云里雾里的,用的多了习惯VFL的写法之后就会感觉到它的方便了。


    在代码中使用Auto Layout

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        self.view.backgroundColor = [UIColor greenColor];
        UIView *viewTopLeft = [[UIView alloc] init];
        UIView *viewTopRight = [[UIView alloc] init];
        UIView *viewBottom = [[UIView alloc] init];
        [viewTopLeft setBackgroundColor:[UIColor blueColor]];
        [viewTopRight setBackgroundColor:[UIColor redColor]];
        [viewBottom setBackgroundColor:[UIColor blackColor]];
        
        //加入约束之前必须讲view加入到superview里
        [self.view addSubview:viewTopRight];
        [self.view addSubview:viewTopLeft];
        [self.view addSubview:viewBottom];
        
        //对于要使用Auto Layout的控件须要关闭Autoresizing
        [viewTopLeft setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewTopRight setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewBottom setTranslatesAutoresizingMaskIntoConstraints:NO];
        
        //使用VFL
    #if 1
        
        //dict和metrics相当于vfl中的名称与对象和数值的映射
        NSDictionary *dict = NSDictionaryOfVariableBindings(viewTopLeft, viewTopRight, viewBottom);
        //相当于这么写 NSDictionary *dict = @[@"viewTopLeft":viewTopLeft, @"viewTopRight":viewTopRight, @"viewBottom",viewBottom];不一定名称要与对象名一致
        NSDictionary *metrics = @{@"pad":@10};
        
        //水平关系(H:。可省略如vfl1),"|"相当与superview,"-"是连接符,表示两者间的间距也能够没有表示无间距
        //转化正自然语言的描写叙述就是:superview的左边界间隔pad距离是viewTopLeft(宽度与viewTopRight相等)再间隔默认距离是viewTopRight再间隔10的距离是superview的右边界。
        NSString *vfl0 = @"H:|-pad-[viewTopLeft(==viewTopRight)]-[viewTopRight]-10-|";
        NSString *vfl1 = @"|[viewBottom]|";
        
        //垂直关系(V:)
        NSString *vfl2 = @"V:|-[viewTopLeft(==viewBottom)]-[viewBottom]-pad-|";
        NSString *vfl3 = @"V:|-[viewTopRight]-[viewBottom]-pad-|";
        
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl0 options:0 metrics:metrics views:dict]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:0 metrics:metrics views:dict]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:0 metrics:metrics views:dict]];
        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl3 options:0 metrics:metrics views:dict]];
        
        //不使用VFL
    #else
        //viewTopLeft的leading与其superview的leading(左側)对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeLeading multiplier:1 constant:-10]];
        
        //viewTopLeft的top与其superview的top对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTop multiplier:1 constant:-10]];
        
        //viewTopRight的top与viewTopLeft的top对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTop multiplier:1 constant:0]];
        
        //viewTopRight的leading与viewTopLeft的trailing(右側)对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeTrailing multiplier:1 constant:10]];
        
        //viewTopRight的trailing与其superview的右側对其
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];
        
        //viewTopRight的宽与viewTopLeft宽相等
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopRight attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
        
        //viewTopRight的高与viewTopLeft高相等
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewTopLeft attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:viewTopRight attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
        
        //viewBottom的top与viewTopRight的bottom对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:viewTopRight attribute:NSLayoutAttributeBottom multiplier:1 constant:10]];
        
        //viewBottom的bottom与superview的bottom对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-10]];
        
        //viewBottom的leading与viewTopLeft的leading对齐
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeLeading multiplier:1 constant:0]];
        
        //viewBottom的高与viewTopLeft的高相等
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:viewTopLeft attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
        
        //viewBottom的宽与其superview的高相等
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:viewBottom attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:-20]];
        
    #endif
        
        //更新约束
        [self.view setNeedsUpdateConstraints];
        [self.view updateConstraintsIfNeeded];
    }</span>

    注意点:

        1.约束必须有给定的size然后通过约束计算出各个view的size和位置,上面self.view的size是给定的,假设superview的size不固定则必须给定某个subview的size才干通过约束计算出其它的。

        2.两个view之间的约束应该放在他们superview上,假设一个view是superview仅仅要放在superview的那个上即可了。

        2.约束的设计最好不要冲突。尽管能够设置优先级,可是easy出问题。

        3.VFL方式的设置view的size时仅仅有相等,小等或大等3种关系。没法像用法生成约束那样能够设置两个view的比例,所以在详细的应用中还是要两者结合起来使用。


     在xib中使用Auto Layout

        感觉在xib中使用autolayout还没实用代码来的方便,原理与代码上同样,这里就不多做描写叙述了。


    參考资料

    Auto Layout Guide

    ios8来了,屏幕更大。准备好使用 iOS Auto Layout了吗?

    Autolayout及VFL经验分享



  • 相关阅读:
    1、TensorFlow简介
    4、numpy+pandas速查手册
    3、pandas
    2、Numpy常用函数
    11、C内存四区模型
    1、Numpy基础
    10、C++函数
    开始
    创建与删除SQL约束或字段约束
    Halcon
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/6844650.html
Copyright © 2020-2023  润新知