UIKit: UIImageView

UIImageView ile uygulamalarınıza görseller ekleyebilir ve eklediğiniz görseller ile işlemler yapabilirsiniz.

Merhaba sevgili TurkishKit okuyucuları! 👋🏻 Bugün yeni bir Swift ile UIKit yazısıyla karşınızdayız, ve bu yazımızda da sizlere UIKit’in temel yapı taşlarından biri olan UIImageView elementini anlatacağım. Bu arada da UIKit hakkındaki en yeni yazımızı okumadıysanız okumanızı tavsiye ederim 😉:

Auto Layout

UIImageView Nedir?

UIImageView elementi

UIImageView, uygulamalarınızda bir görsel veya görsellerden oluşturulmuş bir animasyon gösterebilmenizi sağlayan bir UIKit elementidir. Neredeyse her uygulamada bulunan UIImageView elementi, görseller ile ilgili birçok farklı amaçla kullanılıyor.

UIImageView Elementinin Görevleri

Photos uygulamasında UIImageView

UIImageView elementinin en temel görevi bir resim göstermek olsa da, kendisi aynı zamanda her özelliğini değiştirebileceğiniz bir UIView olduğu için çok yaratıcı şekillerde kullanabilirsiniz.

Mesela Photos uygulamasında, resmi değiştirmek için kaydırabilir, resmi büyütmek için iki parmağınızla kıstırabilir, hatta Edit tuşuna tıklayarak resmin üstüne çizim yapabilirsiniz.

UIImageView Elementinin Özellikleri

UIImageView elementinin kendi içinde üç temel özelliği vardır:

• image: UIImageView elementinin kalbi olan image özelliği, UIImageView elementine görsel eklemenizi sağlar.
• highlightedImage: UIImageView elementinin “seçilebildiği” yani iki görsel arasında gidip geldiği (onay kutucuğu gibi) uygulamalarda seçili durumda kullandığınız görseli ayarlamanızı sağlar.
• isHighlighted: Eğer bir highlightedImage ayarladıysanız, bu özelliği true değerine getirmek normal görseliniz yerine highlighted görselinizin gösterilmesini sağlar.

Önceden de bahsetmiş olduğumuz gibi UIImageView elementinin gücü, aslında bir UIView olmasından geliyor; aynı şekilde de UIImageView elementinin çoğu özelliğini değiştirdiğinizde aslında altındaki UIView elementinin özelliklerini değiştiriyorsunuz.

• contentMode: Bütün özelliklerden belki de en önemlisi (image’dan sonra tabii), görselinizin UIImageView elementinin boyutlarına uymadığı zaman nasıl davranacağını belirliyor. Varsayılan mod olan Scale to Fill modu görselinizin en-boy oranını değiştirerek, yani basıklaştırarak veya incelterek, tanımlanan UIImageView alanına uyduruyor. Aspect Fit ise görseli alanın dışına taşırarak en-boy oranını koruyor, Aspect Fill de alanda boşluk bırakarak bunu sağlıyor.

UIImageView’daki görüntü oranlama modlarının bir karşılaştırması

• alpha: Bu özellik ile UIImageView elementinin şeffaflığını ayarlayabilirsiniz. İçimizdeki tasarımcılar büyük ihtimalle bu terime aşinadır 🙂
• backgroundColor: Adından da anlaşılabileceği gibi backgroundColor özelliği, UIImageView elementine bir arkaplan rengi eklemenizi sağlar. Özellikle görseliniz UIImageView elementinin içine sığmadığı zaman yardımınıza yetişecektir 😉

UIImageView Elementi Nasıl Kodlanır?

UIImageView elementini, birçok UIKit elementinde olduğu gibi hem Swift üzerinden hem de Interface Builder üzerinden kodlayabilirsiniz. Benim size önerim, basit özelliklerini değiştirmek için Interface Builder, daha gelişmiş özelliklerini değiştirmek içinse kod kullanmanız.

Örnek uygulamamızda da UIImageView elementini önce Interface Builder ile oluşturup daha sonra kodlayacağız.

UIImageView ve UIButton Elementlerini Oluşturma

Yeni bir Single View Xcode projesi açıp Main.storyboard dosyasına girdikten sonra karşımızda her zamanki gibi boş bir Storyboard olacak. Öncelikle Library menüsünden bir Image View ve bir Button elementini şekildeki gibi ekleyelim.

