UITableView ile Dinamik Listeleme

Herkese merhaba, bu yazıda UIKit kütüphanesinden UITableView’ın nasıl dinamik bir şekilde kullanıldığını inceleyeceğiz. Yazacağımız bir protocol ile ekranda görmek istediğimiz her item’ı özelleştirerek tek bir array’de toplayacağız ve listeleme işlemini gerçekleştireceğiz. Elimizde bir local movie json dosyası olacak ve bu json’ı modelleyerek BluTV uygulamasındaki detay ekranına benzer bir tasarımla movie detail ekranı geliştireceğiz. Haydi gelin bir önce başlayalım!

Sıfırdan network mimarisi yazarak vakit kaybetmemek adına lokal bir json dosyamız var, adı movie.json.

{
  "id": 101,
  "name": "Zodiac",
  "description": "Zodiac, 2007 ABD yapımı David Fincher'ın yönettiği gizem gerilim filmi. 1960'lı yılların sonundan itibaren Amerika Birleşik Devletleri'nin batı sahillerinde seri cinayetler işleyen ve kendine Zodiac takma adını koyan katili yakalama öyküsüne dayanmaktadır.",
  "director": "David Fincher",
  "genre": "Gerilim/Gizem",
  "imdbScore": "7.7",
  "year": "2007",
  "imageUrl": "zodiac",
  "isFavorited": true,
}

Bu lokal json dosyasını modelleyebilmek için bir Bundle extension yazıyoruz.

Bu extension’u şu şekilde kullanıyoruz.

private var movie: Movie {
  return Bundle.main.decode("movie.json")
}

Artık elimizde lokaldeki movie.json dosyasından modellenmiş movie objemiz var. Sıra geldi tableview cell modellerimizi üretmeye.

Üç adet enum type tanımladık, bunlar image, infos, actions. Her bir type için birer struct model yaratıyoruz. Gelin şimdi ViewModel class’ımızı yaratalım!

Oluşturduğumuz bu viewModel içerisinde setData fonksiyonu sayesinde sırayla itemlar yaratıyoruz ve moviewItems arrayine append ediyoruz. Array dolduktan sonra setDataDone closure’ını kullanarak ViewController’ımıza bu işlemin tamamlandığını bildiriyoruz. Gelin bir de ViewController’ımızı inceleyelim!

viewDidLoad fonksiyonu içerisinde configureTableView ve syncViewModel fonksiyonlarını çağırıyoruz. Bunlar sırayla tableView ve viewModel koonfigürasyonlarını yapıyor. syncViewModel içerisinde viewModel class’ından tetiklenecek olan setDataDone closure’ını dinliyoruz. Burada önemli olan iki noktadan biri strong referans tutmamak adına kullandığımız [weak self] terimidir, diğeri ise DispatchQueue.main.async kullanımıdır. DispatchQueue.main.async kullanma sebebimiz tableView.reloadData işleminin main thread üzerinde gerçekleşmesini sağlamak içindir.

TableView’ın cellForRowAt fonksiyonunda item.type kontrolü ile cell modellerimizde kullandığımız type’lara göre yaratmış olduğumuz custom cell classlarımızı kullanıyoruz. Her custom cell içerisinde bir configure fonksiyonu mevcut, bu fonksiyon ile cell’lerimizi dolduruyoruz.

Projemizi derleyip run ediyoruz. Simülatör görüntüsü aşağıdaki şekilde.

Projenin github linkine buradan ulaşabilirsiniz.

Herkese keyifli araştırmalar ve okumalar…