Stack View自定义间隙减少约束的数量
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>引言</li><li>问题描述</li><li>Stacking Stacks</li><li>自定义间隙(iOS 11)</li><ul class="second_class_ul"><li>标准间隙和默认间隙</li></ul></ul></div><p class="maodian"></p><h2>引言</h2><p>Apple 在 iOS9 引入了 StackView，使用它可以减少约束的数量，让使用 AutoLayout 更加容易。但有一种边界使用场景是需要自定义视图之间的间隙。这种情况可以使用嵌套布局的方式来解决，但解决方案有些复杂。在 iOS 11 中给出了解决方案，你可以在 StackView 中自定义视图之间的间隙。</p>
<p class="maodian"></p><h2>问题描述</h2>
<p>这是我想创建的布局：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/1460000012900448.png" /></p>
<p>如图所示，共有5个 Label。最上面的大字 Label，中间三个标准 Label，以及最下面的小字 Label。中间三个 Label 的间隙是 8pt，最上面和最下面的两个 Label 的间隙是 32pt。</p>
<p>UIStackView 在相等距离垂直分配视图的情况下工作的很好。通过设置 StackView 的间隙属性，每个子视图的间隙是相等的。</p>
<p class="maodian"></p><h2>Stacking Stacks</h2>
<p>使用内嵌 StackView 的方式实现布局。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202308/1460000012900449.png" /></p>
<p>Inner StackView 包含三个 Label，8pt 的间隙，外部 StackView 有 32pt 的间隙。这看起来能工作，实则可能是引入了麻烦。比如我想 header 和 footer 的间隙不一样，这就很麻烦。</p>
<p class="maodian"></p><h2>自定义间隙(iOS 11)</h2>
<p>在 iOS 11中，给某个 stackView 中的元素自定义间隙成为可能。假设我们已经构建好一个 stackView：</p>
<div class="jb51code"><pre class="brush:cpp;">let stackView = UIStackView(arrangedSubviews: )
stackView.axis = .vertical
stackView.alignment = .fill
stackView.spacing = 8.0</pre></div>
<p>stackView 中的每个元素间隙是8pt。想要自定义header 标签和 footer 标签的间隙，可以直接调用 iOS11 的方法设置：</p>
<div class="jb51code"><pre class="brush:cpp;">// iOS 11 only
stackView.setCustomSpacing(32.0, after: headerLabel)
stackView.setCustomSpacing(32.0, after: bottomLabel</pre></div>
<p>说明：</p>
<ul><li>你可以指定某个 stackView 子元素之后的间隙，但是目前没有方法指定之前的间隙。</li><li>在 InterBuilder 中，你无法设置自定义间隙。只能在代码中完成。</li><li>当你 从 stackView 中移除元素，系统自动移除自定义间隙。</li></ul>
<p class="maodian"></p><h3>标准间隙和默认间隙</h3>
<p>UIStackView 在 iOS 11中增加了两个新属性，定义了系统间隙和默认间隙的值：</p>
<div class="jb51code"><pre class="brush:cpp;">class let spacingUseDefault: CGFloat
class let spacingUseSystem: CGFloat</pre></div>
<p>这两个属性的值是由系统保存和定义的，使用的时候不要直接保存他们的返回值。系统间隙似乎返回8pt，还是再强调一下，使用的时候应该直接访问这两个属性而不是保存他们的值。</p>
<p>你可以用这两个属性设置或者恢复自定义的间隙。</p>
<p>将系统间隙的值设置给最上面的 label：</p>
<div class="jb51code"><pre class="brush:cpp;">stackview.setCustomSpacing(UIStackView.spacingUseSystem, after: topLabel)</pre></div>
<p>恢复 stackView 元素的间隙（移除自定义的间隙）：</p>
<div class="jb51code"><pre class="brush:cpp;">stackview.setCustomSpacing(UIStackView.spacingUseDefault, after: topLabel)</pre></div>
<p>译者注：</p>
<p>在设置了 stackView 的 spacing 值为5，设置 customSpacing 的值为10，然后界面调整了，想把自定义间隙恢复为5，那么这时只能调用 setCustomSpacing 将值设置为 spacingUseDefault，如果设置为0，将干掉所有的间隙。这是我理解的 spacingUseDefault 使用场景。</p>
<p>翻译自：https://useyourloaf.com/blog/...</p>
<p>以上就是Stack View自定义间隙减少约束的数量的详细内容，更多关于Stack View自定义间隙的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>Objective-C的UIStackView常用属性函数学习笔记</li><li>iOS界面布局简化UIStackView使用详解</li><li>Android开发之StackView用法和遇到的坑分析</li><li>iOS9新特性之UIStackView</li><li>iOS App开发中的UIStackView堆叠视图使用教程</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]