SwiftUI: mask()
Uygulamanızdaki View‘ları birbirleriyle maskeleyerek sadece bir kısmının görünmesini sağlayın!
Herkese merhaba! Bu yazıda, bir View‘un sadece başka bir View ile ortak olan piksellerinin gösterilmesini sağlayan mask “modifier”ından bahsedeceğim.
Aynı işlemin UIKit versiyonu için aşağıdaki makaleyi takip edebilirsiniz:
Bir iOS projesi oluşturarak başlayalım. Projenin adı için “Mask”ı kullanabilirsiniz.
Şimdi, internetteki bir URL aracılığıyla uygulamaya görüntü eklemek için bu sene tanıtılan AsyncImage‘ı kullanacağız.
Bu eleman hakkında daha fazla bilgi için aşağıdaki makaleye göz atabilirsiniz:
Aşağıdaki kodu projeye ekleyelim:
AsyncImage(url: URL(string: “https://source.unsplash.com/random")) { image in
image.resizable()
} placeholder: {
ProgressView()
}.frame(width: 300, height: 300)Burada kod hata verirse, projenin ayarlarına gelerek hedef sürümü iOS 15.0 (veya üstü) olarak değiştirin.
Artık Unsplash’den alınan rastgele bir resim, uygulamamızda gösteriliyor. Şimdi yapmak istediğimiz şey, kullanılan görseli TurkishKit yazısının arkasında maskelemek.
Bunun için aşağıdaki “modifier”ı AsyncImage‘ın sonuna ekleyelim.
.mask {
Text("TurkishKit")
.font(.largeTitle)
.fontWeight(.black)
}
İstediğimiz görüntüye kısa bir sürede ulaştık.
Bu şekilde bazı karışık arayüz elemanlarını oldukça kolay bir şekilde kodlayabilirsiniz.
Üstteki yöntemle metinlerin yanı sıra, görselleri de birbirinin üzerine maskeleyebilirsiniz. Örneğin aşağıda, internetten rastgele alınan görsel, TurkishKit logosu şeklinde gösteriliyor.
Kod ise aşağıdaki şekilde:
.mask {
Image("TKLogo")
.resizable()
.frame(width: 300, height: 247)
}.mask() “modifier”ı hakkında bilmeniz gereken her şey bu kadardı. Bir sonraki makalede görüşmek üzere!
