İçeriğe geç

SwiftUI ile Encapsulating styles

Merhabalar bu yazımda SwiftUI ile nesnelerin tasarımlarını ve aksiyonlarını daha temiz ve generic kullanmak için yapmanız gerekenleri paylaşacağım.

iOS uygulama geliştirirken en önemli konulardan biride tasarımlarda tekrar kod yazmamak ve aynı şeyleri fazladan yapmamak için generic custom celler veya view nesneleri oluşturuyor daha sonra bunu uygulamanın farklı yerlerinde kullanıyorduk. SwiftUI ilede tekrarlı tasarımları, nesneleri (button, label, navigation, tab vs) generic olarak yazıp kullanmamız en doğrusu olacaktır.

Aşağıda kapsülleme ile örnek olarak button nesnesini farklı yollarda kullanmayı paylaşacağım. SwiftUI ile tasarımları her view için sürekli alt alta yazmak sayfamızın kodunu gereksiz bir şekilde uzatacaktır. Bu yüzden kapsülleme yöntemi ile gerekli nesneleri oluşturmak bize tasarruf ve okunaklı bir kod yazmamızı sağlar. SwiftUI ile amaç aslında modüler olarak parçaları birleştirerek uygulama geliştirmektir. Örnek olarak navigation, content ve tab nesnelerini aynı sayfada değil 3 farklı View yazarak tek sayfada çağırmak daha doğru bir yöntemdir.

İlk olarak klasik bir şekile View içerisinde yazdığımız bir Button

struct ContentView: View {
    var body: some View {
        Button("Show", action: {})
            .foregroundColor(.white)
            .font(Font.body.bold())
            .padding(10)
            .padding(.horizontal, 20)
            .background(Color.blue)
            .cornerRadius(10)
    }
}

Bu Button nesnesini Custom bir View yazarak oluşturalım.

struct ContentView: View {
    var body: some View {
        RegisterButton(title: "Show") {
            print("Hello :)")
        }
    }
}
struct RegisterButton: View {
    var title: String
    var action: () -> Void
    
    var body: some View {
        Button(title, action: action)
            .foregroundColor(.white)
            .font(Font.body.bold())
            .padding(10)
            .padding(.horizontal, 20)
            .background(Color.blue)
            .cornerRadius(10)
    }
}

Extension yardımı ile configure edelim.

struct ContentView: View {
    var body: some View {
        Button("Show") {
            print("Hello :)")
        }
        .setupActionButton()
    }
}
extension Button {
    func setupActionButton() -> some View {
        self
            .foregroundColor(.white)
            .font(Font.body.bold())
            .padding(10)
            .padding(.horizontal, 20)
            .background(Color.blue)
            .cornerRadius(10)
    }
}

Custom bir ButtonStyle yazarak farklı button tasarımlarını buttonlara ekleyebiliriz.

struct ContentView: View {
    var body: some View {
        Button("Show") {
            print("Hello :)")
        }
        .buttonStyle(NormalButtonStyle())
    }
}
struct ActionButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .font(Font.body.bold())
            .padding(10)
            .padding(.horizontal, 20)
            .background(Color.blue)
            .cornerRadius(10)
    }
}

struct NormalButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .padding(10)
            .padding(.horizontal, 20)
            .background(Color.gray)
            .cornerRadius(20)
    }
}
Tarih:SwiftUI

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2020 Kenan Atmaca