UIStackView

作者: 萌新小透明 | 来源:发表于2016-07-30 13:57 被阅读326次

UIStackView to resize/layout

自适应、适配、布局这几个关键词一直伴随着iOS开发,从以前的单一尺寸屏幕,到现在的多尺寸屏幕,Apple一直致力于让开发人员尽可能少在这些事上耗费过多的精力,所以Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年iOS 9中又增加了新的控件:UIStackView。这些无一不是我们开发者做适配的利器。

UIStackView简介

UIStackView Class Reference 1

The UIStackView class provides a streamlined interface for laying out a collection of views in either a column or a row. Stack views let you leverage the power of Auto Layout, creating user interfaces that can dynamically adapt to the device’s orientation, screen size, and any changes in the available space. The stack view manages the layout of all the views in its arrangedSubviews property. These views are arranged along the stack view’s axis, based on their order in the arrangedSubviews array. The exact layout varies depending on the stack view’s axis, distribution, alignment, spacing, and other properties.


axis
  • Spacing 间隔
    StackView可以设置子视图之间的间隔

  • Alignment 对齐方式
    StackView可以设置子视图的对齐方式(水平方向和垂直方向的该属性值有所区别):

    alignment
    • Fill:子视图填充StackView。
    • Leading:靠左对齐。
    • Trailing:靠右对齐。
    • Center:子视图以中线为基准对齐。
    • Top:靠顶部对齐。
    • Bottom:靠底部对齐。
    • First Baseline:按照第一个子视图中文字的第一行对齐,同时保证高度最大的子视图底部对齐(只在axis为水平方向有效)。
    • Last Baseline:按照最后一个子视图中文字的最后一行对齐,同时保证高度最大的子视图顶部对齐(只在axis为水平方向有效)。
  • Distribution 分布方式
    StackView可以设置子视图的分布方式:

    • Fill:默认分布方式。
    • Fill Equally:子视图的高度或宽度保持一致。
    • Fill:Proportionally:按比例分布。
    • Equal Spacing:子视图保持同等间隔。
    • Equal Centering:每个子视图中心线之间保持一致。
  • baselineRelativeArrangement
    determines whether the vertical spacing between views is measured from the baselines.
    决定了其视图间的垂直间隙是否根据基线测量得到,选中 Baseline Relative 将根据subview的基线调整垂直间距。3

  • layoutMarginsRelativeArrangement
    determines whether the stack view lays out its arranged views relative to its layout margins.
    决定了 stack 视图平铺其管理的视图时是否要参照它的布局边距,选中 Layout Margins Relative 将相对于标准边界空白来调整subview位置。

  • UIStackView的嵌套

    Typically, you use a single stack view to lay out a small number of items. You can build more complex view hierarchies by nesting stack views inside other stack views.

    既然UIStackView继承了UIView,那么UIStackView也可以看做是一个UIView而被包含在UIStackView内,亦及嵌套使用。

    UIStackView的嵌套

    UIStackView 与 UICollectionView 的选取

    UIStackView 实现有对齐要求的视图布局非常非常得简单,而使用 UICollectionView 和 UITableView 来实现,相对而言就比较麻烦。
    相比于collectionView而言,stackView更加小巧灵活,然而想要完成更精致的效果,最终还是得使用UICollectionView。

    注意!

    Be careful to avoid introducing conflicts when adding constraints to views inside a stack view. As a general rule of thumb, if a view’s size defaults back to its intrinsic content size for a given dimension, you can safely add a constraint for that dimension.

    1. Distribution 分布方式的方向垂直于Axis。
    2. 有时可能排版较乱,除了设置属性来布局之外,我们还可以手动添加属性,且"手动添加的享有更高的优先级"。
    (Apple官方建议开发人员应优先采用StackView来设计用户界面,然后再根据实际需求来添加约束)
    

    后记

    The UIStackView is a nonrendering subclass of UIView; that is, it does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no effect on the stack view. Similarly, you cannot override layerClass, drawRect:, or drawLayer:inContext:.

    UIStackView不是万能的,但它可以在布局和自适应方面给开发者带来便利,在恰当的情形下使用StackView可以事半功倍。而且因为UIStackView是UIView的子类,所以也可以将动画效果作用于UIStackView上,在方便布局之余还能提高用户体验。

    隔桌安卓小伙伴不满了,这不就是LinearLayout吗?
    额 -_-!


    ThanksTo:

    [1] UIStackView Class Reference --
    https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/index.html#//apple_ref/occ/instp/UIStackView/distribution
    [2] UIStackView小窥 --
    http://www.devtalking.com/articles/uistackview/?utm_source=tuicool&utm_medium=referral
    [3] 简便的自动布局,对UIStackView的个人理解! --
    http://www.cnblogs.com/bokeyuanlibin/p/5693575.html


    // 纯代码的下次再总结

    相关文章

    • 【UIKit】UIStackView

      UIStackView UIStackView : UIViewiOS 9.0 基于 Flexbox 思想的布局方...

    • iOS9 新特新介绍

      一. UIStackView 新控件:UIStackView 栈视图, 类似AppleWatch的Group 父类...

    • StackView

      我的博客, 各位看官有时间赏光 UIStackView UIStackView介绍 随着autolayout的推广...

    • UIStackView的应用

      UIStackView的定义 UIStackView控件有两种,横向布局和纵向布局 Axis:设置UIStackV...

    • UIStackView 初探(译)

      UIStackView 用于在列或行中布局视图集合的线性接口。 UIStackView 概览 UIStackVie...

    • UIStackView的妙用

      UIStackView简介 UIStackView是iOS 9+支持的布局控件,主要用于线性布局,可以简化布局,减...

    • iOS9新特性UIStackView

      概述 UIStackView是iOS9中新增的API,类似于Android中的线性布局。UIStackView提供...

    • UIStackView简单理解和使用

      一、UIStackView简介 UIStackView是iOS9中新增的API,类似于Android中的线性布局。...

    • iOS UIStackView

      简介 UIStackView是iOS 9 的新增控件,唯一的作用就是帮助布局 本文会详细介绍UIStackView...

    • UIStackView学习笔记

      UIStackView UIStackView能够利用,创建能够动态适应设备方向、屏幕大小和可用空间中任何更改的用...

    网友评论

      本文标题:UIStackView

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