UIKit — ano ito, mga pangunahing konsepto at arkitektura

Ano ang UIKit?

UIKit — ay isang framework mula sa Apple na nagbibigay ng mga klase para sa paglikha at pamamahala ng user interface sa iOS, iPadOS at macOS (sa pamamagitan ng Mac Catalyst). Gumagana ito sa ibabaw ng Core Animation, Core Graphics at Quartz Core, na inaabstrak ang mababang antas ng rendering sa mataas na antas na mga bagay — mga pindutan, label, larawan, at lalagyan. Lumitaw ang UIKit kasama ng iPhone OS 1 noong 2007 at nananatiling pangunahing framework para sa pag-develop ng iOS kasama ng SwiftUI.

Sumusunod ang framework sa imperatibong diskarte: ang developer ay gumagawa ng mga instance ng mga klase na UIButton, UILabel, UIImageView, itinatakda ang kanilang mga property (kulay, font, posisyon) at idinaragdag ang mga ito sa hierarchy ng view sa pamamagitan ng addSubview. Ang bawat pagbabago sa interface ay ginagawa nang tahasan — walang mahiwagang pag-update sa likod ng mga eksena. Ito ang nagpapaiba sa UIKit mula sa mga deklaratibong framework tulad ng SwiftUI, kung saan ang paglalarawan ng estado ay awtomatikong muling iginuguhit ang interface.

Mga pangunahing klase ng UIKit

Ang framework ay naglalaman ng ilang kategorya ng mga klase. UIView — ang pangunahing elemento kung saan nagmamana ang lahat ng visual na component. UIWindow — ang pinakamataas na antas ng lalagyan kung saan ang mga view ay ipinapakita sa screen. UIViewController — ang controller na namamahala sa isang set ng mga view at tumutugon sa mga pag-ikot ng screen, paglitaw ng keyboard, at mga system notification. UIApplication — ang entry point na nagpoproseso ng mga touch event at pagpindot ng pindutan.

Para sa teksto ginagamit ang UILabel (static na teksto), UITextField (single-line input), UITextView (multi-line input). Para sa mga pindutan — UIButton, kabilang ang system, custom, at may iconography ng SF Symbols. Para sa nabigasyon — UINavigationController, UITabBarController at UISplitViewController. Sa kabuuan, ang UIKit ay naglalaman ng higit sa 200 pampublikong klase.

Arkitektura ng UIKit: mga layer at hierarchy ng view

Ang arkitektura ng UIKit ay binuo sa mga layer: bawat layer ay responsable para sa sarili nitong aspeto ng pagpapakita. Sa pinakamababang antas ay ang Core Graphics — ang rendering engine para sa mga path, teksto, at larawan. Sa itaas — Core Animation, na namamahala sa komposisyon ng mga layer (CALayer) at mga animation sa pagitan ng mga estado. Ang UIKit ay nagtatayo sa ibabaw ng mga ito ng object-oriented na API: UIView, UIViewController at UIResponder.

Bawat aplikasyon ay may hierarchy ng view (view hierarchy) — isang puno na ang ugat ay UIWindow. Sa ilalim nito — ang root UIViewController, ang view nito, at sa loob — nested subview. Ang mga touch event ay kumakalat sa kahabaan ng responder chain: mula sa pinaka-nested na view patungo sa mga magulang at higit pa sa UIApplication. Kung walang bagay na nagproseso ng pagpindot, ito ay hindi pinapansin.

UIView at CALayer

Bawat UIView ay naglalaman ng isang CALayer na layer na responsable sa pag-render ng mga pixel sa screen. Ang view ay namamahala ng mga pagpindot at accessibility, ang layer — graphics: shadow, cornerRadius, border, transform. Ang paghihiwalay ay nagbibigay-daan sa paglipat ng mabigat na graphics sa isang hiwalay na thread (render server) nang hindi binabangga ang main thread. Inirerekomenda ng Apple na direktang magtrabaho sa CALayer kung kailangan ng higit sa 200 view sa screen — binabawasan nito ang karga ng CPU.

Responder Chain nang detalyado

Ang responder chain ay nagsisimula sa bagay na unang tumatanggap ng touch event. Kung hindi nito pinoproseso ang event (ang method na touchesBegan ay hindi na-override), ang event ay ipinapasa sa susunod na responder sa chain: next, superview, next responder, UIViewController, UIWindow, UIApplication, App Delegate. Ito ay nagbibigay-daan sa pag-intercept ng mga global gesture at keyboard event sa antas ng scene nang hindi nagdaragdag ng handler sa bawat view.

