iOS TableView Kullanımı

Merhaba Arkadaşlar,
mobilhanem.com da iOS Uygulama Geliştirme eğitim serimize kaldığımız yerden iOS Table View dersi ile devam ediyoruz. Bir önceki derste iOS Tab Bar Kullanımı ve Örnekleri konusunu işledik. Table View’lar bugüne kadar kullandığınız birçok uygulamada karşınıza çıkan ve iOS uygulamalarımızı geliştirirken de sıklıkla kullanacağımız bir yapıdır. Uygulamalarınızı geliştirirken sıklıkla kullanacağınız bu temel yapıyı gelin hep beraber derinlemesine inceleyelim.

Aşağıdaki resimde benim de kendi uygulamalarımda sürekli olarak kullandığım table view’a ait bir örneği görebilirsiniz.

Üstteki resimde oklarla işaretlediğim UINavigationController dersini önceki derslerimizde inceleme fırsatı bulmuştuk. Şimdiyse UITableViewController konusunu detaylı olarak anlatacağım.

UITableViewController sıklıkla aşağıdaki bileşenlerden oluşur.

• Table View, kullanıcının liste ekranını gördüğü ekranın tamamıdır. UITableView sınıfının bir oluşumudur.
• Table View Cell, Table View’a ait tekrar eden satırlardur. Table View Cell ise UITableViewCell sınıfının bir oluşumudur.

Ayrıca UITableViewController oluşturulurken perde arkasında, kullanıcı etkileşimini ve arayüzünü sağlayan bir kısım delegate metodları bulunmaktadır.

• UITableViewDelegate table view’a ait görüntünün ve kullanıcı etkileşimlerini yönetir. Örnek vermek gerekirse table view üzerinde bir cell seçildiğinde ya da sağa & sola kaydırıldığında bu delegate metodları table view’ın bilgilendirilmesine yardımcı olur.
• UITableViewDataSource table view üzerinde görüntülenecek verinin bölümlerinden (section) ve bu bölümlerin satır sayısına (row) gerekli düzenlemeleri yapan metodları içerir.

Table View Kurulumu

Bu kadar teorik bilgi yeter bu teorik bilgiyi biraz da pratiğe dökelim dediğinizi duyar gibiyim haydi gelin başlayalım. Bu bölümde basit bir table view controller oluşturup simülatörümüzde görüntüleyeceğiz.

İlk olarak daha önceki derslerimizde anlattığımız gibi yeni bir Xcode projesi oluşturalım.

Ardından oluşturduğumuz bu projenin Main.storyboard dosyası içine gelelim ve elimizdeki view controller içerisine bir table view ekleyelim.

Ardından oluşturduğumuz bu table view’ın IBOutlet‘ini oluşturup bağlayalım.

Uygulamamızı bu haliyle Command–R tuşlarına basarak çalıştırdığımızda ise göreceğimiz şey boş bir table view. Henüz herhangi bir kodlama yapmadığımızdan ötürü bir şey gözükmemesi gayet normal ama birazdan kendi telefon rehberimizi oluşturup, görüntüleyip üzerinde işlemler yapacağız.

UITableViewDataSource Metodlarının Implement Edilmesi

Daha önce yukarıda bahsettiğim UITableViewDataSource metodlarını implement ettiğimiz takdirde Table View’ımızın içini doldurabiliriz. UITableViewDataSource’a ait önemli metodlar ise şöyle;

• numberOfSections(in:)
• tableView(_:numberOfRowsInSection:)
• tableView(_:cellForRowAt:)

Hadi bu metodları kullanarak telefon rehberimizi oluşturmaya başlayalım. Ben örnek uygulamada kullanmak üzere aşağıdaki gibi Türk Bilim İnsanlarının bir arrayini oluşturdum. Siz de isterseniz bu listeyi kendinize göre değiştirebilir ya da aynen kullanabilirsiniz.

    let scientists: [String] = ["Ali Kuşçu",
                                "Aziz Sancar",
                                "Cahit Arf",
                                "Piri Reis",
                                "Katip Çelebi",
                                "Hezarfen Ahmet Çelebi",
                                "Farabi",
                                "Feza Gürsoy",
                                "Katip Çelebi",
                                "Piri Reis",
                                "Akşemsettin",
                                "Ali Erdemir",
                                "Hulusi Behçet",
                                "Oktay Sinanoğlu",
                                "Celal Şengör","Afet İnan",
                                "Behram Kurşunoğlu",
                                "Tahsin Özgüç",
                                "Mehmet Öz",
                                "Şerif Mardin"]

