Sobes.tech
Middle

Kas yra lygiavimas?

sobes.tech AI

Atsakymas iš AI

iOS kūrime išlyginimas reiškia elementų (UIViews) išdėstymo mechanizmus viena relative arba jų konteineryje (superview). Pagrindiniai išlyginimo metodai:

  1. Rėmeliai (Frames): Pozicijos ir dydžio nustatymas (x, y, width, height) kiekvienam View superview koordinačių sistemoje. Tinka paprastiems, fiksuotiems maketams.

    let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
    // myView bus išdėstytas 10, 20 taške nuo superview viršutinio kairiojo kampo.
    
  2. Auto Layout: Deklaratyvi elementų išdėstymo sistema, pagrįsta taisyklėmis (konstraintais), apibrėžiančiomis santykius tarp Views. Lanksti požiūris į adaptuojamus maketus, kurie prisitaiko prie skirtingų ekranų dydžių ir orientacijų.

    • Konstraintai: Taisyklės, nustatančios apribojimus View savybėms (pvz., leading, trailing, top, bottom, centerY, centerX, width, height).
    • Konstrainto prioritetas: Skaitinė reikšmė, nurodanti svarbą konfliktų sprendime (1-1000).

    Pavyzdys su NSLayoutConstraint:

    let myView = UIView()
    myView.translatesAutoresizingMaskIntoConstraints = false // Išjungti Auto Resizing Mask
    superview.addSubview(myView)
    
    NSLayoutConstraint.activate([
        myView.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 20),
        myView.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: -20),
        myView.topAnchor.constraint(equalTo: superview.topAnchor, constant: 80),
        myView.heightAnchor.constraint(equalToConstant: 100)
    ])
    

    Pavyzdys su Layout Anchors:

    let myView = UIView()
    myView.translatesAutoresizingMaskIntoConstraints = false
    superview.addSubview(myView)
    
    NSLayoutConstraint.activate([
        myView.centerXAnchor.constraint(equalTo: superview.centerXAnchor),
        myView.centerYAnchor.constraint(equalTo: superview.centerYAnchor),
        myView.widthAnchor.constraint(equalToConstant: 200),
        myView.heightAnchor.constraint(equalToConstant: 150)
    ])
    

    Pavyzdys su VFL (Visual Format Language):

    let myView = UIView()
    myView.translatesAutoresizingMaskIntoConstraints = false
    superview.addSubview(myView)
    
    let views: [String: UIView] = ["myView": myView]
    let metrics: [String: CGFloat] = ["margin": 20]
    
    NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "H:|-margin-[myView]-margin-|",
                                                               options: [],
                                                               metrics: metrics,
                                                               views: views))
    NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|-80-[myView(100)]",
                                                               options: [],
                                                               metrics: nil,
                                                               views: views))
    
  3. Auto Resizing Mask: Paprasta išlyginimo sistema, buvusi prieš Auto Layout. Leidžia nustatyti, kaip View turi ištempti ar susitraukti keičiantis superview dydžiui. Mažiau lanksti nei Auto Layout, dažnai išjungiamas naudojant Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

  4. Stack Views (UIStackView UIKit, VStack/HStack/ZStack SwiftUI): Konteineriai, automatiškai valdantys savo vaikų View (arrangedSubviews) išdėstymą ir dydį pagal nustatytas savybes (axis, alignment, distribution, spacing). Supaprastina linijinių ir sluoksniuotų maketų kūrimą su automatinio išlyginimo galimybėmis.

    let stackView = UIStackView()
    stackView.axis = .vertical // Vertikali ašis
    stackView.alignment = .center // Išlyginimas centriniu būdu
    stackView.distribution = .equalSpacing // Pasiskirstymas tarp elementų
    stackView.spacing = 10 // Tarpų dydis
    
    let label = UILabel()
    label.text = "Hello"
    let button = UIButton(type: .system)
    button.setTitle("Tap Me", for: .normal)
    
    stackView.addArrangedSubview(label)
    stackView.addArrangedSubview(button)
    
    superview.addSubview(stackView)
    // Pridedame konstraintus pačiam stackView, kad jį išdėstytume superview
    

Pasirinktas išlyginimo metodas priklauso nuo maketo sudėtingumo ir adaptacijos reikalavimų. Dauguma šiuolaikinių programėlių naudoja Auto Layout, dažnai kartu su Stack Views.