İçeriğe geç

SwiftUI ile Custom Alignment Guides oluşturmak

Merhabalar bu yazımda SwiftUI ile birlikte nesnelerin bir birleri arasındaki düzeni ayarlamak için kullanılan alignmentGuide işlevinin custom olarak kullanımını paylaşacağım.

Bir önceki yazımda bahsettiğim yapının detaylarına bu yazıda girmeyeceğim. Farklı yapılar için  düzenli bir şekilde kullanımı sağlayan custom alignment üretebilirsiniz. Bu işlem için VerticalAlignment veya ilgili sınıfa extension olarak AlignmentID protokolünü eklediğiniz bir sınıf yazıp buradaki fonksiyon içerisine ekleme yapmak.

Aşağıda yazdığım örneği inceleyebilirsiniz.

extension VerticalAlignment {
    struct CustomAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            return context[VerticalAlignment.center]
        }
    }
    
    static let customAlignment = VerticalAlignment(CustomAlignment.self)
}
struct CustomText: View {

    var text: String

    var body: some View {
        Text(text)
            .padding(EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8))
            .overlay(
                RoundedRectangle(cornerRadius: 16)
                    .stroke(Color.blue, lineWidth: 1)
        )
            .font(.headline)
            .foregroundColor(Color.black)
            .padding(EdgeInsets(top: 12, leading: 0, bottom: 0, trailing: 0))
    }
}
struct ContentView: View {
    var body: some View {
        HStack(alignment: .customAlignment) {
            Image(systemName: "star.circle.fill")
                .font(.system(size: 24))
            VStack(alignment: .leading) {
                CustomText(text: "iPhone")
                CustomText(text: "Mac")
                    .alignmentGuide(.customAlignment) { $0[VerticalAlignment.center] + 6 }
                CustomText(text: "iPad")
                CustomText(text: "iWatch")
            }
        }
    }
}

 

 

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