关于AutoLayout

作者: 哈仕啦 | 来源:发表于2015-08-07 21:05 被阅读538次

    因为我也是刚学一两个月,会的也不是太全,不过对于用Autolayout布局也算是有些心得了。
        首先是storyboard底下那个W 和H的。。看到了吗?就是点一下之后弹了个可以点9个格子的东西。
        那个就代表着你写的APP是给怎样的屏幕用的,然后你将会在这类型的屏幕上做布局。所以说是怎样的屏幕呢?唔...其实他都有写的,我就偷懒了,不一一描述了。

    ![举个栗子](http:https://img.haomeiwen.com/i705264/0f770c93cff323ea.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

    我举了其中两种栗子来说。
    第一种是wChR。 他下面有描述,就是所有的iPhone的竖屏情形,也就是说你是用这个屏幕做布局是在iPhone竖屏下做布局。
    第二种是wRhA。描述说的就是所有均匀宽度的布局,比如iPad的横屏或者竖屏。
    简单地说,你要是开发iPhone的竖屏,那么就选第一种,基本就没问题啦。
    ---------------------华丽的分割线-------------------------

    然后就是 SB右下角那3个布局功能啦

    1、对齐功能 -----align约束


    Align

    依次说功能哈,英语好的就可以忽视了。

    首先最上面的4+3,也就是前7个,对于单个View或者说单个控件来说是不能使用的,听完他们功能就知道为什么了,第一个到第四个(Leading ~ Bottom)分别就是左、右、上、下4个边界的对齐。那你觉得如果只有一个控件你能怎么对齐呢?所以这4个用法是你同时框住几个控件,然后勾上这个对齐,那么你选中的几个控件就会在对应的边界对齐了。另外,其实常用的还有一种方法,就是对其中一个控件按住control拖到另一个控件上放开,选择LeadingTrailingTopBottom这四个选项对应的就是这4个功能。
        中间3个跟前四个用法相似,功能不同,分别是水平中心线对齐,垂直中心线对齐,和基线对齐,这个基线是可以自己设置哪条为基线的。
        最下面2个,单个控件或者视图也可以使用,因为他们的功能是是的你选中的这个控件或视图在它所在的View中水平居中或者垂直居中,其实也就是水平中心线对齐和垂直中心线对齐,只不过与他们对齐的对象是它的父视图而已!

    2、固定功能 -----pin约束

    pin

    固定功能,意思就是用来固定你这个视图或控件的,第一个上下左右分别填4个参数的就是和最近的控件或视图的距离,比如说左边填了5,那么意思是如果你左边有个控件,那么你选的这个控件的左边界距离左边那个控件的右边界距离为5pt,是不是很绕?慢慢想想吧~记住那个红色虚线点了才会生效哦。另外下面有个margins选项,有没有你们试试就知道了,就是会多一段间隔出来的,虽然很多人都说他是魔法margin,但是我目前还几乎没用过。还有待以后发掘他的好处了。
        然后就是本视图或控件的定宽和定高。添加了这两个约束就会定长了。
        接下来的2个需要多个控件或视图一起用,跟之前的对齐一样,他们分别是等宽和等高(这个在一行有几个等宽视图的时候用很好用哦)
        再接下来的Aspect Ratio, 这个也就是等比,添加之后这个视图的长宽就会以你设定的值来显示了。(比如用在一些imageView上,服务器传来的图片是16:9的,那你的IV就也要16:9啦不然拉伸后可能就不太好看啦)
        接下来这个是对齐功能,和第一个是一样的~

    Resolve

    3、重新处理功能 ----- Resolve Autolayout Issue
        这个意思很明显的,第一个更新视图框架,也就是说在你设置完约束之后你的视图可能是在左边,但是约束会让他在右边,然后就会出现右边有个橙色虚线的框框


    比如这样!

    比如上图这样,你一开始拖下来的控件在这里,也就是你看到的位置,但是你添加完约束之后,他实际位置应该是橙色虚线框框那里的,那这是你选择update frame之后你看到的这个控件就会去到橙色虚线那里,然后虚线会没了,不仅虚线,所有橙色线都会没了,因为你看到的控件已经和实际约束设定的位置重合了。
        第二个就是更新约束,他会根据你现在看到的位置来添加约束并且固定他,这个一般很少用,因为未必会添加到你想要的约束哦。
        第三个也是自动添加漏掉的约束,因为约束一定要用完全,也就是一定要让这个视图“有存在感”,举个例子吧,你拖下来一个View,然后只给他添加2个约束,一个是距离左边界5,一个是距离右边界5,那上下呢?只有这两个约束能固定住这个View吗?显然不能,那么这样的约束就是错误的。所以这个Add Missing 约束,就是可以添加缺少的约束。然后固定他,但是也未必是你想要的哦。
        第四个是用他建议的约束。
        第五个是清楚所有约束。

    ---------------------华丽的分割线-------------------------

    总结:

    你设置的约束必须具备两个功能。
            1、确定该视图的位置
            2、确定该视图的大小
        但是要注意约束的冲突,比如你设定了2:1的等比约束,又对他设置300宽400高,那会报错的。
        然后剩下的就是多联系布局了,相信你很快可以熟练运用Autolayout!

    相关文章

      网友评论

      • 哈仕啦:@Kent_Zhang 现在来说sb的autolayout布局还是比代码方便的,虽然我没用过代码布局。
      • Kent_Zhang:感觉有种很暴力的方式就是纯代码去写自动布局。比如
        #define SIZE_X 240
        #define SIZE_Y 30
        - (void)viewDidLoad {
        CGRect size = [self.view frame];
        size.origin.x = (size.size.width - SIZE_X) / 2;
        size.origin.y = (size.size.height - SIZE_Y) * 3 / 4;
        size.size.height = SIZE_Y;
        size.size.width = SIZE_X;
        self.textinput = [[UITextField alloc]initWithFrame:size];
        [self.textinput setBorderStyle:UITextBorderStyleRoundedRect];
        [self.textinput setBackgroundColor:[UIColor lightTextColor]];
        [self.textinput addTarget:self action:@selector(showtext) forControlEvents:UIControlEventEditingDidEndOnExit];
        这种类型的代码就是根据整个view的大小把textfield放进去。

      本文标题:关于AutoLayout

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