Sobes.tech
Middle

Šta je poravnanje?

sobes.tech АИ

Одговор од АИ

Poravnanje u iOS razvoju odnosi se na mehanizme za raspored elemenata korisničkog interfejsa (UIViews) u odnosu jedan na drugi ili njihov kontejner (superview). Glavni pristupi poravnanju:

  1. Frejmovi (Frames): Postavljanje pozicije i veličine (x, y, width, height) svakog View-a u koordinatnom sistemu njegovog superview-a. Pogodno za jednostavne, fiksne rasporede.

    let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
    // myView će biti smešten na tački (10, 20) u odnosu na gornji levi ugao superview-a.
    
  2. Auto Layout: Deklarativni sistem za raspored elemenata zasnovan na skupu pravila (konstrakata), koja definišu odnose između Views-a. Fleksibilan pristup za adaptivne rasporede koji se prilagođavaju različitim veličinama ekrana i orijentacijama.

    • Konstrainti: Pravila koja postavljaju ograničenja na svojstva View-a (npr. leading, trailing, top, bottom, centerY, centerX, width, height).
    • Prioritet konstrainta: Brojčana vrednost koja ukazuje na važnost konstrainta pri rešavanju konflikata (1-1000).

    Primer konstrainta korišćenjem NSLayoutConstraint:

    let myView = UIView()
    myView.translatesAutoresizingMaskIntoConstraints = false // Isključujemo 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)
    ])
    

    Primer za konstrainte sa korišćenjem 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)
    ])
    

    Primer za konstrainte sa 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. Autoresizing Mask: Jednostavan sistem poravnanja koji je prethodio Auto Layout-u. Omogućava postavljanje načina na koji View treba da se rasteže i skuplja pri promeni veličine njegovog superview-a. Manje je fleksibilan od Auto Layout-a i često se isključuje pri korišćenju Auto Layout-a (translatesAutoresizingMaskIntoConstraints = false).

  4. Stack Views (UIStackView u UIKit, VStack/HStack/ZStack u SwiftUI): Kontejneri koji automatski upravljaju rasporedom i veličinom svojih podređenih View (arrangedSubviews) na osnovu zadatih svojstava (axis, alignment, distribution, spacing). Olakšavaju kreiranje linearnih i slojevitih rasporeda sa automatskim poravnanjem.

    let stackView = UIStackView()
    stackView.axis = .vertical // Osovina rasporeda: vertikalna
    stackView.alignment = .center // Poravnanje duž poprečne ose: po centru
    stackView.distribution = .equalSpacing // Raspodela prostora
    stackView.spacing = 10 // Razmak između elemenata
    
    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)
    // Dodavanje konstrainta za sam stackView, da ga postavi u superview
    

Izbor metode poravnanja zavisi od složenosti rasporeda i zahteva za adaptivnošću. U većini savremenih aplikacija, preferira se Auto Layout, često u kombinaciji sa Stack Views.