Published on

SwiftUI'da custom ButtonStyle yaratish

Authors

Oddiy tugma muammosi

SwiftUI'da standart tugma yaratganda, uni bosganingizda tizim o'zining standart (biroz xira va oddiy) highlight (yorishish) effektini beradi. Ilovaning ko'rinishiga qarab, ba'zan bu bizga to'g'ri kelmaydi. Juda ko'p hollarda dasturchilar shuning uchun .onTapGesture dan foydalanishga o'tib ketishadi, chunki unda bosilish effekti bo'lmaydi. Ammo .onTapGesture bu tugma (Button) emas va tugmalarning Accessibility va maxsus imkoniyatlaridan mahrum.

Buning o'rniga, eng zo'r yechim — maxsus (Custom) ButtonStyle yozish!

ButtonStyle qanday ishlaydi?

ButtonStyle xuddi ViewModifier ga o'xshaydi, lekin u bizga hozirgi vaqtda tugma bosilganmi yoki yo'qmi degan ajoyib isPressed xususiyatini beradi. Keling, bosilganda razmeri biroz kichiklashadigan tugma stilini yozamiz:

import SwiftUI

struct PressableButtonStyle: ButtonStyle {
    // Animatsiya paytida qanchalik kichiklashishini belgilaymiz
    var scaledAmount: CGFloat = 0.9

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            // Tugma bosilsa shaffofligi pasayadi
            .opacity(configuration.isPressed ? 0.9 : 1.0)
            // Tugma bosilsa razmeri kichrayadi
            .scaleEffect(configuration.isPressed ? scaledAmount : 1.0)
            // Yoki rangini biroz oqartirish ham mumkin
            // .brightness(configuration.isPressed ? 0.05 : 0)
    }
}

Bu yerda configuration.label — bizning tugmamizning ko'rinishi (ya'ni uning ichidagi Text yoki Image). configuration.isPressed esa tugma hozir barmoq bilan bosib turilganini bildiradi.

Qulay extension yozamiz

Har safar .buttonStyle(PressableButtonStyle()) yozib o'tirmaslik uchun, xuddi avvalgi darsdagi kabi View ga qisqartma (extension) qo'shamiz:

extension View {
    func withPressableStyle(scaledAmount: CGFloat = 0.9) -> some View {
        buttonStyle(PressableButtonStyle(scaledAmount: scaledAmount))
    }
}

Natijani sinash (Oldingi dars bilan birga!)

Agar siz oldingi darsda .withDefaultButtonFormatting() degan dizayn yozgan bo'lsangiz, endi bitta kod bilan hamma narsasi tayyor "Pro" tugma olishingiz mumkin:

struct ButtonStyleBootcamp: View {
    var body: some View {
        VStack {
            Button(action: {
                // Tugma bosilganda ishlaydigan kod
            }, label: {
                Text("Click Me")
                    .font(.headline)
                    .withDefaultButtonFormatting(backgroundColor: .blue)
            })
            // O'zimiz yasagan bosilish effekti!
            .withPressableStyle(scaledAmount: 0.9)
        }
        .padding()
    }
}

Shunchaki .withPressableStyle() orqali butun dasturingizdagi tugmalarning bosilish effektini bir xil, sifatli va chiroyli holatga keltirib chiqish juda oson! Bu kabi mikro-animatsiyalar oddiy ilovani "Premium" darajaga olib chiqadigan muhim qadamlardir.

Buy mea coffee