bottom - status bar ios

iOS: agregue una línea vertical programáticamente dentro de una vista de pila

Question

Estoy tratando de agregar líneas verticales, entre etiquetas dentro de una vista de pila, todo programáticamente.

El acabado deseado será algo así como esta imagen:

Puedo agregar las etiquetas, todas con el espaciado deseado; Puedo agregar líneas horizontales pero no puedo entender cómo agregar esas líneas verticales de separación entre ellas.

Me gustaría hacer algo como esto:

let stackView = UIStackView(arrangedSubviews: [label1, verticalLine, label2, verticalLine, label3])

¿Alguna pista?

Gracias

Answer 1

No puede usar la misma vista en dos lugares, por lo que deberá crear dos vistas de líneas verticales separadas. Debe configurar cada vista de línea vertical como esta:

• Establecer su color de fondo.
• Restrinja su ancho a 1 (para que obtenga una línea, no un rectángulo).
• Restrinja su altura (para que no se estire a la altura máxima de la vista de la pila).

Por lo tanto, agregue las etiquetas una a la vez a la vista de la pila, y haga algo como esto antes de agregar cada etiqueta a la vista de la pila:

if stackView.arrangedSubviews.count > 0 {
    let separator = UIView()
    separator.widthAnchor.constraint(equalToConstant: 1).isActive = true
    separator.backgroundColor = .black
    stackView.addArrangedSubview(separator)
    separator.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 0.6).isActive = true
}

Tenga en cuenta que no desea que las líneas verticales tengan el mismo ancho que las etiquetas, por lo que no debe establecer la propiedad de distribution de la vista de pila para fillEqually de manera fillEqually . En cambio, si desea que todas las etiquetas tengan el mismo ancho, debe crear restricciones de ancho entre las etiquetas usted mismo. Por ejemplo, después de agregar cada etiqueta nueva, haga esto:

if let firstLabel = stackView.arrangedSubviews.first as? UILabel {
    label.widthAnchor.constraint(equalTo: firstLabel.widthAnchor).isActive = true
}

Resultado:

Código de juegos completo:

import UIKit
import PlaygroundSupport

extension UIFont {

    var withSmallCaps: UIFont {
        let feature: [String: Any] = [
            UIFontFeatureTypeIdentifierKey: kLowerCaseType,
            UIFontFeatureSelectorIdentifierKey: kLowerCaseSmallCapsSelector]
        let attributes: [String: Any] = [UIFontDescriptorFeatureSettingsAttribute: [feature]]
        let descriptor = self.fontDescriptor.addingAttributes(attributes)
        return UIFont(descriptor: descriptor, size: pointSize)
    }

}

let rootView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 44))
rootView.backgroundColor = .white
PlaygroundPage.current.liveView = rootView

let stackView = UIStackView()
stackView.axis = .horizontal
stackView.alignment = .center
stackView.frame = rootView.bounds
rootView.addSubview(stackView)

typealias Item = (name: String, value: Int)
let items: [Item] = [
    Item(name: "posts", value: 135),
    Item(name: "followers", value: 6347),
    Item(name: "following", value: 328),
]

let valueStyle: [String: Any] = [
    NSFontAttributeName: UIFont.boldSystemFont(ofSize: 12).withSmallCaps]
let nameStyle: [String: Any] = [
    NSFontAttributeName: UIFont.systemFont(ofSize: 12).withSmallCaps,
    NSForegroundColorAttributeName: UIColor.darkGray]
let valueFormatter = NumberFormatter()
valueFormatter.numberStyle = .decimal

for item in items {
    if stackView.arrangedSubviews.count > 0 {
        let separator = UIView()
        separator.widthAnchor.constraint(equalToConstant: 1).isActive = true
        separator.backgroundColor = .black
        stackView.addArrangedSubview(separator)
        separator.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 0.4).isActive = true
    }

    let richText = NSMutableAttributedString()
    let valueString = valueFormatter.string(for: item.value)!
    richText.append(NSAttributedString(string: valueString, attributes: valueStyle))
    richText.append(NSAttributedString(string: "/n" + item.name, attributes: nameStyle))
    let label = UILabel()
    label.attributedText = richText
    label.textAlignment = .center
    label.numberOfLines = 0
    stackView.addArrangedSubview(label)

    if let firstLabel = stackView.arrangedSubviews.first as? UILabel {
        label.widthAnchor.constraint(equalTo: firstLabel.widthAnchor).isActive = true
    }
}

UIGraphicsBeginImageContextWithOptions(rootView.bounds.size, true, 1)
rootView.drawHierarchy(in: rootView.bounds, afterScreenUpdates: true)
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
let png = UIImagePNGRepresentation(image)!
let path = NSTemporaryDirectory() + "/image.png"
Swift.print(path)
try! png.write(to: URL(fileURLWithPath: path))

Answer 2

Puedes probar lo siguiente.

1. Antes que nada, tome una UIView y aplique las mismas restricciones de UIStackView a esta UIView.
2. Hacer que el color de fondo de esta UIView sea negro (el color de las líneas)
3. Ahora tome un UIStackView y añádalo como hijo de arriba de UIView.
4. Agregue restricciones del UIStackView, es decir, agréguelo a todos los bordes del UIView padre.
5. Ahora haz que el color de fondo de UIStackView sea Clear Color.
6. Establezca el espaciado de UIStackView en 1 o 2 (el ancho de las líneas)
7. Ahora agregue las 3 etiquetas en stackview.
8. Asegúrese de que las etiquetas tengan el color de fondo en Color blanco y Color de texto en Color negro.

Por lo tanto, logrará la escena requerida. Vea estas fotos para referencia.