UIKit: ImageView Maskeleme
UIImageView elemanının arka planına görsel ekleyip, eklediğiniz görsele göre maskeleme işlemleri yapabilirsiniz.
Merhaba TurkishKit okuyucuları.👋 Bu yazımızda sizinle “UIImageView” elemanı ile maskeleme işleminin nasıl yapılacağını öğreneceğiz. Hiç vakit kaybetmeden başlayalım! 😊
Projemize başlamadan önce UIImageView dersimizi henüz okumadıysanız okumanızı öneririz!😀
Hadi Kodlayalım
Kodlamaya başlamak için ilk önce bir “Single View App” oluşturalım. Uygulama dosyalarımızı oluşturduktan sonra “Storyboard” dosyamıza tıklayalım.
“Storyboard” dosyasının içerisinde bulunan “ViewContoller” arayüzüne bir tane “UIImageView” elemanı ekleyelim.
Eklediğimiz “UIImageView” elemanımızı kod bloğumuza bağlayalım.
Görselleri Ekleme
Maskeleme işleminde kullanılacak olan görselin formatının .png olmasına dikkat edin. Görsellerimizi Xcode içerisindeki “Assets.xcassets” klasörüne sürükle bırak yaparak ekleyelim.
Görsellerimizi “Assets.xcassets” klasörüne ekledikten sonra “Storyboard” dosyamıza gelelim. “UIImageView” elemanının üzerine tıklayalım ve “Attributes Inpector” sekmesinden görselimizi seçelim.
Artık uygulamamızın tasarımını bitirdik. Şimdi gelelim kodlamaya. İlk olarak kod bloğumuzda “UIImageView” sınıfından bir değişken oluşturalım.
Daha sonra viewDidLoad() fonksiyonun içerisine gelelim.
Oluşturduğumuz “maskView” değişkenimize görselimizi atayalım. Bunun için “Image Literal” yapısından yararlanacağız.
“Image Literal” yapısından yararlanırken otomatik düzeltmeden yararlanmamız gerekiyor. Bu işlemi yapmak çok basit. “Image Literal” yazarken Xcode uygulaması zaten bizim için bir düzeltme önerecek. Önerdiği düzeltmenin üzerine tıklayalım.
“Image Literal” yapısını ekledikten sonra görsel ikonu göreceksiniz. Bu görsel ikonuna iki kez tıkladıktan sonra “Assets” klasörüne eklediğimiz görselleri görebilirsiniz. 😇
Bu işlemi “Image Literal” yapısını kullanmadan kod ile yapabilirsiniz.
Maskeleme görevinde kullanılacak olan görselimizi ekledik.
Şimdi diğer görselimize(logoImageView) maskeleme işlemini uygulayalım.
viewDidLoad() fonksiyonunun hemen altına aşağıdaki fonksiyonu yazalım.
Bu fonksiyonu yazmamızın sebebi “maskView” değişkeninin “frame” ayarlarında değişiklik yapacağız ve yapılan değişikliğin uygulamamızda düzgün çalışmasını sağlamak için viewDidLayoutSubviews() fonksiyonunu kullanacağız.
“viewDidLayoutSubviews()” fonksiyonunun içini dolduralım.
Frame: View elemanının bir üst view elemanı içerisindeki origin (x, y) size(width, height) sistemine göre lokasyonunu ve boyutlarını belirtir.
Bounds: View elemanının kendi içerisindeki origin (x, y) size(width, height) sistemine göre lokasyonunu ve boyutlarını belirtir.
“viewDidLayoutSubviews()” fonksiyonumuzu da yazdığımıza göre uygulamamızı bitirmiş oluyoruz. Hadi gelin test edelim!😎
Bir yazımızın daha sonuna geldik! Bu yazımızda bir görseli bir diğer görsele göre maskelemeyi öğrendik. Bir sonraki yazımızda görüşmek dileğiyle.👋 Keyifli kodlamalar!🤗
Projemizin kodlarına aşağıdaki linkten ulaşabilirsiniz!
