zoukankan      html  css  js  c++  java
  • iOS UIKit:Auto Layout

    Auto Layout

    1 简介

          auto Layout是Apple为多种显示分辨率的iPhone和旋转效果提供的自动布局工具,可以在Xcode和代码中进行设置。可以参考《精通IOS开发》P91、《IOS开发指南》P71及johnlui博客

    2 Xcode

          Interface Builder 为Auto Layout提供的很多工具支持,其中有align、pin和resolve Auto Layout Issues(缩简为rali)。如图 1所示三个图标,从左到右分别表示为align、pin和rali。

     图 1

    2.1 Align:对齐

           Xcode为视图内的组件提供自动对齐的功能,如图 2所示当单击align图标时,出现的对齐窗口被分为了三类:上、中和下。

     图 2

    2.1.1 Edges:多控件

           这个分类的功能是为多个控件提供对齐的功能,从图标就可知各个选项的意义:

    • Leading Edges:左对齐;
    • Trailing Edges:右对齐;
    • Top Edges:顶对齐;
    • Bottom Edges:底对齐。

    如图 3所示两个控件是顶部对齐。

     图 3

    2.1.2 Centers:多控件

           这个分类也是为多个控件提供对齐的功能,从图标也可以知各个图标的语义:

    • Horizontal Centers:水平中心对齐;
    • Vertical Centers:垂直中心对齐;
    • Baselines:文本底线对齐。

    2.1.3 Container:单控件

           这个分类是为容器内当个控件提供对齐的功能,各个语义为:

    • Horizeontally in Container:对于父视图的水平中心对齐;
    • Vertically in Container:对于父视图的垂直中心对齐;

    2.1.4 Update Frames

           这个选项的语义是为添加约束后进行的操作,如图 4所示,其语义分别为:

    • None:表示添加完约束后,不进行任何操作;
    • Items of New Constraints:表示添加完约束后,重新适应约束到涉及的View;
    • All Frames in Container:表示添加完约束后,更新所有的view和Frame。

     图 4

    2.2 Pin:位置

           Pin的功能为视图中的控件设置位置和大小,如图 5所示,当单击pin图标,将出现pin设置窗口,被分为的四类。

     
    图 5

    2.2.1 位置设置

           在图 5中的最上部分的功能是为视图中的控件设置位置。在其底部有个"Constrain to marigins"的复选框,并且在其中心有个白色矩形周围有4个输入框,。

    • 选中"Constrain to marigins"的复选框

      这种情况,当选中红色虚线,其四个输入框的值表示当前控件与最近控件之间的距离。

    • 未"Constrain to marigins"的复选框

      这种情况,当选中红色虚线,其四个输入框的值表示当前控件与父容器四条边之间的距离。

    2.2.2 单控件大小

           在图 5的第二部分,当选中复选框时,则对当前控件指定长度和宽度。

    2.2.3 多控件大小

           在图 5的第三部分,当选中复选框时,则对选中的多个控件设置相等的长度和宽度,其中aspect ratio还不知道是什么意思。

    2.2.4 对齐

           在图 5的第四部分与align的语义是相同。

    2.3 Rali

          Rali是resolve Auto Layout Issues的缩写,其功能是管理视图中的约束,如图 6所示可以分为上下两部分。

     
    图 6

    2.3.1 Selected Views

           这个分类是为当个控件或视图提供的功能,其各个选项的语义为:

    • Update Frames:在interface Build中更新当前选中的控件的位置。
    • Update Contranints:在interface Build中更新当前选中控件的约束。
    • Add Missing Contraints:为当前选中的控件,添加默认的约束。
    • Reset to Suggested Constraints:不清楚。
    • Clear constraints:清除当前选中控件所有的约束。

    2.3.2 All Views

           与Selected Views的不同是All views是对视图内的所有控件进行管理。  

    3 IB使用方式

     图 7

           在视图中的任何控件都有四个属性:x、y、with和height,如图 7所示,a和b表示当前控件的左上点在父视图中的坐标值,c和d表示当前控件的宽度和高度。所以使用Xcode的auto Layout是间接的为控件设置这四个属性。可以通过align和pin间接的设置这四个值,否则Xcode将会给出警告,如图 8所示有两个警告,表示"1"和"Label"两个控件在垂直方向存在模糊,即有可能是height或y值没有得到设置。

     图 8  

    4 代码使用方式

           http://my.oschina.net/201003674/blog/339099

  • 相关阅读:
    微信小程序、支付宝小程序、H5根据字符串生成相同的二维码
    大文件排序优化实践
    Nginx(五):http反向代理的实现
    Nginx(四):http服务器静态文件查找的实现
    关于大数据技术的一点思考
    Nginx(三):http模块的处理流程解析之正向代理
    基于Prometheus网关的监控完整实现参考
    谈谈mysql和oracle的使用感受 -- 差异
    Nginx(二): worker 进程处理流程框架解析
    退避算法实现之:客户端优雅回调
  • 原文地址:https://www.cnblogs.com/huliangwen/p/5004728.html
Copyright © 2011-2022 走看看