iOS9 中UIStackView的使用

最新推荐文章于 2025-07-08 19:19:15 发布

zhou_aaa

最新推荐文章于 2025-07-08 19:19:15 发布

阅读量955

点赞数

分类专栏： iOS 文章标签： stackView

iOS 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍iOS9新增的UIStackView组件，包括其初始化方法、添加/移除子视图的方法、排列方式、分布样式及对齐方式等。通过示例代码展示了如何使用UIStackView进行界面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

UIStackView是iOS 9中新增的API，类似于Android中的线性布局。UIStackView相当于一个容器，根据向UIStackView中添加视图的顺序，UIStackView会自动给这些视图添加约束，让这些视图根据内容，垂直或水平排列。由于UIStackView会自动给它里面的子视图添加约束，所以我们不必再为那些子视图添加约束，我们只要给UIStackView设置一些属性与其子视图的压缩或者拉伸的优先级就可以简单的实现视图布局。
如果稍微复杂的界面可以嵌套使用UIStackView，可以向UIStackView中添加UIStackView，本质上都是继承UIView。

UIStackView介绍

介绍UIStackView中主要的API。图片来自于苹果官方文档

初始化

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">- (instancetype)initWithArrangedSubviews:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span><__kindof <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *> *)views;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化方法传入需要用UIStackView管理的存放子视图的数组,并按照数组中的顺序添加这些子视图。</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

添加/移除子视图

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)addArrangedSubview:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)view;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//添加view到UIStackView对象上并且让UIStackView管理这个view布局</span>

- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)removeArrangedSubview:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)view;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//取消UIStackView的管理，但是这个view不从UIStackView上移除</span>

- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)insertArrangedSubview:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> *)view atIndex:(NSUInteger)stackIndex;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//UIStackView管理存放子视图的数组，按照顺序来布局，这个方法是向这个数组里指定位置添加view</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

UIStackView排列方式

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typedef</span> NS_ENUM(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//子视图水平排列</span>
    UILayoutConstraintAxisVertical = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//子视图垂直排列</span>
};
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span>) UILayoutConstraintAxis axis;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这个属性是用来设置UIStackView中子视图的排列方式</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

子视图分布样式

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typedef</span> NS_ENUM(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>, UIStackViewDistribution) {
    UIStackViewDistributionFill = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    UIStackViewDistributionFillEqually,
    UIStackViewDistributionFillProportionally,
    UIStackViewDistributionEqualSpacing,
    UIStackViewDistributionEqualCentering,
} NS_ENUM_AVAILABLE_IOS(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9</span>_0);

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span>) UIStackViewDistribution distribution;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//UIStackView中子视图的分布样式</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

UIStackViewDistributionFill
根据UIStackView的排列方式，用子视图铺满填充指定的方向，如果指定的UIStackView是垂直排列那么UIStackView中的子视图将填充满UIStackView的高度。如果指定的UIStackView是水平排列那么UIStackView中的子视图将填充满UIStackView的宽度。下图就是填充UIStackView的宽度示例。由于每个视图是由UIStackView自动添加约束的，要进行铺满操作就对视图进行拉伸，指定某个视图拉伸，可以更改其压缩或者拉伸的优先级实现。

UIStackViewDistributionFillEqually
UIStackViewDistributionFillEqually保证铺满后如果是垂直排列所有的子视图高度相等，如果是水平排列所有的子视图宽度相等。

UIStackViewDistributionFillProportionally
根据每个子视图里面内容的尺寸来进行填充操作

UIStackViewDistributionEqualSpacing
排列视图，保证每个子视图之间的间距相等

UIStackViewDistributionEqualCentering
排列视图，保证每个子视图中心直接的间距相等

子视图对齐方式

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typedef</span> NS_ENUM(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>, UIStackViewAlignment) {
    UIStackViewAlignmentFill,
    UIStackViewAlignmentLeading,
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
    UIStackViewAlignmentFirstBaseline,
    UIStackViewAlignmentCenter,
    UIStackViewAlignmentTrailing,
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
    UIStackViewAlignmentLastBaseline, 
} NS_ENUM_AVAILABLE_IOS(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9</span>_0);
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span>) UIStackViewAlignment alignment;
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置`UIStackView`中子视图对齐的方式</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

UIStackViewAlignmentFill
UIStackView是垂直排列那么子视图的水平方向的左右边界与UIStackView上下边界对齐，如果是水平排列那么子视图的垂直方向的上下边界与UIStackView上下边界对齐。

