「ゴールデン ストーン プロジェクトの最初のチャレンジに参加するためにサインアップしました。100,000 の賞金プールを共有するためです。これは私の 3 回目の記事です。イベントの詳細を表示するには、クリックしてください」
序文
最初の 2 つの記事では、UIStackView のレイアウトのアイデア、使用方法、およびいくつかの実用的なケースについて説明しました. この場合、UIStackView と組み合わせた xib の使用は、純粋なコードに対するいくつかの補足を欠いています. この記事では、主に使用方法について説明します.純粋なコードを書くための StackView.レイアウト。
StackView の良さについてはいろいろ言いましたが、いまだに複雑なページは役に立たないと思っている人が多く、実際、単純なレイアウトか複雑なレイアウトか、または、 UI の構築に使用Inferface Builderする場合でも、純粋なコードを使用する場合でも、簡単に行うことができます。
以下では、swift を使用して、純粋なコードを使用してレイアウトを行う方法を示します。興味がある場合は、クリックしてデモをダウンロードし、効果を確認してください。以下に示すコードは、レイアウトの単なるスクリーンショットです。
シンプルなレイアウト
シンプルなレイアウトです。要素の行または列として要約します。通常、設定ページやアドレス帳などのクラスページがあります。次のレイアウトでは、hStack にイメージ、ラベル、およびボタンが含まれており、単純なレイアウトを形成しています。
構造は次のとおりです。
HStack: 画像 + ラベル + ボタン
/// 懒加载
private lazy var vStack = VStack(spacing: 16)
复制代码注: これは
VStack実際には UIStackView のカプセル化と、SwiftUImediumではなく移植可能な初期化の追加ですVStack。
/// 布局代码
addSubview(hStack)
hStack.snp.makeConstraints { make in
make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16))
}
/// 这里是使用的扩展方法
iconView.sizeConstraint = CGSize(width: 40, height: 40)
title.heightConstraint = 30
follow.sizeConstraint = CGSize(width: 60, height: 30)
hStack.addArrangedSubviewsMakeConstraint([iconView, title, hStack.spacer(), follow])
复制代码注：
sizeConstraint、heightConstraint、widthConstraint、addArrangedSubviewsMakeConstraint、spacer()これらはすべて自分で分類を追加する方法です。
ネストされたレイアウト
ネストされたレイアウト、要約すると、インターフェイスの要素が多様化し、2 つ以上の StackView レイアウト (配置方向が異なる) を使用する必要があります。
结构如下：
HStack：image + VStack + Button
VStack：label + label
/// 懒加载
private lazy var hStack = HStack(spacing: 8, alignment: .center, distribution: .fill)
private lazy var vStack = VStack(spacing: 4, alignment: .fill, distribution: .fill)
复制代码Note：
swift可以写出比OC更多的语法糖，这是语法的特性所在。从初始化方法上就可以看出。
addSubview(hStack)
hStack.snp.makeConstraints { make in
make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16))
}
iconView.sizeConstraint = CGSize(width: 50, height: 50)
helpView.sizeConstraint = CGSize(width: 30, height: 30)
hStack.addArrangedSubviewsMakeConstraint([iconView, vStack, hStack.spacer(), helpView])
vStack.addArrangedSubviews([title,
detail])
复制代码动态更新布局
动态更新布局，我归纳为，界面的元素多样化，一些界面上的元素会有种状态，继而影响到其他的元素，最终会影响到整体的布局。
结构如下：
HStack：image + VStack + Button
VStack：HStack + label
HStack：label + label
其实整体的布局，与上面的例子中仅仅只有细微的差别，这里想要体现的是，修改stackView的属性以及修改stackView中的排列视图的width、height或者hidden相关的属性，都会使stackView重新布局。
private lazy var hStack = HStack(spacing: 8, alignment: .center, distribution: .fill)
private lazy var vStack = VStack(spacing: 4, alignment: .fill, distribution: .fill)
private lazy var titleHStack = HStack(spacing: 4, alignment: .center, distribution: .fill)
private var isFollow: Bool = false {
didSet {
self.follow.isHidden = isFollow
self.followLabel.isHidden = !isFollow
}
}
复制代码addSubview(hStack)
hStack.snp.makeConstraints { make **in**
make.edges.equalToSuperview().inset(UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16))
}
iconView.sizeConstraint = CGSize(width: 50, height: 50)
follow.sizeConstraint = CGSize(width: 60, height: 30)
hStack.addArrangedSubviewsMakeConstraint([iconView, vStack, hStack.spacer(), follow])
vStack.addArrangedSubviews([titleHStack,
detail])
followLabel.sizeConstraint = CGSize(width: 50, height: 15)
titleHStack.addArrangedSubviewsMakeConstraint([title, followLabel, titleHStack.spacer()])
复制代码滚动布局
StackView有时候也可以使用配合ScrollView一起使用，效果如同TableView，但是这个则需要使用好ScrollView的contentSize，使用frame布局，则需要手动设置；使用自动布局，则需要ScrollView中的contentView来填充，最终ScrollView的contentSize取决于contentView。
有时候，写个简单的页面，真的不需要那么多代理，这不是更简单吗？
view.addSubview(scrollView)
scrollView.snp.makeConstraints { make **in**
make.edges.equalTo(view.safeAreaLayoutGuide)
}
scrollView.addSubview(vStack)
vStack.snp.makeConstraints { make **in**
make.edges.equalToSuperview();
make.width.equalToSuperview()
}
复制代码结尾
文章使用了几个简单的实例，一点点的演变了不同的布局方式，在我们日常开发中，或许有那些简单极致的页面，或许也有那些花里胡哨的页面，不管如何，布局的思路都不会变，其实从实例中可以看出，布局代码所占篇幅并不多，在配合使用一些扩展类，其实使用StackView纯代码布局是不是比想象中要香很多呢。