Published on

1.2 Programmatic UI va Storyboard | UIKit asoslari

Authors

Ushbu maqola biz UIKit’da ikki asosiy yondashuvni solishtiramiz: Storyboard va Programmatic UI. va nega bu kursda biz Programmatic UI uslubida kod yozishni tanlaganimizni tushuntiramiz.

Kirish

iOS’da UI yaratishning ikki yo‘li bor:

  1. Storyboard (Interface Builder) — ekranni vizual tarzda chizish, IBOutlet va IBAction orqali kodga ulash.
  2. Programmatic UI — barcha interfeys elementlarini kod orqali yaratish va Auto Layout cheklovlarini (NSLayoutConstraint yoki NSLayoutAnchor) dasturiy tarzda o‘rnatish.

Har ikkisi ham ishlaydi. Lekin bu kursda biz faqat programmatic yondashuvni tanlaymiz.

Sababi — u sizga UI’ni ichkaridan tushunish imkonini beradi.

Storyboard: afzalliklari va cheklovlari

Afzalliklari:

  • Tez prototiplash — dizaynni ko‘z bilan ko‘rasiz.
  • Boshlang‘ichlar uchun oson — IBOutlet va IBAction orqali tez ishlaydi.
  • Kichik loyihalar uchun qulay — test yoki demo uchun tez yechim.

Kamchiliklari:

  • Merge conflict — jamoaviy ishlashda storyboard fayllari tez buziladi.
  • Cheklangan nazorat — dinamik UI yaratish yoki murakkab layout qilish qiyin.
  • Murakkab loyihalarda — barcha ekranlar bitta faylda jam bo‘lib, chalkashlik yuzaga keladi.
  • Performans — katta storyboard fayllari yuklanishda sekinlashadi.

Storyboard — oson boshlanadi, lekin murakkab loyiha uchun cheklovli.

Programmatic UI: afzalliklari va cheklovlari

Afzalliklari:

  • To‘liq nazorat — har bir UI elementi, constraint, rang va event sizning qo‘lingizda.
  • Versiya nazorati uchun qulay — har bir view alohida faylda, git diff oson.
  • Qayta foydalanish (Reusable Views) — UIView subclass yaratib, boshqa joylarda ishlatish mumkin.
  • Testlash oson — snapshot testlar, unit testlar aniq ishlaydi.
  • Dinamik UI — runtime’da view qo‘shish, o‘chirish, yangilash qulay.
  • SwiftUI bilan yaqin — deklarativ fikrlashga o‘rgatadi.

Kamchiliklari:

  • Boshlanishda ko‘proq kod yozish kerak.
  • Vizual preview yo‘q (faqat running paytida ko‘rasiz). Lekin biz SwiftUI ishlatib livePreview qilib code yozamiz.
  • Yangi boshlovchilar uchun biroz murakkabroq.

Programmatic UI — bu “manual transmission”: siz hammasini boshqarasiz, lekin haqiqiy nazorat sizda bo‘ladi.

Nega biz Programmatic UI yozamiz?

  1. Tushuncha chuqurligi — Auto Layout, view lifecycle va constraint tizimini yaxshiroq tushunasiz.
  2. Professional amaliyot — katta kompaniyalar (Google, Meta, Uber) loyihalarini kod orqali UI yaratish bilan boshqaradi.
  3. Barqarorlik — merge conflict, nib error yoki interface builder xatoliklari yo‘q.
  4. Moslashuvchanlik — siz har bir elementni kod orqali o‘zgartirishingiz, animatsiya qo‘shishingiz mumkin.
  5. Katta loyiha tuzilmasi uchun qulay — har bir sahifa, har bir view mustaqil modul sifatida yoziladi.

Shuning uchun bu kurs davomida biz hech qanday storyboard ishlatmaymiz. Barcha UI elementlar — kod orqali, to‘liq nazorat bilan yaratiladi.

Amaliy misol

Storyboard usuli

@IBOutlet weak var titleLabel: UILabel!
@IBAction func didTapButton(_ sender: UIButton) {
    print("Button tapped")
}

Programmatic UI usuli

import UIKit

final class ViewController: UIViewController {
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Salom, UIKit!"
        label.font = .systemFont(ofSize: 24, weight: .bold)
        return label
    }()

    private let actionButton: UIButton = {
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Boshlash", for: .normal)
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        view.addSubview(titleLabel)
        view.addSubview(actionButton)

        NSLayoutConstraint.activate([
            titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -20),

            actionButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            actionButton.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 16)
        ])

        actionButton.addTarget(self, action: #selector(didTapButton), for: .touchUpInside)
    }

    @objc private func didTapButton() {
        print("Button tapped")
    }
}

Ko‘ryapsizmi, kod biroz uzunroq, lekin to‘liq sizning nazoratingizda. Shu yo‘l bilan siz UI tizimini to‘liq o‘rganasiz.

Xulosa

  • Storyboard — tez prototip uchun yaxshi, lekin jiddiy loyiha uchun cheklovli.
  • Programmatic UI — professional, modul, barqaror va testlash uchun qulay.
  • Katta jamoalarda va sanoat loyihalarida aynan shu yondashuv ishlatiladi.

Shuning uchun “UIKit Zero to Hero” kursida biz UI’ni to‘liq kod orqali yozamiz. Shu yo‘l bilan siz UIKit’ni ich-ichidan o‘rganasiz va SwiftUI’ni keyinchalik ancha oson tushunasiz.