raywenderlich - uistackview swift 3

¿Puedes dar fronteras UIStackView?

Question

Estoy tratando de dar 5 UIStackViews separados en mis bordes de ViewController . Les di a cada uno un IBOutlet y luego los llamé en viewDidLoad para usar la propiedad de la layer pero no sirvió de nada. ¿No es posible dar bordes de vistas de pila, programáticamente?

Código:

@IBOutlet weak var stackView1: UIStackView!
@IBOutlet weak var stackView2: UIStackView!
@IBOutlet weak var stackView3: UIStackView!
@IBOutlet weak var stackView4: UIStackView!
@IBOutlet weak var stackView5: UIStackView!

override func viewDidLoad() {
    super.viewDidLoad()

    stackView1.layer.borderWidth = 5
    stackView2.layer.borderWidth = 5
    stackView3.layer.borderWidth = 5
    stackView4.layer.borderWidth = 5
    stackView5.layer.borderWidth = 5   
}

Answer 1

Aquí hay una parte útil del código que encontré y uso:

extension UIView {
    func addTopBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0,y: 0, width:self.frame.size.width, height:width)
        self.layer.addSublayer(border)
    }

    func addRightBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x: self.frame.size.width - width,y: 0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }

    func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0, y:self.frame.size.height - width, width:self.frame.size.width, height:width)
        self.layer.addSublayer(border)
    }

    func addLeftBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0, y:0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }

    func addMiddleBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:self.frame.size.width/2, y:0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }
}

Simplemente use en cualquier vista como esta:

bottomControls.addMiddleBorderWithColor(color: buttonBorderColor, width: 3.0)

Fuente: ¿Cómo agregar solo un borde SUPERIOR en un UIButton?

Answer 2

Creo que la forma más fácil de hacerlo es no usar más etiquetas o vistas con alto / ancho igual a uno para representar los bordes, quiero decir que es incluso más fácil que hacerlo mediante el uso del atributo SPACING de las vistas de pila. Simplemente llene su pila y sus sustancias, luego haga el espaciado uno para la pila vertical exterior, también haga el espaciado uno para las pilas horizontales interiores, obtendrá un resultado perfecto. Por último, para dar un color específico a los bordes, mantuve esto utilizando la vista de fondo para la vista externa, solo tiene la misma restricción que la pila con el color de fondo que se desea para los bordes, la idea es cuando se realiza el espaciado, el espacio toma el color de la vista detrás la pila, eso es: D, por favor verifica los resultados como en la imagen adjunta y dime si algo no está claro

Answer 3

Desafortunadamente esto no se puede hacer. UIStackView es inusual ya que es una vista "sin representación" que realiza el diseño (utilizando restricciones de diseño automático) pero no se muestra a sí misma. Tiene una capa como todas las vistas UIV, pero se ignora.

Consulte el documento de Apple en "Administración de la apariencia de la vista de pila":

El UIStackView es una subclase no generada de UIView. No proporciona ninguna interfaz de usuario propia. En su lugar, solo gestiona la posición y el tamaño de sus vistas organizadas. Como resultado, algunas propiedades (como backgroundColor) no tienen efecto en la vista de pila. De forma similar, no puede anular layerClass, drawRect: o drawLayer: inContext:

Answer 4

Es posible hacer esto teniendo vistas dentro de la vista de pila en los bordes. Esto puede ser una gran cantidad de trabajo y puede haber ciertas situaciones que no funcionen o que deban solucionarse, por lo que puede que no valga la pena el esfuerzo. Tendrá que anidar las vistas de pila para poder proporcionar bordes en las direcciones horizontal y vertical. En la publicación de mi blog Bordered Stack Views entro en más detalles sobre esto. Pero básicamente tengo vistas regulares, tengo un fondo configurado con el color de mi elección y doy restricciones de altura o anchura de 1 dependiendo de la dirección del eje de la vista de pila. Aquí está la jerarquía completa de una cuadrícula de 2x2 integrada en el constructor de interfaces:

Resultando en este resultado:

Aquí hay un enlace a mi repositorio github de este ejemplo para que pueda ver el archivo del guión gráfico.

Answer 5

Puede incrustar stackView dentro de una UIView, luego configurar los bordes de esa vista (color, ancho, etc.) y luego restringir stackView a esa UIView como arriba, izquierda, derecha, altura.

Answer 6

Según lo indicado por otros, no puedes hacer esto (para más detalles, consulta la respuesta de Clafou).

Sin embargo, lo que puede hacer es incrustar su vista de pila en otra vista UIV; Haciendo modificaciones a la capa de la envolvente UIView.