Published on

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

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu β€” Swiftful Thinking kanali.

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! Men β€” Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee