Delege ve Protokol Kullanımı

Her iOS geliştiricinin bilmesi gereken delege ve protokol kullanımı konusu🔥

Ön Bilgi

İnternette “What is protocol in Swift programming” diye arattığımızda başta Apple Guide olmak üzere birçok tutorial da bir blueprint ifadesi geçiyor.

A protocol defines a blueprint of methods, properties, and other requirements that suit a particular task or piece of functionality. The protocol can then be adopted by a class, structure, or enumeration to provide an actual implementation of those requirements. Any type that satisfies the requirements of a protocol is said to conform to that protocol.

Ben de blueprint ifadesi üzerinden gideceğim çünkü gerçekten en güzel öyle anlaşılıyor.

Protokol Nedir?

Business_13-NetworkYazılım geliştirme alanında blueprint ifadesini bir checklist gibi düşünebiliriz. Blueprint bizim için uymamız gereken kurallar kümesi anlamını taşımış oluyor.

Mesala sınıfa bir yapı dahil ediyoruz ama bunu yaparken bazı kurallara dikkat etmemiz gerekiyor çünkü bir superclass dan inherit etmiş oluyoruz.

Protokoller de tam olarak böyle bir yapı.

Protokolü metodlarla kullandığımızı varsayalım. Bu durumda protokolü çağıran sınıfa o metodların mutlaka ama mutlaka kullanılması gerektiğini dikta ediyor.

Protokoldeki metodlar “required” tanımlandıysa kullanılması mecburidir. Eğer “Optional” ise kullanmak zorunda değiliz. Karışıklığı önlemek için bütün protokol metodlarının required olduğunu varsayalım.

Yani,

“Metodların içine ne yazarsan yaz umrumda değil ama o fonksiyonlar çağırılacak. ‼️⁉️”

diyor.

Analoji kullanmak gerekirse şöyle anlatabiliriz:

Eğer İnsan olmak istiyorsan kod yazmalısın, et yemelisin ve kahve içmelisin. iOS veya ObjectiveC yazman umrumda değil, kod yazacaksın.

Et yiyeceksin: Antrikot mu yoksa gerdan mı seviyorsun o sana kalmış.

Kahve içeceksin: İster şekerli iç, ister şekersiz…

Zaten protokol ismi de günlük hayattaki kullanılış amacından geliyor.

Başta yetkili bir insan veya bir kurum var ve onun yetkilendirdiği bir protokol var. Bu delegeler üstündeki kişi veya kurumu temsil ediyor ve gittiği yerde onun yerine aksiyon alıyorlar.

Aynı günümüzdeki sendikalar gibi…

sendika.jpg

 

Yani durumu şöyle özetleyebiliriz.

Protokol: Yapılacaklar kümesi

Delegate: Listedeki görev/görevlerden sorumlu kişi

Protokol Ne İşe Yarar

Delegate ve Protokol yapıları Communication Patterns konusu içinde yer alır. Temelde ViewController lar arasında iki yönlü iletişim kurmamızı sağlar.

ViewController ların birbiri ile iletişim kurmasının temelde 2 yolu vardır:

  • Delegate & Protokol
  • Notification & Observer

Biz bu derste Delegate ve Protokol yapısını ele alıyoruz, notification ve observer konusunu daha sonra anlatacağız inşallah 🙏

Bildiğimiz gibi ileri yönlü veri göndermek istediğimiz zaman prepareForSegue yapısını kullanıyoruz.

prepareforsegue.png

Bu iş zaten kolay çünkü veriyi 2. sahne yaratılırken gönderiyoruz.

Peki ya 2. sahneden 1. sahneye veri göndermek istiyorsak?

prepareforsegue-2.png

 

O zaman prepareForSegue işimize yaramıyor çünkü prepareForSegue metodunu geriye dönük kullanamıyoruz.

Yani, kullanırız kullanmasına ama 2. VC (ViewController) den 1. VC ye segue oluşturmamız gerekir.

Bunu yaptığımızda ise her 1. ekrana döndüğümüzde bunun kopyasını oluşturmuş oluyoruz.

Bu da %99 koşulda istemediğimiz bir durum.

Asıl ViewController’a geri dönüş ile ilgili yazdığım Önceki ViewController’a Dönmek yazıma göz atabilirsiniz.

Biz 1. VC nin orijinal haline veri göndermek istiyoruz. Dolayısıyla bunu protokol ve delagate kullanarak yapmamız gerekiyor.

 

Delegate ve protokolün ne olduğunu, ne işe yaradığını anladık.

Peki nasıl kullanacağız? Sıra buna gelelim…

 

Protokol Nasıl Kullanılır

