美文网首页归去来autolayout
2. Auto Layout Without Constrain

2. Auto Layout Without Constrain

作者: fever105 | 来源:发表于2017-09-13 16:36 被阅读121次

    翻译@Auto Layout Guide(自动布局指南)


    Getting Started(新手上路)

    Auto Layout Without Constraints(无约束的自动布局)

    (译者:这里"无约束"指的是不需手动定义约束 🤔)

    借助堆叠视图(Stack View),无需手动定义约束,我们也能感受自动布局的强大。堆叠视图适用于盛装行列排布的界面元素,其有若干属性可供设置。

    • axis:(仅适用于UIStackView)定义内容的排布方向,水平或垂直。
    • orientation:(仅适用于NSStackView)定义内容的排布方向,水平或垂直。
    • distribution:定义既定方向上内容的分布方式。
    • alignment:定义与既定方向垂直的方向上内容的对齐方式。
    • spacing:定义两个相邻内容之间的间距。

    堆叠视图的使用方法很简单:在界面编辑器(Interface Builder)中拖拽一个水平或垂直排布的堆叠视图到画布上,并放入内容。

    如果一个内容有固有尺寸(intrinsic content size),在堆叠视图中它会保持这个尺寸;如果没有,界面编辑器会为其提供一个默认尺寸。缩放后者,界面编辑器会自动为其添加尺寸约束。

    通过属性(Attributes)面板,修改堆叠视图的属性,微调布局。例如,下例中,间距为8pt,分布方式为均匀填充。

    图3

    堆叠视图在布局内容时,还会考虑内容视图的内缩(content-hugging)和外扩(compression-resistance)优先级,在尺寸(Size)面板中进行修改它们。

    注意

    为内容视图添加约束,可以进一步调整布局;然而,要注意避免冲突:一般来说,在某个方向上,如果视图的尺寸等同于固有尺寸,就可以添加约束。更多约束冲突的相关信息,详见Unsatisfiable Layouts(无法满足的约束)

    此外,堆叠视图中还可以互相嵌套,构建更为复杂的布局。

    图4

    总而言之,如果可能,尽量使用堆叠视图进行布局。如若不能,再手动创建约束。

    更多堆叠视图的相关信息,详见UIStackView Class ReferenceNSStack View Class Reference

    注意

    虽然巧妙使用堆叠视图可以创建复杂界面,但仍无法完全回避手动创建约束。至少,我们需要通过约束定义堆叠视图本身的位置。

    相关文章

      网友评论

        本文标题:2. Auto Layout Without Constrain

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