Lifecycle ng UIViewController

Bawat UIViewController ay dumadaan sa isang mahigpit na tinukoy na pagkakasunod-sunod ng mga event. Ang lifecycle ay sumasaklaw sa mga yugto: pagsisimula, pag-load ng view, paglitaw sa screen, pag-update ng layout sa pag-ikot, pagtatago, pag-alis sa screen, at pagpapalaya ng memorya. Ini-override ng developer ang mga kaukulang method upang isagawa ang kanyang code sa bawat yugto.

class ProfileViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        loadUserProfile()
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        clearCache()
    }
}

Sa viewDidLoad ang interface ay nakonfigure — ginagawa ang mga subview, itinatakda ang mga constraint, nag-subscribe ang mga delegado. Sa viewWillAppear isinasagawa ang mga operasyon bago ang pagpapakita: pag-load ng sariwang data mula sa network, pag-update ng mga halaga. viewDidDisappear — lugar para mag-unsubscribe mula sa mga notification at maglinis ng pansamantalang data. Ang pagtawag sa super ay sapilitan sa lahat ng override, kung hindi ay mapuputol ang chain ng event.

Pamamahala ng memorya at viewDidUnload

Sa mas lumang bersyon ng iOS mayroong method na viewDidUnload, na tinatawag kapag kulang ang memorya. Mula sa iOS 6 ang method ay inalis na — ngayon awtomatikong inaalis ng UIKit ang mga view ng controller kapag hindi ito nakikita. Kailangan lang ng developer na ideklara ang lahat ng reference sa mga view bilang weak, upang ang ARC ay makapagpalaya ng memorya nang tama kapag nakatanggap ng babala mula sa sistema.

Mga transisyon sa pagitan ng mga controller

Sinusuportahan ng UIKit ang dalawang uri ng transisyon: segue (sa pamamagitan ng Storyboard) at programmatic navigation sa pamamagitan ng UINavigationController. Ang programmatic na transisyon ay ganito ang hitsura: navigationController?.pushViewController(detailVC, animated: true). Sa ganito, ang lifecycle ng detailVC ay dumadaan nang normal — ang viewDidLoad ay tinatawag nang isang beses, ang viewWillAppear — sa bawat oras na ito ay ipinapakita.

Auto Layout at adaptive na layout

Auto Layout — ay isang sistema ng pagpoposisyon ng mga elemento batay sa matematikal na relasyon (constraint). Sa halip na mga nakapirming coordinate na X at Y, inilalarawan ng developer ang mga panuntunan: “ang pindutan ay nasa kanan ng label na may puwang na 16pt” o “ang view ay umaabot sa lapad ng screen na may margin na 20pt kaliwa at kanan”. Nillutas ng sistema ang resultang sistema ng mga equation sa runtime, inaayos ang interface sa anumang laki ng screen.

Ang mga constraint ay maaaring itakda sa Interface Builder (sa pamamagitan ng drag-and-drop) o programmatically sa Swift. Bawat constraint ay isang instance ng klase na NSLayoutConstraint na may mga parameter: firstItem, firstAttribute, relation, secondItem, secondAttribute, multiplier, constant. Ang mga constraint ay isinaaktibo sa pamamagitan ng isActive = true o maramihan sa pamamagitan ng NSLayoutConstraint.activate().

Safe Area at Layout Margins

Sa iPhone X (2017) ipinakilala ng Apple ang Safe Area — ang lugar ng screen na walang notch, bilugan na sulok, at home bar indicator. Ang mga constraint ay dapat nakatali sa view.safeAreaLayoutGuide, hindi sa view. Layout Margins ay nagdaragdag ng panloob na margin ng view, default na 8pt o 16pt depende sa konteksto. Ang paggamit ng safeAreaLayoutGuide ay ginagarantiyahan ang tamang pagpapakita sa lahat ng henerasyon ng iPhone at iPad.

Animasyon ng constraint

Sinusuportahan ng Auto Layout ang animation sa pamamagitan ng pagbabago ng constant ng constraint. Sapat na i-update ang constant ng constraint at tawagin ang UIView.animate na may layoutIfNeeded sa loob ng animation block. Maayos na kinakalkula ng sistema ang posisyon ng lahat ng view sa hierarchy. Ang teknik na ito ay ginagamit para sa mga expandable block, adaptive keyboard panel, at pagbabago ng oryentasyon ng screen.

