王彦国 發表於 2022-9-7 11:40:53

iOS界面布局简化UIStackView使用详解

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>前言</li><li>UIStackView布局思想</li><ul class="second_class_ul"><li>distribution：</li><li>alignment：</li></ul><li>UIStackView用法</li><ul class="second_class_ul"><li>初始化</li><li>添加、删除子视图</li><li>排列方向</li><li>布局方式</li><li>对齐方式</li><li>间距</li></ul></ul></div><p class="maodian"></p><h2>前言</h2>
<p>在过去<code>iOS</code>页面布局较为传统，大多数人使用<code>Frame</code>或者<code>AutoLayout</code>来布局，在<code>iOS9</code>以后，引入了<code>UIStackView</code>。<code>UIStackView</code>是用于线性布局的控件，可以自动管理子视图布局，自动填充。它借鉴了前端的布局算法<code>Flexbox</code>，可以简便地实现各种页面布局。</p>
<p><code>UIStackView</code>虽然已经不是新控件了，但还是有很多同学并没有使用起来。通常有时改别人的代码看到乱糟糟的布局代码就有很多槽点。所以这也是写这篇文章的目的所在，真的推荐大家使用StackView。事半功倍，省下来的时间摸鱼不香嘛。</p>
<p>回归正题，不管是使用<code>Frame</code>或者<code>AutoLayout</code>来布局，我们都需要对所有的控件的位置、大小进行设置，<code>Frame</code>需要指定位置布局，<code>AutoLayout</code>需要指定约束布局；</p>
<p>而<code>UIStackView</code>布局方式凸显它的优势在于不需要设置排列视图（即子视图）的位置，大小（不是必须的），而是通过自身的排列、分布方式自动完成布局。</p>
<p>对比起来，使用<code>UIStackView</code>更高效，我们可以通过嵌套<code>UIStackView</code>快速完成各式各样的布局。</p>
<p class="maodian"></p><h2>UIStackView布局思想</h2>
<p><code>UIStackView</code>的初衷就是为了简化的界面布局，适用于列或行中布局视图集合。</p>
<p><code>StackView</code>使用自动布局(<code>AutoLayout</code>)来定位和设置其排列视图的大小。<code>StackView</code>将第一个和最后一个排列的视图与其沿堆栈轴的边缘对齐。<strong>在水平堆栈中</strong>，这意味着第一个排列视图的前缘被固定在<code>StackView</code>的前缘上，而最后一个排列视图的后缘被固定在<code>StackView</code>的后缘上；<strong>在垂直堆栈中</strong>，顶部和底部边缘分别固定在堆栈的顶部和底部边缘上。</p>
<p><code>StackView</code>会根据自身的布局规则进行填充排列视图。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220907090707031.jpg" /></p>
<p class="maodian"></p><h3>distribution：</h3>
<p><code>distribution</code> 即排列方式：</p>
<ul><li><code>fill</code>根据抗拉伸、压缩优先级填充（默认拉伸第一个排列视图）</li><li><code>fillEqually</code>在排列方向上的填充大小相同（即横向布局宽度相同，纵向布局高度相同）</li><li><code>fillProportionally</code>根据排列视图的大小按比例填充</li><li><code>equalSpacing</code>均匀地填充视图之间的间距</li><li><code>equalCentering</code>根据排列视图中心点之间的相同间隔填充</li></ul>
<p class="maodian"></p><h3>alignment：</h3>
<p><code>alignment</code>即对齐方式：(<strong>垂直于排列方向</strong>)</p>
<ul><li><code>fill</code>填充排列视图到<code>StackView</code>的可用空间</li><li><code>top</code>以<code>StackView</code>的顶部排列（与之相似的是<code>leading</code>）</li><li><code>bottom</code>以<code>StackView</code>的尾部排列（与之相似的是<code>trailing</code>）</li><li><code>center</code>以<code>StackView</code>的中间排列</li><li><code>firstBaseline</code>以第一个基准线排列</li><li><code>lastBaseline</code>以最后一个的基准线排列</li></ul>
<p>如需设置排列视图之间的间距可以通过设置<code>space</code>属性，若是排列视图之间的间距不同，可以使用方法指定某个排列视图的间距（此方法iOS11以上使用），或者使用一个无用的view插入在视图之间替代间隙，此view仅作为间距使用（使用<code>xib</code>、<code>Storyboard</code>会经常使用此类方法，可以参照）。</p>
<p>当你真的了解UIStackView的这些布局思想之后，你就会知道它能帮你解决很多繁琐的布局。（如一个多变的底部操作栏、一行大小各异的控件等等）</p>
<p>从上面的布局思想中，不难看出，其实我们仅需要确定<code>StackView</code>的排列方向，以及排列方式、对其方式，就能大体上对整个排列视图初步的布局，而后在根据不同的视图进行大小上的调整以及间距的调整即可。</p>
<p>使用<code>UIStackView</code>来自动布局子视图，你只需要每个子视图关注自身的大小即可。</p>
<p>以此类操作栏为例，举个栗子🌰：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220907090707032.jpg" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220907090707033.jpg" /></p>
<p>先说说我们常用的布局方式，可能还是会有一部分人会选择<code>Frame</code>布局，或者<code>AutoLayout</code>布局。</p>
<p>但此类UI在设计之初，通常会有很多状态、特征，每一种状态下，控件都会变化。</p>
<p>那么<code>Frame</code>布局在这种布局容易变化的情况下，就显得有非常的繁琐，布局代码非常的多，并且状态很多的时候不好维护。 同样<code>AutoLayout</code>也是如此，需要写很多的更新布局约束。</p>
<p>这个时候，借用<code>UIStackView</code>的思想，我们可以很简单的实现这个布局。每个控件只关注自身大小，不会对其他的空间产生依赖关系，在需要时显示出来，不需要时隐藏起来。</p>
<p>我们先以文本输入入口&ldquo;<strong>说点什么</strong>&rdquo;小试牛刀。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220907090707034.jpg" /></p>
<p>下面就是用StackView布局的效果。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/20220907090707035.jpg" /></p>
<p>这里我是使用的xib结合StackView。如果我们平时使用的代码布局，也可以使用代码结合StackView布局，这样也会减少很多代码量，可以自行脑补。</p>
<p class="maodian"></p><h2>UIStackView用法</h2>
<p class="maodian"></p><h3>初始化</h3>
<p>与其他控件一样的初始化方式；</p>
<div class="jb51code"><pre class="brush:cpp;">- (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;
- (instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;
</pre></div>
<p>当然也可以选择专属的初始化方式；</p>
<div class="jb51code"><pre class="brush:cpp;">- (instancetype)initWithArrangedSubviews:(NSArray&lt;__kindof UIView *&gt; *)views;
</pre></div>
<p class="maodian"></p><h3>添加、删除子视图</h3>
<div class="jb51code"><pre class="brush:cpp;">- (void)addArrangedSubview:(UIView *)view;
- (void)removeArrangedSubview:(UIView *)view;
</pre></div>
<p class="maodian"></p><h3>排列方向</h3>
<div class="jb51code"><pre class="brush:cpp;">@property(nonatomic) UILayoutConstraintAxis axis;
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0, // 水平方向
    UILayoutConstraintAxisVertical = 1    // 垂直方向
};
</pre></div>
<p class="maodian"></p><h3>布局方式</h3>
<div class="jb51code"><pre class="brush:cpp;">@property(nonatomic) UIStackViewDistribution distribution;
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    UIStackViewDistributionFill = 0, //子视图填充满指定方向，优先拉伸第一个控件
    UIStackViewDistributionFillEqually, //每个子视图填充大小相等，
    UIStackViewDistributionFillProportionally, //根据每个子视图里面内容的尺寸来进行填充操作
    UIStackViewDistributionEqualSpacing, //每个子视图之间的间距相等
    UIStackViewDistributionEqualCentering, //每个子视图中心直接的间距相等
} API_AVAILABLE(ios(9.0));
</pre></div>
<p class="maodian"></p><h3>对齐方式</h3>
<div class="jb51code"><pre class="brush:cpp;">@property(nonatomic) UIStackViewAlignment alignment;
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
    UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下边距 相等   垂直: subView的左右边距和 StackView的所有相等
    UIStackViewAlignmentLeading,//垂直有效 ：左对齐
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading, // 水平有效 上对齐
    UIStackViewAlignmentFirstBaseline,//水平有效，第一行基准线对齐。
    UIStackViewAlignmentCenter, //中心基准线对齐 1.水平 高度中点对齐 2.垂直：宽度中点对齐
    UIStackViewAlignmentTrailing,//垂直有效，右边界对齐。
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,// 水平有效 ，下边界对齐。
    UIStackViewAlignmentLastBaseline,//水平有效，最后一行基准线对齐。
} API_AVAILABLE(9_0);
</pre></div>
<p class="maodian"></p><h3>间距</h3>
<div class="jb51code"><pre class="brush:cpp;">@property(nonatomic) NSInteger space; //排列视图相邻边缘之间的距离。</pre></div>
<p>以上就是iOS界面布局简化UIStackView使用详解的详细内容，更多关于iOS UIStackView布局简化的资料请关注琼殿技术社区其它相关文章！</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>iOS布局渲染之UIView方法的调用时机详解</li><li>详解iOS自定义UITabBar与布局</li><li>iOS ScrollView实现自动布局的方法（适用Swift 3.0 ）</li><li>深入理解IOS控件布局之Masonry布局框架</li><li>IOS xib布局小技巧-边框设置</li><li>iOS开发Masonry与Frame布局差异示例详解</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: iOS界面布局简化UIStackView使用详解