UIStackViewAlignmentLeading
UIStackView是垂直排列时此值有效，让所有的子视图靠UIStackView左边界对齐。

UIStackViewAlignmentTop
UIStackView是水平排列时此值有效，让所有的子视图靠UIStackView上边界对齐。

UIStackViewAlignmentFirstBaseline
UIStackView是水平排列时此值有效，所有的子视图以每个视图中的第一行基准线对齐。

UIStackViewAlignmentCenter
所有的子视图中心与UIStackView的中心基准线对齐，如果UIStackView是水平排列那么所有子视图高度的中点与UIStackView高度中点对齐，如果如果UIStackView是垂直排列那么所有子视图宽度的中点与UIStackView宽度中点对齐。

UIStackViewAlignmentTrailing
UIStackView是垂直排列时此值有效，让所有的子视图靠UIStackView右边界对齐。

UIStackViewAlignmentBottom
UIStackView是水平排列时此值有效，让所有的子视图靠UIStackView下边界对齐。

UIStackViewAlignmentLastBaseline
UIStackView是水平排列时此值有效，所有的子视图以每个视图中的最后一行基准线对齐。

子视图之间的间距

@property(nonatomic) CGFloat spacing//每个子视图之间的间距，在某些布局的情况下spacing将作为最小的间距。

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;"></span></code><h2 id="uistackview使用" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; color: rgb(85, 85, 85); font-family: 'microsoft yahei'; line-height: 35px;">UIStackView使用</h2><p style="margin-top: 0px; margin-bottom: 1.1em; padding-top: 0px; padding-bottom: 0px; box-sizing: border-box; color: rgb(85, 85, 85); font-family: 'microsoft yahei'; font-size: 16px; line-height: 35px;"><span style="box-sizing: border-box;">代码示例</span></p><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; font-size: 16px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; position: relative; overflow-y: hidden; overflow-x: auto; background-color: rgba(128, 128, 128, 0.0470588);"><code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad {
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> viewDidLoad];
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *label1 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc] init];
    label1<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"label1"</span>;
    label1<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    label1<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> orangeColor];
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *label2 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc] init];
    label2<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"label2"</span>;
    label2<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    label2<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> grayColor];
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *label3 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc] init];
    label3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"this is label3"</span>;
    label3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    label3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> brownColor];
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 初始化三个Label</span>

    UIStackView *_stackView = [[UIStackView alloc] initWithArrangedSubviews:@[label1,label2,label3]];
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.axis</span> = UILayoutConstraintAxisHorizontal;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//_stackView中的子视图水平排列</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.distribution</span> = UIStackViewDistributionFillProportionally;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//按照内容填充水平方向_stackView的宽度。</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.alignment</span> = UIStackViewAlignmentCenter;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//所有的子视图高度的中点与_stackView的高度中点对齐</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.spacing</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//子视图之间的间距为5</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.height</span>);
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addSubview:_stackView];
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Do any additional setup after loading the view, typically from a nib.</span>
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul>

示例效果

如果更改UIStackView对象的某些属性

<code class="language-objective-c hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad {
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> viewDidLoad];
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *label1 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc] init];
    label1<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"label1"</span>;
    label1<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    label1<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> orangeColor];
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *label2 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc] init];
    label2<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"label2"</span>;
    label2<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    label2<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> grayColor];

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *label3 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc] init];
    label3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"this is label3"</span>;
    label3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    label3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> brownColor];
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 初始化三个Label</span>

    UIStackView *_stackView = [[UIStackView alloc] initWithArrangedSubviews:@[label1,label2,label3]];
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.axis</span> = UILayoutConstraintAxisHorizontal;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//_stackView中的子视图水平排列</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.distribution</span> = UIStackViewDistributionFill;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//让所有子视图填充满UIStackView的宽度</span>
    [label2 setContentHuggingPriority:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span> forAxis:UILayoutConstraintAxisHorizontal];
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置label2的拉伸优先级priority值越低优先级越高，所以_stackView会优先拉伸label2。</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.alignment</span> = UIStackViewAlignmentFill;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//让子视图的上下边界与_stackView上下边界对齐</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.spacing</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//子视图之间的间距为5</span>
    _stackView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.height</span>);
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addSubview:_stackView];
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li></ul>

示例效果