Pagtatrabaho sa mga table at koleksyon

UITableView at UICollectionView — dalawang makapangyarihang tool ng UIKit para sa pagpapakita ng mga listahan at grid. Ang UITableView ay angkop para sa patayong listahan na may isang column (chat, setting, news feed). Ang UICollectionView — para sa mga grid, pahalang na listahan, carousel, at custom na layout (galerya, produkto, kalendaryo). Ang parehong klase ay gumagamit ng delegation pattern para paghiwalayin ang data at hitsura.

Ang source ng data ay protocol na UITableViewDataSource na may mga mandatoryong method na numberOfRowsInSection at cellForRowAt. Ang delegado UITableViewDelegate ay nagpoproseso ng mga pagpindot sa cell, taas ng row, at scroll event. Ang mekanismo ng reuse identifier ay muling ginagamit ang mga cell na lumabas na sa screen, na kritikal para sa performance sa malalaking listahan.

class ContactsViewController: UITableViewController {

    private let contacts = ["Anna", "Boris", "Viktor"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(UITableViewCell.self,
                           forCellReuseIdentifier: "cell")
    }

    override func tableView(_ tableView: UITableView,
                          numberOfRowsInSection section: Int) -> Int {
        return contacts.count
    }

    override func tableView(_ tableView: UITableView,
                          cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell",
                                                 for: indexPath)
        var content = cell.defaultContentConfiguration()
        content.text = contacts[indexPath.row]
        cell.contentConfiguration = content
        return cell
    }
}

Ang halimbawa ay nagpapakita ng isang minimal na controller para sa pagpapakita ng array ng mga string. Ang cell ay nakonfigure sa pamamagitan ng UIListContentConfiguration — modernong API (iOS 14+) na pumalit sa lumang textLabel at detailTextLabel. Ang pagpaparehistro ng klase ng cell sa viewDidLoad ay sapilitan, kung hindi ay mag-crash ang aplikasyon na may exception sa runtime.

UICollectionView at Compositional Layout

Mula sa iOS 13, inirerekomenda ng Apple ang UICollectionViewCompositionalLayout para sa pagbuo ng mga kumplikadong layout. Inilalarawan ng developer ang section, group, elemento at ang kanilang mga sukat nang deklaratibo — nakakakuha ng grid na may anumang geometry: ribbon, 2x2 grid, carousel, ornament. Ang Compositional Layout ay pumalit sa lumang UICollectionViewFlowLayout sa lahat ng bagong proyekto. Sa kombinasyon sa DiffableDataSource, ang pag-update ng koleksyon ay nababawasan sa isang tawag na apply(snapshot), at ang animation ng mga pagbabago ay awtomatikong ginagawa.

Mga halimbawa ng code sa Swift

Sa ibaba ay dalawang praktikal na halimbawa ng paggamit ng UIKit sa totoong mga gawain: paglikha ng custom na view na may anino at bilugan, pati na rin ang paghawak ng swipe gesture para tanggalin ang isang elemento mula sa listahan.

extension UIView {
    func applyCardStyle() {
        layer.cornerRadius = 12
        layer.shadowOpacity = 0.15
        layer.shadowRadius = 8
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.masksToBounds = false
    }
}

@objc private func handleSwipe(_ gesture: UISwipeGestureRecognizer) {
    guard let swipedView = gesture.view else { return }
    UIView.animate(withDuration: 0.3) {
        swipedView.alpha = 0
        swipedView.transform = CGAffineTransform(translationX: 300, y: 0)
    } completion: { _ in
        swipedView.removeFromSuperview()
    }
}

Ang extension na applyCardStyle ay nagdaragdag ng anino at bilugan sa anumang view — kapaki-pakinabang para sa mga card ng produkto, profile, at notification. Ang method na handleSwipe na may animation ay nagtatanggal ng elemento kung ang user ay nag-swipe pakanan. Ang handler ay idinaragdag sa view sa pamamagitan ng addGestureRecognizer na may configuration na UISwipeGestureRecognizer(direction: .right). Mahalaga ang setting na masksToBounds = false upang ang anino ay hindi maputol ng mga hangganan ng view.

Para sa mas kumplikadong interface, gamitin ang UIStackView — isang lalagyan na awtomatikong namamahagi ng mga nested view nang pahalang o patayo. Pinapasimple ng Stack View ang layout: hindi kailangan magtakda ng constraint para sa bawat elemento, sapat na ang isang constraint para sa stack mismo.