相关文章推荐
酒量小的椰子  ·  Attributes - C# ...·  1 年前    · 
成熟的西装  ·  78 C++ - ...·  3 年前    · 
任性的滑板  ·  System.Web.UI ...·  3 年前    · 
英俊的鞭炮  ·  extractLBPFeatures_duk ...·  3 年前    · 

UIStackView

UIStackView 是基于自动布局 AutoLayout ,创建可以动态适应设备方向、屏幕尺寸和可用空间的任何变化的用户界面。 UIStackView 管理其 ArrangedSubview 属性中所有视图的布局。这些视图根据它们在数组中的顺序沿堆栈视图的轴排列。由 axis, distribution, alignment, spacing 等属性改变。

有点类似前端的 flex 布局, Apple 从很早就引入了,但是实际使用的人太少了🤔,接下来的文章将引用部分 Apple 官方文档介绍

  • 只需要定义 UIStackView 的位置 position size 是可选的。

  • 当没有设置 size 的时候,会根据它的内容的大小来调整自己的大小,即子视图各个控件的大小决定了 UIStackView 的大小

  • UIStackView 的布局受到本身 frame 或者 AutoLayout 的影响,包括子组件的 AutoLayout 的影响

  • 设置子组件大小只能使用 Auto Layout ,为 UIStackView 设置大小位置可以采用 Frame、Auto Layout

  • 需要设置 axis, distribution, alignment, spacing 属性,并通过 addArrangedSubview 添加子组件

固定一个位置和大小的 UIStackView ,添加三个等大且间隔为10的子组件

    // UIStackView
    UIStackView *stackView = [[UIStackView alloc] init];
    stackView.backgroundColor = UIColor.redColor;
    stackView.frame = CGRectMake(0, 100, 390, 100);
    stackView.spacing = 10;
    stackView.axis = UILayoutConstraintAxisHorizontal;
    // 水平方向
    stackView.distribution = UIStackViewDistributionFillEqually;
    // 垂直方向
    stackView.alignment = UIStackViewAlignmentFill;
    [self.view addSubview:stackView];
    // 添加子组件
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = UIColor.grayColor;
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = UIColor.yellowColor;
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = UIColor.blueColor;
    // 必须使用的特殊添加方式
    [stackView addArrangedSubview:view1];
    [stackView addArrangedSubview:view2];
    [stackView addArrangedSubview:view3];
  • Axis:设置内部子组件堆叠方式,水平/垂直方向
  • Alignment:与axis方向相反的方向的布局规则,Axis会影响其设置方向
  • distribution:与axis方向相同的方向的布局规则,Axis会影响其设置方向
  • spacing:设置默认间隔,UIStackViewDistributionEqualSpacing/UIStackViewDistributionEqualCentering情况下,spacing为最小间距

Alignment属性具体介绍

下面默认举例采用Axis是水平,则Alignment代表的是垂直方向的布局规则,Axis是垂直则相反

  • UIStackViewAlignmentFill:默认方式,垂直方向填充满UIStackView
  • UIStackViewAlignmentCenter:垂直方向居中对齐
    在这里插入图片描述

  • UIStackViewAlignmentTop / UIStackViewAlignmentLeading :垂直方向顶部对齐
    在这里插入图片描述

  • UIStackViewAlignmentBottom / UIStackViewAlignmentTrailing :垂直方向底部对齐
    在这里插入图片描述

  • UIStackViewAlignmentFirstBaseline:垂直方向对齐第一个子组件的头部
    在这里插入图片描述

  • UIStackViewAlignmentLastBaseline:垂直方向对齐最后一个子组件的尾部
    在这里插入图片描述

distribution属性具体介绍

下面默认举例采用Axis是水平,则distribution代表的是水平方向的布局规则,Axis是垂直则相反吗,space代表的是实际间隔,spaceing代表的是设置的间隔

UIStackViewDistributionFill:子组件填充满整个UIStackViewspace=spaceing

  • 使用方法:UIStackView只需要确定AutoLayout位置,为子组件添加AutoLayout的大小,用来确定UIStackView的大小

UIStackViewDistributionFillEqually:每个子组件宽度相等且填充满整个UIStackView,sapce=spaceing

  • 使用方法1:UIStackView只需要确定AutoLayout位置,为一个子组件添加AutoLayout的大小,用来确定UIStackView的大小
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,默认为子组件生成相等大小

