UIStackView学习分享, 纯代码实现

最近看叶孤城的书,里面提到了UIStackView,说起这种布局,也是很早就知道了,但是一直没有研究过,开发中也没有使用过,周末上网翻看一下了大家的文章,发现大多都是Storyboard讲解的,实际上使用代码或者Storyboard对于UIStackView区别不大,因为UIStackView本身的属性就很少,由于本人开发中从不使用Storyboard或者xib, 本篇demo就用纯代码完成吧, 关键是网上的一些布局给的示例也不是特别清楚,由于开发中也没有实际用过,本文内容仅限交流学习, 大家交流指正。

一,UIStackView是什么?
在iOS9中苹果在UIKit框架中引入了一个新的视图类UIStackView。UIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合。Stack视图管理着所有在它的 arrangedSubviews 属性中的视图的布局。这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 Stack 视图的轴向排列。
简而言之,即UIStackView,就是一个ContainerView,可以沿横向或纵向按照一定的规则布局内部的子View。
为了避免太过无聊, 先放出demo中实现的一个效果, demo地址

效果

二,一个快速示例

下面用一个很简单的示例快速演示一下,

122162015-bf7cfce0ed059cd9

示例1

想一下要布局上图中的View,如果用Frame,或者autolayout的过程,都是比较复杂,masonry中有一种相对简单的方式, 可以看这篇文章masonry-等间距布局,以上方式都不演示了, 没什么可说的。

如果使用UIStackView, 如下为实现代码:

以上就是所有代码, 是不是看起来异常简单, 前面说过了StackView其实就是一个容器View,可以管理内部子控件的布局, 那么看一下代码, init不用说了, for循环创建子控件不用说了(addArrangedSubview:view见下文), addSubViews也不用说, 那么久只剩下了四行代码, 这四个也就是UIStackView全部四个属性

三,具体讲解StackView的属性

132162015-867a3d8a451408af

stackView属性示例图

1, axis:子控件的布局方向,水平或垂直, 这个不用过多解释了
2, spacing:子控件之间的最小间距,之所以说是最小间距,因为stackView会根据一定的规则对内部空间布局,有的时候不能满足所有要求,比如stackView 本身宽度100,内部两个控件,宽度都为50,50+50+10就超过了本身宽度, 这时会压缩其中一个子控件的宽度来满足最小间距。
3, distribution:子控件依据何种规则布局, 这个比较抽象, 看示例理解的快一点,以下示例均使用UILabel演示, 原因见插播

UIStackViewDistribution是个枚举值, 各个值如下, 配有示例图, 看不懂就只能自求多福了:
UIStackViewDistributionFill :它就是将 arrangedSubviews 填充满整个 StackView ,如果设置了spacing,那么这些 arrangedSubviews 之间的间距就是spacing。如果减去所有的spacing,所有的 arrangedSubview 的固有尺寸( intrinsicContentSize )不能填满或者超出 StackView 的尺寸,那就会按照 Hugging 或者 CompressionResistance 的优先级来拉伸或压缩一些 arrangedSubview 。如果出现优先级相同的情况,就按排列顺序来拉伸或压缩。

142162015-f0332ec92994258c 152162015-a683d83d35eca222 162162015-a55b68ac81f0f61c

UIStackViewDistributionFillEqually :这种就是 StackView 的尺寸减去所有的spacing之后均分给 arrangedSubviews ,每个 arrangedSubview 的尺寸是相同的。

172162015-f74ae829aef8fdfc 182162015-f7697aa83d5d7553 192162015-72d785d1ea2c6ef8

UIStackViewDistributionFillProportionally :这种跟FillEqually差不多,只不过这个不是讲尺寸均分给 arrangedSubviews ,而是根据 arrangedSubviews 的 intrinsicContentSize 按比例分配。

202162015-0e41410efa42f89a 212162015-b8f29a65427e1edd 222162015-6f81f0b1fb5f29cd

UIStackViewDistributionEqualSpacing :这种是使 arrangedSubview 之间的spacing相等,但是这个spacing是有可能大于 StackView 所设置的spacing,但是绝对不会小于。这个类型的布局可以这样理解,先按所有的 arrangedSubview 的 intrinsicContentSize 布局,然后余下的空间均分为spacing,如果大约 StackView 设置的spacing那这样就OK了,如果小于就按照 StackView 设置的spacing,然后按照 CompressionResistance 的优先级来压缩一个 arrangedSubview 。

232162015-0659394deb98836a 242162015-ddd55b0b087b5336 252162015-83f99792c7d9bd86

UIStackViewDistributionEqualCentering :这种是使 arrangedSubview 的中心点之间的距离相等,这样没两个 arrangedSubview 之间的spacing就有可能不是相等的,但是这个spacing仍然是大于等于 StackView 设置的spacing的,不会是小于。这个类型布局仍然是如果 StackView 有多余的空间会均分给 arrangedSubviews 之间的spacing,如果空间不够那就按照 CompressionResistance 的优先级压缩 arrangedSubview 。

262162015-a44f19fbe6b689ff 272162015-942dc156a0c5ceed 282162015-84961019e3232c07 292162015-876b38e839e8c237

4,alignment 子控件对其方式,类似UIlabel的textAlignment, 可以做一个类比, UILabel对应UIStackView, label的内容对应StackView的子控件。

UIStackViewDistribution是个枚举值, 各个值如下:

UIStackViewAlignmentFill, 默认方式, 如果子控件水平布局, 则指子控件的垂直方向填充满stackView. 反之亦然

UIStackViewAlignmentLeading, 如果子控件竖直布局, 则指子控件左边对齐stackView左边. 反之亦然, 即 UIStackViewAlignmentTop = UIStackViewAlignmentLeading。

302162015-247600ca1e6f6093

UIStackViewAlignmentTop = UIStackViewAlignmentLeading,

UIStackViewAlignmentFirstBaseline, 根据上方基线布局所有子视图的y值(适用于Horizontal模式), 这种模式没搞懂, 有知道怎么回事的求教了

312162015-b1e5e6ca8c226b69 322162015-7241e9271db0527e

UIStackViewAlignmentLastBaseline, 根据下方基线布局所有子视图的y值(适用于Horizontal模式)

UIStackViewAlignmentCenter, 中心对齐

UIStackViewAlignmentTrailing, 如果子控件竖直布局, 则指子控件左边对齐stackView右边. 反之亦然, 即UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing

UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,

四, 另一个有意思一点的示例, 同时演示stackView的嵌套

332162015-ddc1a976853b5e42

即文章开头放出的动态图,
这个效果使用了两个StackView, 一个horizontalView, 一个verticalView,horizontalView即示例下方水平排布的View, 这个horizontalView也添加到verticalView的arrangedSubviews数组中, 具体实现看代码吧, 不多说了
github地址 : UIStackVIewDemo

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部