İçeriğe geç

SwiftUI ile overlay kullanımı

Merhabalar bu yazımda SwiftUI ile overlay fonksiyonunun kullanımından bahsedeceğim.

Bir önceki yazımda bahsettiğim .mask fonksiyonuna benzer olarak oluşturduğunuz view üzerine kaplama işlemi yapar. Yani basit bir örnek vermek gerekirse oluşturduğunuz Image nesnesi üzerinde Text kaplaması yapabilirsiniz. Veya bir Image nesnesine border ekleme işlemi gerçekleştirebilirsiniz.

Aşağıda verdiğim örnekleri inceleyebilirsiniz.

struct TestView:View {
    
    var body: some View {
        MaskImageView()
            .frame(width: 200, height: 200, alignment: .center)
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .overlay(TextInfoView(text: "STAR").foregroundColor(.white), alignment: .bottom)
            .shadow(color: Color.black.opacity(0.6), radius: 10, x: 2, y: 2)
    }
}
struct MaskImageView:View {
    
    var body: some View {
        Image(systemName: "sparkles")
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .font(.system(size: 70))
            .foregroundColor(.white)
            .background(Color.init(.orange))
    }
}
struct TextInfoView:View {
    
    var text:String
    
    var body: some View {
        Text(text)
            .font(.headline)
            .offset(x: 0, y: -14)
    }
}

Bunun dışında diğer bir örneğide sizlerle paylaşayım.

struct TestView:View {
    
    var body: some View {
        MaskImageView()
            .background(Color.init(.black))
            .frame(width: 200, height: 200, alignment: .center)
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.red, lineWidth: 10))
    }
}
struct MaskImageView:View {
    
    var body: some View {
        Image(systemName: "heart.circle.fill")
            .frame(width: 200, height: 200, alignment: .center)
            .font(.system(size: 70))
            .foregroundColor(.white)
    }
}

 

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