在这里插入图片描述
UIStackViewDistributionFillProportionally:根据space和每个组件的Size分配每个子组件的宽度,最终也是填充满整个UIStackView

  • 使用方法1:UIStackView只需要确定AutoLayout位置,为每个子组件添加AutoLayout的大小,用来确定UIStackView的大小
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,为每个子组件添加AutoLayout的大小,最终根据算法确定每个子组件的比例,(好坑😓,效果难以达到预期的,或许有更高级的用法❓欢迎👏留言讨论)
    在这里插入图片描述
    UIStackViewDistributionEqualSpacing:根据每个组件的Size分配每个子组件的宽度,达到间隔相等的情况,🌟特殊在通过拉伸space,存在实际space>=spacing的情况
  • 使用方法1:UIStackView只需要确定AutoLayout位置,为每个子组件添加AutoLayout的大小,用来确定UIStackView的大小,space=spacing
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,为每个子组件添加AutoLayout的大小,最终根据算法确定每个子组件的比例,空间充足则拉伸space,space>=spacing,空间不足则缩小子组件的Size
    在这里插入图片描述

UIStackViewDistributionEqualCentering: 子组件中心点之间的距离相等,🌟特殊在通过拉伸space,存在实际space>=spacing的情况

  • 使用方法1:UIStackView只需要确定AutoLayout位置,为每个子组件添加AutoLayout的大小,用来确定UIStackView的大小,通过拉伸space来达到子组件中心点之间的距离相等,space>=spacing
  • 使用方法2:UIStackView需要确定AutoLayout位置和大小,为每个子组件添加AutoLayout的大小,通过拉伸spaceSize来达到子组件中心点之间的距离相等,space>=spacing

总结:根据实际情况去选择合适的distributionAlignment属性,为子组件添加合适的Auto Layout,为UIStackView添加合适的Auto Layout 可以达成任何你想要的动态效果

Apple Developer
iOS - UIStackView的使用
UIStackView 入坑指南

UIStackViewiOS9之后推出的,我也是第一次接触,在学习的过程中对于其中的相关属性,尤其是对其中的distribution几个属性值,一知半解的,所以特写此文通过代码实例理解它们每个属性的区别。 UIStackView主要包括了四大属性:axis、alignment、distribution、spacing。 一、axis 主要设置UIStackView布局的方向:水平方向或垂直方向。 typedefNS_ENUM(NSInteger,UILayoutConstraintAxis) {UILay
iOS9中苹果在UIKit框架中引入了一个新的视图类UIStackViewUIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合。UIStackView视图管理着所有在它的arrangedSubviews 属性中的视图的布局。这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 stackView视图的轴
17、UIStackView的用法1、基本介绍1.1 什么是StackView1.2 UIStackView的属性Axis: 子视图的布局方向Alignment: 子视图的对齐方式Distribution:子视图的分布比例(大小)Spacing:子试视图间的间距1.3 UIStackView相关方法1、UIStackView的方法 1、基本介绍 1.1 什么是StackView UIStackView 是 UIView 的子类,它不能用来呈现自身的内容,而是用来约束子控件的一个控件。 UIStackVie
项目中横向一排元素,竖向一排元素,可以使用UIStackViewUIStackView的原理不做介绍,这里主要讲两个初次使用容易出现的两个问题。首先创建一个stackview 向stackview中添加view 默认情况下,stackview中的元素是填满整个stackview的(fill),属性是distribution。其他的axis,alignment比较好理解。从结果上看,如果使用frame,stackview会依赖元素自身大小布局,比如皇冠的icon frame是20*14.5。但是皇
class ViewController: UIViewController{ //创建一个UIStackView类型的变量 var stackView:UIStackView! override func viewDidLoad() { super.viewDidLoad() //创建三个View视图
原文链接 : UIStackView Tutorial: Introducing Stack Views 原文作者 : Jawwad Ahmad 译文出自 : 开发技术前线 www.devtf.cn 译者 : kmyhy Ray注:恭喜你!为了推广《iOS 9 Feast》一书,这本书的第一部分教程已经为你解锁了。本文来自于《iOS 9 Tutorials》中的一个章
iOS9 提供的 UIStackView 简化了布局操作,它有些像 Android 中的 liner layout。以前不用 UIStackView 也是可以做出类似的效果的,不过要添加许多的约束,看得头都大了,使用了 UIStackView 后,约束得到了简化。 UIStackView 中主要有 axis、alignment、distribution、spacing 四个属性,不太好理解的就是 d