Sıra bilim insanlarımızı her bir table view cell içine yerleştirmeye geldi. Bunun için biraz önce Table View‘ı eklediğimiz Main.storyboard’u açalım. Ardından Table View’ı seçiliyken Xcode’un sağındaki resimdeki gibi Attributes Inspector’u açalım.

Burada gördüğümüz seçeneklerde Table View’a ait özellikleri değiştirip görünümüyle alakalı değişiklikler yapabiliriz. Ancak şimdi önceliğimiz listemizde isimleri göstermek olduğu için aşağıdaki resimdeki gibi Prototype Cell bölümünü 1 yapalım.

Şimdiyse oluşturduğumuz bu prototip table view cell’e benzersiz bir değer vermemiz gerekiyor. Bunun için table view içinde oluşan cell’e aşağıdaki gibi tıklıyoruz ve benzersiz bir tanımlayıcı değeri veriyoruz. Ben bu benzersiz tanımlayıcıyı scientistCell olarak belirledim.

UITableViewDataSource ve UITableViewDelegate metodlarını kullanabilmemiz için gerekli delegation’ları aşağıdaki gibi viewDidLoad() metodu içine ekleyelim.

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

numberOfSections(in: ) metodunun implement edilmesi

Implement edeceğimiz ilk delegate metodumuz numberOfSections(in: ). Table View birden fazla bölüme yani section’a ayrılabilir. Bunun en sık karşılaştığınız örneği her gün kullandığımız telefon rehberi. Telefon rehberi içindeki A’dan Z’ye tüm isimlere ait tüm bölümler birer section’dur.

Bizim yapacağımız uygulamada seçtin sayısı 1 olacağı için numberOfSections(in: ) metodunu aşağıdaki gibi implement edelim. Ben kodumuzun temiz ve anlaşılır olması için UITableViewDataSource ve UITableViewDelegate metodlarını ViewController’a ait bir extension içinde tanımlayacağım.

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
}

Yine yukarıda belirttiğim gibi örnek uygulamamız tek bir bölümden oluşacağı için return değerimizi 1 olarak belirledik.

tableView(_:numberOfRowsInSection:) metodunun implement edilmesi

numberOfSections(in: ) a benzeyen ikinci metodumuz tableView(_:numberOfRowsInSection:). Bu metod her bir bölümümüzde kaç adet satır olacağını belirler. Yukarıdan aşağıda dikey bir liste oluşturmaya çalıştığımız için her bir row bir table view cell’i işaret edecek. Table View Cell veya satır sayımız bilim adamları listemizin sayısında olacağı için metodunu hemen numberOfSections(in: ) metodunun altına  aşağıdaki gibi tanımlayalım.

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return scientists.count
    }

tableView(_:cellForRowAt indexPath:) metodunun implement edilmesi

Evet, gelelim sıradaki table view cell’lerin içindeki veriyi dolduran en önemli metodumuza. Bu metodu derinlemesine incelememiz gerekiyor . Çünkü çalışma mekanizması biraz farklı. Bunlar sırasıyla;

• cellForRowAt metodunun ne zaman çağrıldığı
• IndexPath‘in ne olduğu
• Nasıl yeniden kullanıldığı (reuse)

İlk olarak aşağıdaki metod tanımını biraz önce yazdığımız  tableView(_:numberOfRowsInSection:)’un hemen altına ekleyelim.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
    }

• Bu metodun ilk parametresi olan tableView bu metodun biraz sonra çağıracağımız table view’ımızın bir değişkeni
• indexPath ise bizim bölümlerimizin (section) ve satırlarımızın (row) tanımlayıcı index değerleri.
• Geri dönüş tipimiz olan UITableViewCell table view’ımız üzerinde göstereceğimiz UITableView tarafından kullanılan cell birimleridir.

