iOS UIStackView

源代码 2024-9-21 01:39:37 19 0 来自 中国
一、UIStackView简介

概念:
一个堆叠视图的容器,iOS9的新特性。
用途:StackView及其子视图会自顺应界面,淘汰我们设置束缚的工作量。
特点:
雷同ContainView,不会渲染到界面上。
StackView中的子视图只能朝一个方向举行排布,要么水平要么垂直。
StackView支持多层嵌套
束缚比StackView的自顺应优先级高,可以通过设置束缚来调整StackView的结构
支持属性动画
不能滚动
属性:
axis轴: -> 用来设置子视图的分列方式(H/V)
aligement: -> 用来设置子视图的对齐方式
distribution -> 用来设置子视图的分布方式(fill-添补)
spacing -> 子视图之间的间距
二、属性详解


  • axis
    主要设置UIStackView结构的方向:水平方向或垂直方向。
typedefNS_ENUM(NSInteger,UILayoutConstraintAxis) {    UILayoutConstraintAxisHorizontal    =0, //水平    UILayoutConstraintAxisVertical      =1  //垂直};

  • alignment
    主要设置非轴方向子视图的对齐方式。
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {    UIStackViewAlignmentFill,   // 子视图添补    UIStackViewAlignmentLeading,    // 子视图左对齐(axis为垂直方向而言)    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,  // 子视图顶部对齐(axis为水平方向而言)    UIStackViewAlignmentFirstBaseline,  // 按照第一个子视图的笔墨的第一行对齐,同时包管高度最大的子视图底部对齐(只在axis为水平方向有用)    UIStackViewAlignmentCenter, // 子视图居中对齐    UIStackViewAlignmentTrailing,   // 子视图右对齐(axis为垂直方向而言)    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,  // 子视图底部对齐(axis为水平方向而言)    UIStackViewAlignmentLastBaseline,   // 按照最后一个子视图的笔墨的最后一行对齐,同时包管高度最大的子视图顶部对齐(只在axis为水平方向有用)} API_AVAILABLE(ios(9.0));具体体现效果如下:
(图片查察原文)
fill
(图片查察原文)
top
(图片查察原文)
center
(图片查察原文)
bottom
(图片查察原文)
first base line
(图片查察原文)
last base line

  • distribution
    设置轴方向上子视图的分布比例(如果axis是水平方向,也即设置子视图的宽度,如果axis是垂直方向,则是设置子视图的高度)。
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {    UIStackViewDistributionFill = 0,    UIStackViewDistributionFillEqually,    UIStackViewDistributionFillProportionally,    UIStackViewDistributionEqualSpacing,    UIStackViewDistributionEqualCentering,} API_AVAILABLE(ios(9.0));下面以
axis = UILayoutConstraintAxisHorizontal,
alignment = UIStackViewAlignmentCenter
为例:
往UIStackView中添加三个UIView:
第一个UIView设为40100
第二个UIView设为80
80
第三个UIView设为120*60
通过实例来分析每个属性的区别:
(1)UIStackViewDistributionFill = 0,默认属性,轴方向上添补UIStackView。如果axis为水平方向,则全部子视图的宽度即是UIStackView的宽,以是如果只有一个子视图,则子视图的宽度就即是UIStackView的宽,如果有两个子视图,且优先级一样,则会拉伸或压缩某个子视图,使两个子视图的宽度之和即是UIStackView的宽……,如果axis是垂直方向,则全部子视图的高度即是UIStackView的高,必要时会拉伸或压缩某个子视图。
上面是在子视图优先级同等的情况下,如果子视图优先级差别等,则会按优先级从高到低设置子视图的位置,对优先级最低的子视图举行必要的拉伸或压缩。
设置distribution = UIStackViewDistributionFill后体现效果:
(图片查察原文)
UIStackViewDistributionFill
如图所示,由于三个子视图的宽度之和不敷UIStackView的宽度,优先级又同等,以是第三个子视图被拉伸了。固然,我们可以修改某个子视图的优先级来让其被拉伸。
(2)UIStackViewDistributionFillEqually,该属性设置后使全部子视图在轴方向上等宽或等高。即如果是水平方向,全部子视图都会被必要的拉伸或压缩,使得每个子视图的宽度同等,原来设置的子视图的宽度都会被忽略;如果是垂直方向,全部子视图的高度也会保持同等,如下所示:
(图片查察原文)
UIStackViewDistributionFillEqually
(3)UIStackViewDistributionFillProportionally 该属性设置后会根据原先子视图的比例来拉伸或压缩子视图的宽或高,如实例中三个子视图原先设置的宽度是1:2:3,以是水平方向上体现时,会按照这个比例举行拉伸,如下图所示,拉伸后的宽度依然是1:2:3。
(图片查察原文)
UIStackViewDistributionFillProportionally
(4)UIStackViewDistributionEqualSpacing 该属性会保持子视图的宽高,全部子视图中间的隔断保持同等。如下图所示,图中子视图的隔断(绿线所示的长度)都是同等的。
(图片查察原文)
UIStackViewDistributionEqualSpacing
(5)UIStackViewDistributionEqualCentering 该属性是控制全部子视图的中心之间的隔断保持同等,如下图所示,子视图中心点之间的隔断(绿线所示的长度)是同等的。
(图片查察原文)
UIStackViewDistributionEqualCentering

  • spacing
    该属性控制子视图之间的隔断巨细,在distribution前三个属性值设置的情况下,子视图之间是没有隔断,我们可以通过spacing属性显式的设置,如下图在distribution=UIStackViewDistributionFillEqually情况下,设置子视图隔断为10,子视图之间隔断都为10,且子视图依然等宽。
三、subView和arrangedSubView

对于Stack View的子控件添加和移除,我们是如许形貌的。
添加 --> (Stack View管理的subview)
addArrangedSubview:
insertArrangedSubview:atIndex: arrangedSubviews
数组是subviews属性的子集。
移除 --> (Stack View管理的subview)
removeArrangedSubview:–>移除是指移除Stack View内部子控件的束缚,并没有真正的把控件从父视图上移除。
removeFromSuperview–>从视图条理结构中删除,从父视图上删除
四、知识点小结

1、Axis体现Stack View的subview是水平排布还是垂直排布。
2、Alignment控制subview对齐方式。
3、Distribution界说subview的分布方式。
4、Spacing 为subview间的最小间距。
五、使用本领

**可以hidden指定子view,根据动态拉伸规则,机动使用组件。
比方:



————————————————
原文链接:https://blog.csdn.net/songzhuo1991/article/details/115626992
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 16:51, Processed in 0.141276 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表