Published on

SwiftUI-da tugma stillari, chegara shakllari va o'lchamlari (iOS 15)

Authors

Bu videoda iOS 15 da SwiftUI-ga qo'shilgan yangi tugma stillari (ButtonStyle), o'lcham sozlash (controlSize) va chegara shakli (buttonBorderShape) bilan tanishamiz. Apple bizga tayyor tugma ko'rinishlarini bermoqda — ko'p hollarda endi qo'lda background, cornerRadius va padding yozish shart emas.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni ButtonStylesBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

Standart tugma ko'rinishi

struct ButtonStylesBootcamp: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Tugma sarlavhasi") {}
                .frame(maxWidth: .infinity)
                .frame(height: 55)
                .font(.headline)
        }
        .padding()
    }
}

Standart holatda tugma matn rangi accent color (ko'k) bo'ladi.

ButtonStyle — tayyor tugma stillari

iOS 15 da to'rtta yangi tayyor stil mavjud:

VStack(spacing: 20) {
    // Rangsiz — oddiy matn
    Button("Plain") {}
        .buttonStyle(.plain)

    // Chegara va fon bilan
    Button("Bordered") {}
        .buttonStyle(.bordered)

    // To'liq rangli fon — eng ko'zga ko'ringan
    Button("Bordered Prominent") {}
        .buttonStyle(.borderedProminent)

    // Chegarasiz — standart holatga o'xshash
    Button("Borderless") {}
        .buttonStyle(.borderless)
}
.padding()
StilKo'rinishi
.plainShunchaki matn, accent rangsiz
.borderedAccent rang + kulrang fon
.borderedProminentAccent rang fon + oq matn
.borderlessAccent rangli matn, fonsiz

Accent rangini o'zgartirish

Bu stillar ilovaning accent color-iga bog'liq. Assets.xcassets ichida accent rangni o'zgartirish barcha tugmalarga ta'sir qiladi.

Yoki alohida tugmaga .tint() qo'shish mumkin:

Button("Tugma") {}
    .buttonStyle(.borderedProminent)
    .tint(.green)

Qora rejim (dark mode) da ham bu stillar avtomatik moslashadi — fon rangi tizim muhitiga qarab o'zgaradi.

controlSize — tugma o'lchami

.controlSize() modifier tugmaning standart o'lchamini belgilaydi:

VStack(spacing: 20) {
    Button("Katta") {}
        .buttonStyle(.borderedProminent)
        .controlSize(.large)

    Button("Oddiy") {}
        .buttonStyle(.borderedProminent)
        .controlSize(.regular)

    Button("Kichik") {}
        .buttonStyle(.borderedProminent)
        .controlSize(.small)

    Button("Mini") {}
        .buttonStyle(.borderedProminent)
        .controlSize(.mini)
}

.controlSize() tugmaning label-iga ta'sir qiladi, butun frame-iga emas. Shuning uchun frame-ni label ichiga qo'yish tavsiya etiladi (quyida ko'rsatilgan).

Frame-ni to'g'ri joylashtirish

controlSize bilan birga custom frame ishlatmoqchi bo'lsangiz, frame-ni label ichiga qo'ying:

// ❌ Noto'g'ri — frame tugma tashqarisida
Button("Tugma sarlavhasi") {}
    .frame(maxWidth: .infinity, minHeight: 55)
    .buttonStyle(.borderedProminent)

// ✅ To'g'ri — frame label ichida
Button(action: {}) {
    Text("Tugma sarlavhasi")
        .frame(maxWidth: .infinity, minHeight: 55)
}
.buttonStyle(.borderedProminent)

Frame label ichida bo'lganda buttonStyle unga to'g'ri qo'llanadi.

buttonBorderShape — chegara shakli

.buttonBorderShape() modifier burchak shaklini belgilaydi:

VStack(spacing: 20) {
    // Kapsul shakli — to'liq yumaloq burchaklar
    Button("Kapsul") {}
        .buttonStyle(.bordered)
        .buttonBorderShape(.capsule)

    // Standart yumaloq burchak
    Button("Rounded Rectangle") {}
        .buttonStyle(.bordered)
        .buttonBorderShape(.roundedRectangle)

    // Maxsus radius bilan
    Button("Maxsus radius") {}
        .buttonStyle(.bordered)
        .buttonBorderShape(.roundedRectangle(radius: 20))
}

To'liq kod

struct ButtonStylesBootcamp: View {
    var body: some View {
        VStack(spacing: 20) {
            Button(action: {}) {
                Text("Plain")
                    .frame(maxWidth: .infinity, minHeight: 55)
                    .font(.headline)
            }
            .buttonStyle(.plain)

            Button(action: {}) {
                Text("Bordered")
                    .frame(maxWidth: .infinity, minHeight: 55)
                    .font(.headline)
            }
            .buttonStyle(.bordered)

            Button(action: {}) {
                Text("Bordered Prominent")
                    .frame(maxWidth: .infinity, minHeight: 55)
                    .font(.headline)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            .buttonBorderShape(.roundedRectangle(radius: 10))

            Button(action: {}) {
                Text("Borderless")
                    .frame(maxWidth: .infinity, minHeight: 55)
                    .font(.headline)
            }
            .buttonStyle(.borderless)
        }
        .padding()
    }
}

Xulosa

Bu videoda o'rgandik:

  • .buttonStyle(.plain) — rangsiz, shunchaki matn
  • .buttonStyle(.bordered) — accent rang + kulrang fon
  • .buttonStyle(.borderedProminent) — to'liq rangli fon + oq matn
  • .buttonStyle(.borderless) — chegarasiz, standart ko'rinish
  • .controlSize() — .large, .regular, .small, .mini
  • .buttonBorderShape() — .capsule, .roundedRectangle, .roundedRectangle(radius:)
  • Frame-ni label ichiga qo'yish kerak — shunda buttonStyle to'g'ri ishlaydi
  • Bu stillar qora rejimda avtomatik moslashadi

Ko'p hollarda shu tayyor stillar yetarli. Lekin maxsus dizayn kerak bo'lsa, qo'lda sozlash hali ham eng to'g'ri yo'l.

Rahmat tomosha qilganingiz uchun! Keyingi videoda ko'rishamiz!

Buy mea coffee