ios - español - constraints xcode

¿Cómo crear el porcentaje del ancho total usando el autolayout?

Question

Necesito crear tres columnas dinámicas, cada una con un porcentaje fijo del ancho total. No tercios, sino valores diferentes. Por ejemplo, la siguiente ilustración muestra tres columnas: la primera es 42% de ancho, la segunda es 25% de ancho, y la tercera es 33% de ancho.

Para un controlador de vista de 600 píxeles, eso sería 252, 150 y 198 píxeles, respectivamente.

Sin embargo, para cualquier tamaño de visualización posterior (es decir, iPhone 4 paisaje (960 de ancho) o iPad 2 retrato (768 de ancho), me gustaría que los porcentajes relativos sean los mismos (no los anchos de píxeles citados anteriormente).

¿Hay alguna manera de hacer esto usando Storyboards (es decir, sin código)? Puedo hacer esto fácilmente en el código, pero mi objetivo es poner tanta lógica de visualización como sea posible en el Guión Gráfico.

Answer 1

Cuando Apple presenta UIStackView hizo el trabajo mucho más fácil.

Método 1: Usando Nib / StoryBoard:

Solo tiene que agregar tres vistas en el constructor de interfaz e incrustarlas en stackview

Xcode ► Editor ► Incrustar en ► StackView

Seleccione stackView & give constraint con la altura inicial, final, superior e igual con safeArea

Haga clic para asignar el área del inspector y establezca StackView horizontal y distribución para que se llene proporcionalmente

[ 3

Otorgue restricción de tres vistas con ventaja, final, superior e inferior con respectivos lados.

Método 2: mediante programación:

import UIKit
class StackViewProgramatically: UIViewController {
var propotionalStackView: UIStackView!
///Initially defining three views
let redView: UIView = {
let view = UIView()//taking 42 % initially
view.frame = CGRect(x: 0, y: 0, width: 42 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
view.backgroundColor = .red
return view
}()
let greenView: UIView = {
let view = UIView()//taking 42* initially
view.frame = CGRect(x: 42 * UIScreen.main.bounds.width/100, y: 0, width: 25 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
view.backgroundColor = .green
return view
}()
let blueView: UIView = {
let view = UIView()//taking 33*initially
view.frame = CGRect(x: 67 * UIScreen.main.bounds.width/100, y: 0, width: 33 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
view.backgroundColor = .blue
return view
}()
///Changing UIView frame to supports landscape mode.
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
DispatchQueue.main.async {
self.redView.frame = CGRect(x: 0, y: 0, width: 42 * self.widthPercent, height: self.screenHeight)
self.greenView.frame = CGRect(x: 42 * self.widthPercent, y: 0, width: 25 * self.widthPercent, height: self.screenHeight)
self.blueView.frame = CGRect(x: 67 * self.widthPercent, y: 0, width: 33 * self.widthPercent, height: self.screenHeight)
}
}
override func viewDidLoad() {
super.viewDidLoad()
//Adding subViews to the stackView
propotionalStackView = UIStackView()
propotionalStackView.addSubview(redView)
propotionalStackView.addSubview(greenView)
propotionalStackView.addSubview(blueView)
propotionalStackView.spacing = 0
///setting up stackView
propotionalStackView.axis = .horizontal
propotionalStackView.distribution = .fillProportionally
propotionalStackView.alignment = .fill
view.addSubview(propotionalStackView)
}
}
//MARK: UIscreen helper extension
extension NSObject {
var widthPercent: CGFloat {
return UIScreen.main.bounds.width/100
}
var screenHeight: CGFloat {
return UIScreen.main.bounds.height
}
}

Salida:

Funciona con paisaje y retrato

Proyecto de demostración - https://github.com/janeshsutharios/UIStackView-with-constraints

https://developer.apple.com/videos/play/wwdc2015/218/

Answer 2

Si, como dices, sabes cómo hacerlo en código, entonces ya sabes cómo hacerlo en el guión gráfico. Son exactamente las mismas restricciones, pero las está creando visualmente en lugar de crearlas en código.

1. Seleccione tanto una vista como su supervista.

2. Elija Editor -> Pin -> Anchuras Igualmente para restringir el ancho para que sea igual al ancho de la supervista (de hecho, el diálogo emergente "pin" en la parte inferior del lienzo funciona mejor aquí).

3. Edite la restricción y configure el Multiplicador en la fracción deseada, por ejemplo, 0.42. Y también para los otros puntos de vista.

Una imagen que vale más que mil palabras, he implementado su diseño propuesto para usted en un guión gráfico, sin código, en un proyecto github que puede descargar y examinar:

https://github.com/mattneub/percentageWidthsInStoryboard

Answer 3

Creo que esto se puede explicar con más detalle, por lo que se puede aplicar más fácilmente a cualquier cantidad de vistas que requieran diseños de porcentaje fijos en una supervista.

Vista más a la izquierda

• Anclado a SuperView.Leading
• Define su porcentaje fijo como un multiplicador en el SuperView.Height

Vistas intermedias

• Define su porcentaje fijo como un multiplicador en el SuperView.Height
• Sujeta su left al derecho de su vecino

Right-Most view

• No define un porcentaje fijo (es el resto de la vista disponible)
• Sujeta su left al derecho de su vecino
• SuperView.Trailing su right a SuperView.Trailing

Todas las vistas

• Defina sus alturas no fijas anclándolas a la Top Layout Guide.Top Top Layout Guide.bottom . Top Layout Guide.bottom y Top Layout Guide.bottom . En la respuesta anterior, se observa que esto también se puede hacer al establecer una altura igual a la vista vecina.