iOS6+AutoLayout使用教程

发布时间:2020-04-01 07:16:17 作者:idanal
来源:网络 阅读:602

为了适配iPhone6 Plus,必须学会AutoLayout了,研究了两天,记得一下心得iOS6+AutoLayout使用教程

Autolayout类似于安卓里的layout,或者说类似于web开发中的html css,简单来说就是用相对布局来代替绝对成局(这是我的理解)。


使用Autolayout有两种方式,1.用xib配置,2.用代码写。

无论用xib还是代码,需要遵循的一个原则是,一个视图你必须包含以下两个限制:1.position,设定x,y坐标、上下左右间隙、居中等这些条件都能确定位置,但这几个是相互冲突的,只能用其一;2.size, 必须设定尺寸,可以设定固定值的宽高,也可以通过设定宽高比例来等比缩放。


1.用xib配置

这种方式比较直观,打开xib进行配置即可,具体的使用方法网路上有很多介绍,这里就不细说了


2.用代码写

用xib配置应该能完成大部分需要,不过还是会有要用代码写的时候,下面是我写的一个例子,包含了option, metric的用法。

这个例子的效果是:xib里放置了两个水平居中的butt1,butt3,然后用代码创建了butt2,butt2与butt3水平居中对齐,最后创建了view1,view1只与根视图进行布局,与不受其他视图影响


  //butt2

    {

        UIButton *butt = [UIButton buttonWithType:UIButtonTypeCustom];

        butt.backgroundColor = [UIColor redColor];

        [butt setTitle:@"2" forState:UIControlStateNormal];

        butt.translatesAutoresizingMaskIntoConstraints = NO;

        butt.frame = CGRectMake(0, 0, 100, 100);    //这个frame其实是不需要的

        [self.view addSubview:butt];

        butt2 = butt;

        

        //: = 1:1

        [butt2 addConstraint:[NSLayoutConstraint constraintWithItem:butt2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:butt2 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];

        

        //butt2butt3水平对齐,竖直间隙20 宽定为50

        NSDictionary *viewsDict = NSDictionaryOfVariableBindings(butt3,butt2);

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[butt3]-20-[butt2(==50)]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:viewsDict]];

    }

    

    //A new view,相对于根视图布局

    {

        UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];

        view1.translatesAutoresizingMaskIntoConstraints = NO; //注意,代码创建的view要设置此属性为NO以防止系统自动转换autoresizing

        view1.backgroundColor = [UIColor blueColor];

        [self.view addSubview:view1];

        

        //1.宽高比1:1.5

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1.5f constant:0]];

        

        //2.固定高度150

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:0.f constant:150.f]];

        

        //3.水平居中 (34只能选其一,因为这两个限制是冲突的)

        //    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

        

        //4.右边对齐,保留10间隙

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];

        

        //5.上下间隔,这里要的效果是保持顶部间隙为100,所以底部间隙要是可变的>=100,试试下面6的效果对比一下

CGFloat hMargin = 100.f;

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-hmar-[view1]-(>=hmar)-|" options:0 metrics:@{@"hmar":@(hMargin)} views:NSDictionaryOfVariableBindings(view1)]];


        

        //6.上下间隔,顶部间隙可变

        //[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[view1]-(==100)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1)]];

    }



关于VFL,请参考苹果官方文档: Visual Format Language

推荐阅读:
  1. subversion的使用教程
  2. kSar使用教程

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ios autolayout

上一篇:Android的UI调优

下一篇:android中有关gen目录消失问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》