Uygulama içindeki bilim adamları listemiz üzerinde parmağımızı aşağı ya da yukarı yönlü kaydırdığımızda, table view’a ait UITableViewCell’in ekranda görüntülenmesi gerektiği tüm durumlarda tableView(_:cellForRowAt indexPath:) metodumuz çağrılır. Gelin, metodumuzun içini aşağıdaki gibi dolduralım ve her seferinde metodun nasıl çağrıldığınız hep beraber görelim.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "scientistCell")! // 1
        print("cellForRowAt metodu --- section = \(indexPath.section), row = \(indexPath.row)") // 2
        cell.textLabel?.text = scientists[indexPath.row] // 3
        return cell // 4
    }

1. İlk olarak cell’i biraz önce Main.storyboard’da table view üzerindeki cell’e verdiğimiz identifier’ı kullanarak dequeue ediyoruz ve cell isimli bir değişkene atıyoruz.
2. Metodumuzla ilgili bilgileri print metodunu kullanarak yazdırıyoruz ki metodun ne zaman ve hangi koşulda çalıştığını hep beraber görelim. Bunu işimiz bittiğinde kaldıracağız.
3. Ardından bilim adamları listemizdekilerin isimlerini cell içerisinde default olarak bulunan textLabel’a yazıyoruz. UITableViewCell’den oluşan tüm objeler textLabel isminde UILabel tipinde bir değişken içerir.
4. İlk adımda oluşturduğumuz cell’i return ediyoruz.

Uygulamamızı çalıştıralım ve çıktımızı görelim.

• tableView(_:cellForRowAt:) metodun ne zaman çağrılıyor?

Uygulamayı çalıştırdığımızda listenizi aşağı ve yukarı yönlü kaydırdığınızda göreceksiniz ki tableView(_:cellForRowAt:) metodu listeyi her scroll ettiğinizde çağrılacaktır.

• IndexPath nedir?

IndexPath’i listemizin elemanlarının benzersiz koordinatı olarak düşünebilirsiniz. Her bir bölümümüzün (section) ve satırımızın (row) listedeki koordinatıdır. Örnek uygulamamızda tek bir bölüm (section) ve bilim adamları listemizin sayısı kadar satırımız (row) olduğundan listemizin ilk elemanının koordinatı (0,0) ikinci elemanının koordinatı (0,1) ve üçüncü elemanının koordinatı (0,2) olacaktır ve listenin sonuna kadar böyle devam edecektir. tableView(_:cellForRowAt:) metodu cell’i göstermeye her ihtiyacı olduğunda bu koordinatı kullanarak gerekli elemanı oraya yerleştirecektir.

• Table view cell nasıl yeniden kullanılır? (Reuse) 

Table view ekranda cell’i her göstermeye çalıştığında tableView(_:cellForRowAt:) metodumuz çağrılır. Ancak table view her seferinde cellForRowAt‘i çağırarak yeni bir table view cell oluşturmak yerine oluşturmuş olduğu cell’i kuyruktan (queue) ekler ve çıkarır. Yani siz listenizde aşağıya ya da yukarıya gittiğinizde cell yok edilmez kuyruğa eklenir ve yeniden kullanım (reuse) için bekletilir. Bu sayede cihazın CPU’sunu gereksiz yere yormamış olur. Bence zekice kurgulanmış peki bu konuda siz ne düşünüyorsunuz? Yeniden kullanımı sağlayan kod parçacığı ise;

let cell = tableView.dequeueReusableCell(withIdentifier: "scientistCell")

Projenin tamamlanmış halinin kodlarına buradan ulaşabilirsiniz.

ÖZET

Bu yazımızda iOS uygulamalarımızda sıklıkla kullanacağımız listeleri görüntülemek için kullandığımız temel komponentlerden birisi olan Table View’ın tanımını, nasıl oluşturulduğunu ve UITableViewCell‘in nasıl yeniden kullanıldığını anlattık. iOS Table View yazımızla alakalı değerli görüşlerinizi, soru veya yorumlarınızı yorumlar kısmına ya da buradan soru cevap kısmına yazabilirsiniz. Diğer derste görüşmek dileğiyle.

Tüm iOS Dersleri için tıklayınız.