Lafı uzatmadan hemen kod kısmına geçelim, zaten yeterince konuştuk 😬

Örnek uygulamamızda 2 tane ViewController olacak. 1. ekrandan 2. ekrana geçeceğiz ve 2. ekrandaki seçimimizi 1. ekrana geri yönlü gönderip bunu ekrana yansıtacağız.

Başlıyoruz. 🔥🔥🔥

 

UI Dizaynı

SingleView bir proje yaratalım.

Bir ViewController zaten var, bir tane daha oluşturalım ve bunlara arkaplan rengi verelim:

Screen Shot 2018-09-22 at 3.43.52 PM.png

 

2. ekran için ViewController yaratıp sahnenin sınıfını tanımlayalım.

Screen Shot 2018-09-22 at 6.04.26 PM.png

Screen Shot 2018-09-22 at 6.05.01 PM.png

 

1. ekrana bir ImageView ve bir Button yerleştirelim.

1.gif

 

Ve constraint ekleyelim.

2.gif

 

ImageView için IBOutlet bağlantısı oluşturalım ve Attributes Inspector’dan content modu aspect fit diyelim, yoksa resmin en-boy oranı bozulur.

Screen Shot 2018-09-22 at 10.20.13 PM.png

 

Ayrıca buton ile 2. ekrana geçerken 1. ve 2. ekrandaki iletişimi kimin sağlayacağını belirtmemiz gerekiyor.

prepareForSegue yapısı ile 2. ekrana geçmeden hemen önce delegenin self, yani şu an bulunduğumuz sınıfın olduğunu belirtelim.

 

Bir şeyi self değerine eşitlerseniz bulunduğunuz ViewController’a şunu demiş olursunuz: “Bundan sonra bunla sen ilgileneceksin, bu senin sorumluluğun”.

 

Şimdi butonu 2. ekrana geçiş yapmak için kullanalım. Bunun için present modal türünde segue yaratalım.

Butonun yazısını ve puntosunu değiştirirseniz daha güzel olur. Ben kısaca “Geç” dedim.

3.gif

 

Segue için identifer tanımlayalım, prepareForSegue metodu içinde kullandığımız isimle aynı olmasına özen gösterelim.

Screen Shot 2018-09-22 at 11.41.45 PM.png

 

Şimdi ikinci sahneye geçelim ve 2 tane ImageView yaratalım, constraint vermeyi unutmayalım.

5.gif

 

Objeyi Control + D (Duplicate) yaparak kopyalıyoruz. Ayrıca her ImageView in Content Mode ayarını “Aspect Fit” yaparsanız resmin çözünürlüğü bozulmaz.

Screen Shot 2018-09-22 at 5.51.58 PM.png

 

ImageView leri StackView içine alalım.

6.gif

 

StackView e constraint verelim.

Screen Shot 2018-09-22 at 6.45.13 PM.png

Ekranın ortasına yerleştirir

7.gif

 

StackView seçiliyken aralarında 10 birim boşluk olacağını belirtelim ve Fill Equally seçeneğini seçelim. Eğer seçmezsek bir ImageView bütün alanı kaplar, dikkat edelim.

Screen Shot 2018-09-22 at 6.43.45 PM.png

 

ViewController sınıfını Assistant Editor ile (Command + Option + Enter) açalım ve IBOutlet bağlantılarını yapalım.

8.gif

 

ImageView leri dokunmaya hassas hale getirelim. Birazdan bunlara gesture ekleyerek aksiyon almalarını sağlayacağız.

Bunun için User Interaction ayarını açık konuma getirmemiz gerekiyor. İki ImageView için de aynı ayarı yapın.

9.gif

 

Şimdi her ImageView üzerine bir tap gesture sürükleyelim.

10.gif

 

Amacımıza yaklaşıyoruz…

Şimdi internetten 2 adet et fotoğrafı bulup ve Asset klasörüne sürükleyelim.

Screen Shot 2018-09-23 at 12.24.20 AM.png

⚠️⚠️ Sadece et resmi ile çalışır, başka resim denemeyin bile.

 

SecondVC sınıfını açalım ve resimleri ImageView içinde kullanalım. Tabiki bunları viewDidLoad metodu içinde yapıyoruz.

 

Eğer projeyi bu haliyle çalıştırırsak, şunu göreceğiz:

12.gif

 

Güzel gidiyoruz…

 

Biz ise seçtiğimiz eti önceki sahneye gönderip ve bulunduğumuz ekranı kapatmak istiyoruz. Daha sonra bu resmi ilk ekranımızda göstereceğiz.

Şimdi protokol yazma zamanı geldi… 🤓

 

