Desde iOS 9, se pueden crear muchos diseños simples como este usando UIStackViews, que son vistas de contenedores que administran subvistas y sus restricciones de diseño para que no tenga que hacerlo (como el crítico nostálgico).

UIStackViews tiene muchos beneficios, además de ser un concepto simple. Funcionan bien, son fáciles de usar y facilitan ocultar/mostrar vistas sin manipular ni actualizar muchas restricciones manualmente.

En este caso, tiene dos UILabels y un UIImageView apilados uno encima del otro con algo de espacio. Si tuviera que implementar este diseño, agruparía las dos etiquetas juntas en un UIStackView, lo agregaría a un UIView con algunas inserciones y agregaría esa vista a otro UIStackView junto con el UIImageView de esta manera:

UI StackView (1)

Vista de interfaz de usuario (2)

UI StackView (3)

Etiqueta de interfaz de usuario (4)

Etiqueta de interfaz de usuario (5)

UIImageView (6)

Y en código:

 let containerStackView = UIStackView() // (1) containerStackView.axis = .vertical let greenLabel = UILabel() // (4) greenLabel.text = "Hello," let blueLabel = UILabel() // (5) blueLabel.text = "World!" let textStackView = UIStackView() // (3) textStackView.axis = .vertical textStackView.spacing = 10 textStackView.addArrangedSubview(greenLabel) textStackView.addArrangedSubview(blueLabel) let textContainerView = UIView() // (2) textContainerView.addSubview(textStackView) textStackView.snp.makeConstraints { make in make.edges.equalToSuperview().inset(20) } let imageView = UIImageView(image: UIImage(named: "my-image") // (6) containerStackView.addArrangedSubview(textContainerView) containerStackView.addArrangedSubview(imageView)

Y luego debe restringir la vista de la pila de contenedores a la vista de contenido de su UITableViewCell:

 contentView.addSubview(containerStackView) containerStackView.snp.makeConstraints { make in make.edges.equalToSuperview() }

Así es como lo haría. Por supuesto, su enfoque de administrar las restricciones usted mismo es igualmente válido y se haría de la siguiente manera:

 contentView.addSubview(label1) label1.snp.makeConstraints { make in make.leading.equalToSuperview().offset(20) make.trailing.equalToSuperview().offset(-20) make.top.equalToSuperview().offset(20) } contentView.addSubview(label2) label2.snp.makeConstraints { make in make.leading.equalToSuperview().offset(20) make.trailing.equalToSuperview().offset(-20) make.top.equalTo(label1.snp.bottom).offset(10) } contentView.addSubview(exampleImage) exampleImage.snp.makeConstraints { make in make.leading.trailing.bottom.equalToSuperview() make.top.equalTo(label2.snp.bottom).offset(20) }

Tenga en cuenta que escribí esto en un editor de texto, por lo que puede haber algunos errores tipográficos, pero la idea general debería mantenerse.

Aquí hay una lista de cosas que debe especificar, ya sea directa o indirectamente, cuando agrega restricciones:

• La posición X
• La posición Y
• La anchura
• La altura

Pensar en cada una de esas cosas cuando haces restricciones puede hacer que esto sea muy sencillo.

Primero, label1 .

1. Posición X: Queremos que esté centrado horizontalmente
2. Posición Y: 20 desde la parte superior de su súper vista
3. Ancho: algún número tal que su izquierda esté a 20 de la izquierda de la supervista, y su derecha esté a 20 de la derecha de la supervista, esto también implica la posición X
4. Altura: No has especificado esto en tu captura de pantalla. Asumiré que desea que su altura sea 1/3 de la supervista

Esto se traduce en las siguientes restricciones:

 make.topMargin.equalTo(20) make.leftMargin.equalTo(20) make.rightMargin.equalTo(-20) make.height.equalToSuperview().dividedBy(3)

Ahora para la label2 :

1. Posición X: Queremos que esté centrado horizontalmente
2. Posición Y: 10 desde la parte inferior de la label1
3. Ancho: algún número tal que su izquierda esté a 20 de la izquierda de la supervista, y su derecha esté a 20 de la derecha de la supervista, esto también implica su posición X
4. Altura: algún número tal que esté a 20 de la parte inferior de la supervista

Esto se traduce a:

 make.top.equalTo(label1.snp.bottom).offset(10) make.leftMargin.equalTo(20) make.rightMargin.equalTo(-20) make.bottomMargin.equalTo(-20)

También podría usar un UIStackView para lograr esto.

Para obtener información sobre cómo hacer que la vista de tabla cambie el tamaño de la altura de sus celdas según el contenido, consultethis .