Örnek uygulamamızdaki elementlerin dizilişi

İpucu: Library menüsü Xcode 10'da yukarı sağda bir butona taşındı. Bu butona tıkladıktan sonra açılan menüden arayüz elementlerini Storyboard üzerine sürükleyip bırakabilirsiniz.

Xcode 10'da Library Butonu

UIImageView Elementinin Özelliklerini Ayarlama

Kodlamaya başlamadan önce, uygulamamızın içinde UIImageView’ımıza yerleştirebileceğimiz bir resim olması gerekiyor. Neyse ki bunu yapmak çok kolay: sol taraftan Assets.xcassets dosyasına tıkladıktan sonra resmimizi ortadaki boşluğa sürükleyip uygulamamızın içine yükleyebiliriz.

Örnek olarak aşağıdaki resmi kullanabilirsiniz:

Güzel bir manzara, değil mi? 🙂

UIImageView elementinin temel özelliklerini Interface Builder menüsünden ayarlayabiliriz. UIImageView’ın üstüne tıkladıktan sonra sağ taraftaki Attributes Inspector menüsünden tüm özelliklerin varsayılan değerlerde olduğunu kontrol edelim:

ImageView’ın Interface Builder’daki varsayılan değerleri

Sonra da yine aynı menüden Image seçeceğinin yanındaki oka tıklayarak eklediğimiz resim dosyasını seçelim.

UIImageView ve UIButton Elementlerini Kodlama

Kodlamaya başlamak için ilk olarak UIImageView’ımızı Outlet ile koda bağlamalıyız. Bunun için Assistant Editor’ı açıp, resmimizi seçip ctrl(^) tuşuna basılı tutarak mouse’umuzu kodun içine sürükleyelim. Bundan sonra artık Outlet’imize istediğimiz ismi verebiliriz.

Assistant Editor ile Outlet oluşturma (Kaynak: Swift ile UIKit — UIStepper)

Sonra da aynı şekilde Button’dan ctrl ile sürükleyerek (Type’tan UIButton’ı seçmeyi unutmayın!) butona dokunulduğunda kod çalıştırmamızı sağlayacak IBAction'ı oluşturalım. Örnek uygulamamızda UIImageView'ı imageView, IBAction'ımızı ise buttonTapped olarak tanımladık. Artık UIImageView'ımız üzerinde değişiklikler yapmaya başlayabiliriz!

İlk olarak buton tıklandığında çalışan IBAction fonksiyonunun içine alpha değerini değiştirerek resmi şeffaflaştıracak olan bir kod yazalım:

@IBAction func buttonTapped(_ sender: Any) {
    imageView.alpha = 0.5
}

Xcode’da sol üstteki “Oynat” tuşuna tıklayarak iOS Simulator’ı çalıştırıp uygulamadaki butona tıklayarak resmin şeffaflaştığını görebilirsiniz:

Şimdi kodumuza geri dönelim ve UIImageView’ın gücünü gösterecek küçük bir şey yapalım: resmimizin köşelerini yuvarlatalım!

Bunun için önce imageView ımızın layer özelliğini resmimizin üstüne uygulanacak şekilde ayarlayıp, sonra da layer‘ın cornerRadius özelliğini değiştirmeliyiz (evet, sadece iki satır!):

override func viewDidLoad() {
    super.viewDidLoad()
    imageView.layer.masksToBounds = true
    imageView.layer.cornerRadius = 10.0
}

Ve uygulamamız bitti!

Şimdi uygulamayı çalıştırdığımızda resmimizin kenarlarının hafifçe yuvarlatıldığını görebiliriz:

Örnek uygulamayı denemek isterseniz GitHub üzerinden kodları indirebilirsiniz:

sergendev/TurkishKit-UIImageView

Böylece UIImageView elementinin temel özelliklerini ve nasıl kullanıldığını öğrenmiş olduk! Kodladığımız basit örnekten yola çıkarak siz de UIImageView elementini kendi iOS uygulamalarınızda kullanabilirsiniz ve kendi değişikliklerinizle geliştirebilirsiniz. Hepinize iyi kodlamalar! 🖥

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz.

Twitter | Instagram | Facebook