SecondVC sınıfına gelelim ve UIKit kütüphanesini import ettiğimiz yerin hemen altına protokolümüzü yazalım.

 

Ne demiştik? Protokol neyin nasıl kullanılacağının listesini tutuyor.

Protokolü SecondVC içinde yazıyoruz çünkü delegeleri bu sınıf içinde görevlendireceğiz.

Bu protokolün içine yazdığımız tüm delege metodlarını, değişkenleri vs protokolü çağıran sınıfın implement etmesi gerekiyor.

Bu derste protokol içine sadece 1 adet required metod yazacağız. Protokol içinde yazacağımız metodun sadece ismini ve alacağı parametreleri belirtiyoruz.

Fonksiyon içini burada doldurmuyoruz, burada sadece tanımlıyoruz, dikkat edelim.

Şimdi seçtiğimiz resmi 1. ekrana taşıyacak bir delege metodu yazalım.

Bu metodu protokol içinde belirttik. Yani protokol şu an böyle oldu:

 

Protokolü kullanmak için bunu bir değişkene atamamız gerekiyor. Değişken tanımlayalım:

Protokol içindeki delegate fonksiyonlarını delegate.delegateFonksiyonu şeklinde kullanacağız.

Bu delege metodunu bazı aksiyonlar alarak doldurmak istiyoruz. Bu aksiyonları Tap Gesture Recognizer ile yaratacağız.

Bunun için resimlere daha önce tap gesture ekledik ki resme dokunduğumuzda istediğimiz aksiyonu alsın.

Bu tap gesture lar sahnenin hemen üstünde sırasıyla gözükecek. Hangi gesture ın hangi ImageView’e bağlı olduğunu karıştırırsanız gesture a sağ tıklamanız yeterli. Orada bağlantıları gösterir.

Şimdi iki gesture için ayrı ayrı aksiyon yaratalım.

tap.gif

 

firstTapped fonksiyonu dönere dokunduğumuzu, secondTapped fonksiyonu ise kokoreçe dokunduğumuzu ima ediyor.

O zaman fonksiyonların içini şekildeki gibi dolduralım:

Neler yaptık?

Buraya kadar ne yaptık?

  • Protokol yazdık ve içinde bir metod kullanacağımızı belirttik.
  • Protokol metoduna erişebilmek için protokolAdı tipinde bir değişken yarattık.
  • İlgili fonksiyonlarda bu metodun içini doldurduk ve sahneyi dismiss ettik.

 

Artık yapmamız gereken çok basit. 1. ekrana geri döneceğiz ve seçtiğimiz yemeği ekranda göstereceğiz.

Hemen 1. ekrana dönelim ve bu protokolü sınıfımıza extend edelim.

protocol.gif

 

Ekler eklemez Xcode şikayet edecek ☹️

Screen Shot 2018-09-22 at 7.26.35 PM.png

 

Niye? Çünkü hatırlarsanız protokole bir tane metod yazmıştık. Bu metodu henüz kullanmadığımız için uyarı veriyor.

Fix diyelim.

Xcode bu metodu sınıfa dahil etti.

 

Son Dokunuşlar…

chujJdF__400x400.jpg

Yapacağımız son hareket etin üstüne inceden tuz serpiştirmek 😋

 

Hatırlarsanız 2. VC nin aksiyonlarında mealName parametresine duruma göre döner veya kokoreç göndermiştik.

mealName şu anda bu değeri tutuyor. O zaman anasayfaki ImageView içine bu resmi basalım.

 

 

 

 

Her şey tamam, şimdi projeyi çalıştırma zamanı 💻

final 2.gif

 

Sonuç

Biraz uzun bir yazı oldu ama istediğimizi yaptık 💪 Delege ve Protokol Kullanımı dersinde tanım yaptık, ne işe yaradığını söyledik ve örnek uygulamasını kodladık.

 

Yazıyı beğendiyseniz bi kokoreç ısmarlarsınız artık… Döner de olur 😁

Ya da sitemizi takipte kalıp sosyal mecralarda paylaşın, hangisi kolayınıza gelirse 🙄

 

Projenin kaynak koduna iOS Notları – Github sayfasından ulaşabilirsiniz.

 

İyi kodlamalar 💻

 

2
Kimler Neler Demiş?

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
En Yeniler Eskiler Beğenilenler
Bildir
trackback

[…] & Protokol beraber kullanıldığında geriye dönük veri alışverişi yapabilmemizi sağlar. Delege ve Protokol Kullanımı dersine bakmanızı tavsiye ediyorum […]

trackback

[…] Modal ile oluşturduğunuz sahneye geriye dönük veri paylaşımı nasıl öğrenmek istiyorsanız Delege ve Protokol Kullanımı dersine […]