El diseño de código puro también puede ser tan conciso

"Me inscribí para participar en el primer desafío del Proyecto Golden Stone: compartir el premio acumulado de 100,000. Este es mi tercer artículo, haga clic para ver los detalles del evento "

prefacio

En los primeros dos artículos, describí las ideas de diseño, los métodos de uso y algunos casos prácticos de UIStackView. En el caso, el uso de xib combinado con UIStackView carece de algunos complementos al código puro. En este artículo, hablamos principalmente sobre cómo usar StackView para escribir código puro.

• Use UIStackView para simplificar el diseño de la interfaz de iOS
• Una de las preguntas y respuestas de UIStackView

Aunque he hablado mucho sobre la bondad de StackView, muchas personas todavía piensan que las páginas complejas no son útiles. De hecho, realmente entienden la idea de diseño de StackView, ya sea un diseño simple o un diseño complejo, o ya sea que se use Inferface Builderpara crear una interfaz de usuario o use código puro, puede hacerlo con facilidad.

A continuación, usaré swift para demostrar cómo se realiza el diseño usando código puro. Si está interesado, haga clic para descargar Demo para ver el efecto. El código que se muestra a continuación es solo una captura de pantalla del diseño.

diseño sencillo

Diseño simple, lo resumo como una fila o una columna de elementos. Por lo general, hay páginas de clase, como la página de configuración y la libreta de direcciones. En el siguiente diseño, un hStack contiene una imagen, una etiqueta y un botón para formar un diseño simple.

La estructura es la siguiente:
HStack: imagen + etiqueta + Botón

/// 懒加载 
private lazy var vStack = VStack(spacing: 16) 
复制代码

Nota : esto es VStacken realidad la encapsulación de UIStackView y la adición de inicialización portátil, no 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])
复制代码

Nota : sizeConstraint、heightConstraint、widthConstraint、addArrangedSubviewsMakeConstraint、spacer()Todos estos son métodos para agregar clasificación por su cuenta.

Diseño anidado

Diseño anidado, lo resumo, los elementos de la interfaz están diversificados y es necesario usar más de dos diseños StackView (diferentes direcciones de disposición).

结构如下：
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纯代码布局是不是比想象中要香很多呢。