Kodlayalım: WhatsApp Ayarlar Menüsü
Hepinize merhabalar! 👋🏻 Yeni bir Swift yazısıyla karşınızdayız. Eminim ki neredeyse hepiniz WhatsApp uygulamasını bir noktada kullanmış ve Ayarlar sayfasına da girmişsinizdir. Bugünkü makalemizde Swift dilini ve UITableView sınıfını kullanarak buna benzer bir menü yaratmayı öğreneceğiz. 🎉
Başlamadan söylemiş olayım, eğer URLSession hakkındaki yeni yazımızı okumaya henüz fırsatınız olmadıysa okumanızı kesinlikle öneririm! 😉
UITableView ve UITableViewCell Nedir?
Projemize başlamadan önce kısaca UITableView ve UITableViewCell sınıflarının üzerinden geçelim. UITableView sınıfı, uygulamalarda veriyi tablo şeklinde göstermek için kullanılmaktadır. Bunu WhatsApp’taki sohbet listesi, Notes uygulamasındaki notlar listesi veya telefonunuzun Ayarlar kısmında gözlemleyebilirsiniz. Biz de bugünkü projemizde WhatsApp’ın Ayarlar sayfasını yeniden yaratmak için UITableView sınıfını kullanacağız.
Her UITableView tablosu, bir veya daha fazla satırdan (row) oluşur. Bu satırların her birinde ise UITableViewCell adı verilen hücreler yer almaktadır. UITableView elemanımızı kodlarken, bu hücrelerin her birinin içeriğini tanımlamamız gereklidir. Bir UITableViewCell hücresinin içerisinde sadece yazı yer alabileceği gibi, resimler veya farklı elemanlar da yer alabilir — hücrelerin içeriğini dilediğimiz gibi özelleştirebiliriz (ki WhatsApp projemizde öyle yapacağız).
UITableView elemanının içerisinde yer alan hücreler, aynı zamanda farklı kısımlara (section) ayrılabilirler. WhatsApp’ın Ayarlar sayfasını incelerseniz, “Starred Messages” ve “WhatsApp Web/Desktop” satırlarının, alttaki satırlardan ayrı durduğunu göreceksiniz. Satırları bu şekilde ayırmak için UITableView elemanımızın içerisinde iki farklı section yaratacağız. 👍🏻
Projemizi Planlayalım!
UITableView elemanının yapısını öğrendiğimize göre, WhatsApp projemizi kodlamaya neredeyse hazırız. Başlamadan önce yapmamız gereken tek bir iş kaldı, bu da bir plan yapmak! Kod yazmaya başlamadan yapacaklarımızın bir taslağını çıkarmak, işimizi çok kolaylaştıracaktır. 📝
Bu projemizde amacımız, WhatsApp Ayarlar sayfasının bir benzerini yaratmak olacak. Tepedeki “Settings” başlığından “Data and Storage Usage” satırına kadar olan kısmı kodlayacağız; bunu yapmak için de UITableView elemanını kullanacağız.
İlk olarak, ekranın en tepesinde yer alan başlığı göstermek için bir Navigation Controller kullanacağız.
Sonrasında toplam iki farklı UITableView yaratacağız. Bunun sebebi, iki farklı çeşit hücre yaratacak olmamızdır: Birinci çeşit hücre, en yukarıda yer alan ve kullanıcının profil fotoğrafını, ismini ve durumunu gösteren hücre. Bunun altında yer alan ve farklı ayarları gösteren hücreler ise ikinci hücre çeşidimiz. İlk UITableView elemanının sadece bir hücresi olacak. İkinci UITableView elemanının ise toplam altı hücresi ve iki kısmı (section) olacak.
Kodlama Zamanı!
Artık elimizde bir taslak da olduğuna göre, projemizi kodlamaya hazırız! 🎉
Ekran ve Hücre Tasarımı
Her zamanki gibi Xcode’u açıp yeni bir “Single View App” projesi yaratarak başlıyoruz. İlk olarak karşımıza çıkan boş View Controller ekranına bir başlık ekleyeceğiz. Bunun için View Controller’ı seçerek, Editor > Embed In menüsünden Navigation Controller seçeneğine tıklıyoruz ve beliren Navigation Controller ekranını Initial View Controller olarak ayarlıyoruz.
Şimdiyse ekranın tepesine “Settings” başlığımızı ekleyeceğiz. İlk olarak Navigation Controller ekranının üst kısmında yer alan çubuğa tıklayarak, sağ taraftaki Attributes Inspector menüsünden “Prefers Large Titles” yazan kutuyu işaretliyoruz.
Sonrasında View Controller ekranımızın tepesinde yer alan çubuğa tıklıyoruz ve Attributes Inspector menüsündeki “Title” kısmına “Settings” yazıyoruz. İşte ekranımıza kolaylıkla bir başlık ekledik! ✨
Başlığı bitirdiğimize göre sıra asıl içeriğimiz olan UITableView elemanlarını eklemeye geldi. Sağ üstteki “Library” menüsünden iki tane Table View alıp View Controller ekranımıza sürüklüyoruz.
Sonrasında UITableView elemanlarımızın konum ve boyutlarını aşağıdaki gibi düzenliyoruz (bu proje iPhone XR için yaratıldığından sayılar farklı cihazlarda değişiklik gösterebilir):
- Birinci UITableView — X: 0 | Y: 176 | Width: 414 | Height: 100
- İkinci UITableView — X: 0 | Y: 276 | Width: 414 | Height: 364
Şimdi sıra UITableView elemanlarının hücrelerini tasarlamaya geldi. İlk olarak her iki TableView için de Attributes Inspector menüsünden Prototype Cells kısmını 1 olacak şekilde ayarlıyoruz.
Profil fotoğrafını, ismini ve durumunu gösteren TableView elemanının hücresini tasarlayarak başlayalım. Onu bitirdikten sonra ise ayarları gösteren TableView elemanını tasarlayıp, her ikisini de kodlayacağız. 👍🏻
İlk olarak yukarıdaki TableView elemanı seçerek, Attributes Inspector menüsünden hücrenin yüksekliğini ayarlayacağız. En yukarıda yer alan Row Height kısmında, Automatic yazan kutudaki işareti kaldırarak yüksekliği 100 olarak belirliyoruz. Bu değişikliği aynı zamanda yarattığımız prototip hücrede de gözlemleyebiliyoruz.
“Library” menüsünden bir UIImageView alıp prototip hücremizin içine sürüklüyoruz. Bu UIImageView, profil fotoğrafını gösterecek. UIImageView elemanının konum ve boyutunu X: 20 | Y: 7 | Width: 85 | Height: 85 olarak ayarlıyoruz. Elemanın bir kısmı sonraki TableView’ın altında kalabilir, bu hiç problem değil! Merak etmeyin, fotoğraf yine de gözükecek. 😁
Sonrasında ImageView elemanının yanına iki tane UILabel elemanı ekliyoruz; bunlar kullanıcının isim ve durumunu gösterecek. İsim için büyük ve siyah bir yazı tipi, durum içinse daha küçük ve açık gri bir yazı tipi kullanıyoruz. (Tabii ki bunlarla istediğiniz gibi oynayabilirsiniz!)
Son olarak TableView hücremizi seçerek Attributes Inspector menüsünden Accessory olarak Disclosure Indicator seçeneğine tıklayacağız. Böylece hücrenin sağ tarafında tıpkı WhatsApp’ta olduğu gibi küçük gri bir ok belirecek.
İlk hücremizin tasarımı bitti! 🎊 Şu anda ekranımız aşağıdaki gibi gözüküyor.
Şimdi sıra ayarları gösterecek olan ikinci TableView elemanının hücresini tasarlamaya geldi. Burada da çok benzer bir süreç izleyerek, ilk olarak hücreye bir UIImageView elemanı ekliyoruz. Bu ImageView elemanının konum ve boyutunu X: 20 | Y: 2 | Width: 40 | Height: 40 şeklinde düzenliyoruz.
Sonrasında ayarın ismini gösterecek bir UILabel elemanı ekliyoruz, ve yine Attributes Inspector menüsünden Disclosure Indicator seçeneğine tıklıyoruz. Böylece ikinci TableView için de hücre tasarımımız bitti! 🎉
Ekranımızın son hali aşağıdaki gibi gözüküyor.
TableView ve TableViewCell Elemanlarını Kodlama
Ekran tasarımımızı bitirdiğimize göre artık sadece TableView ve TableViewCell elemanlarını kodlamak kaldı!
İlk olarak File > New > File… menüsünden “SettingsViewController” isimli yeni bir Cocoa Touch Class yaratıp UIViewController’ın alt sınıfı olarak ayarlıyoruz. Bu sınıf, ekranımızı temsil edecek ve UITableView elemanlarımızı kodlamamızı sağlayacak.
Üstte yer alan UITableView elemanından SettingsViewController.swift dosyasına kntrl + sürükle yaparak bu elemanı “profileTableView” olarak isimlendiriyoruz. Benzer şekilde alttaki UITableView elemanına da “settingsTableView” ismini veriyoruz.
Şimdiyse özelleştirilmiş hücrelerimiz için birer sınıf yaratalım. Bu sefer yarattığımız sınıf, UITableViewCell sınıfına ait olacak. İsimleri ProfileTableViewCell ve SettingsTableViewCell olan toplam iki sınıf yaratacağız.
profileTableView tablosunun prototip hücresinden ProfileTableViewCell.swift dosyasına kntrl + sürükle yaparak UIImageView elemanını “profileImage” olarak isimlendiriyoruz. Benzer şekilde üstteki UILabel elemanını “nameLabel”, alttaki UILabel elemanını ise “statusLabel” olarak isimlendiriyoruz.
Aynı süreci SettingsTableViewCell.swift dosyası için tekrarlayarak bu hücrede yer alan UIImageView elemanını “settingsImage”, UILabel elemanını ise “settingsLabel” olarak isimlendiriyoruz.
Şimdiyse prototip hücrelerimizi, tanımladığımız özelleştirilmiş UITableViewCell sınıflarına bağlamalıyız. Bunun için ilk olarak profileTableView elemanının hücresine tıklayarak, sağdaki Identity Inspector menüsünden Class kısmına “ProfileTableViewCell” yazacağız.
Sonraysa Attributes Inspector menüsünden Identifier kısmına “ProfileTableViewCell” yazacağız.
Şimdiyse aynı işlemi SettingsTableViewCell için tekrarlayacağız. 👍🏻
Hücrelerin içeriğini kodlamaya başlamadan önce son olarak kullanacağımız resimleri Assets.xcassets klasörüne ekleyeceğiz. WhatsApp ayarlarının resimlerine, projenin GitHub sayfasından ulaşabilirsiniz.
Artık UITableView elemanlarımızın içeriğini kodlamaya başlayabiliriz! İlk olarak SettingsViewController sınıfımızı ilk satırda, UITableViewDelegate ve UITableViewDataSource alt sınıfı olarak tanımlamalıyız.
Bunu yaptıktan sonra, Xcode bize bir uyarı verip yeni metodlar eklememiz gerektiğini söylecek. Burada Fix düğmesine basarak, numberOfRowsInSection ve cellForRowAt metodlarının tanımını sınıfımıza otomatik olarak ekleyebiliriz.
Şimdi, viewDidLoad metodunun içerisinde her iki UITableView elemanımızın dataSource ve delegate özelliklerini self olarak tanımlıyoruz.
Sırada, hücrelerimizi dolduracak olan içerikleri birer array’de depolayacağız. settingsArray listesinde ayarların isimlerini, imagesArray listesinde ise ayarların resimlerinin isimlerini saklayacağız.
Dikkat ederseniz her iki listenin içerisinde, iki tane liste var. Bu iki liste, ayarlar tablosunda olan iki kısmı (section) temsil ediyor.
Şimdi tableView metodlarının içerisini doldurmaya başlayabiliriz. İlk olarak numberOfSections metodunda her UITableView elemanının içerisinde kaç kısım (section) tanımlayacağız.
Gördüğümüz gibi profileTableView’da sadece bir kısım var. Diğer UITableView elemanımızda, yani settingsTableView’da ise settingsArray.count kadar kısım (yani iki kısım) var.
Sonraki adımımız ise, her kısımda kaç tane hücre olduğunu belirlemek olacak. Bunun için numberOfRowsInSection metodunu kullanacağız.
profileTableView elemanında sadece bir kısım ve bir hücre olacak, dolayısıyla bu durumda metodumuz 1 return edecek. settingsTableView elemanında ise settingsArray listesinin o kısımda olan elemanların sayısını return edecek (yani ilk kısım için iki, ikinci kısım içinse dört).
Sonunda hücrelerimizin içeriğini tanımlıyoruz! Bunu yapmak aşağıdaki gibi cellForRowAt metodunu kullanacağız.
Şimdi bu kodu biraz daha detaylı bir şekilde inceleyelim — bu metod, özellikle tanımlanmış olan bir UITableViewCell return ediyor. Temel süreç her hücre için aynı: İlk olarak yeni bir hücre yaratıyor, sonrasında hücrenin özelliklerini düzenliyor, son olarak ise hücreyi return ediyoruz.
Süreç temelde aynı olsa da, detaylar tabii ki de değişiyor. Dikkat ederseniz profileTableView ve settingsTableView için iki farklı kod parçası yazdık. Bunların ikisinin de kısaca üstünden geçelim. 🔍
Her iki durumda da ilk olarak dequeueReusableCell(withIdentifier: ) metodunu kullanarak önceden belirlediğimiz cellIdentifier ’a göre yeni bir hücre yaratıyoruz ve as! komutunu kullanarak tipini belirliyoruz.
ProfileTableViewCell yaratırken profileImage, nameLabel ve statusLabel özelliklerinin değerini direkt olarak belirliyoruz. SettingsTableViewCell yaratırken ise önceden tanımladığımız listelerden yararlanıyoruz. Son olarak ise return cell satırıyla yarattığımız hücreyi return ediyoruz.
Bu kod çalışırken, her hücre için cellForRowAt metodu çağrılacak ve böylece hücrelerin içeriği belirlenmiş olacak. 🎉
Şimdi yazmamız gereken sadece bir metod daha kaldı: settingsTableView elemanının section’larının arasında boşluk bırakmamızı sağlayacak olan metod. Bunun için heightForHeaderInSection metodunu aşağıdaki gibi kullanacağız.
Böylece settingsTableView’da yer alan her kısımdan önce 50 piksellik bir boşluk bırakıyoruz. profileTableView içinse 0 piksellik bir boşluk bırakıyoruz.
Vee sonunda kodlamamız bitti! 🎊 Uygulamamızın bitmiş hali işte böyle gözüküyor. Bence WhatsApp’ın kendi menüsüne oldukça benzedi, ya sizce? 😉
Örnek uygulamayı kendiniz denemek istiyorsanız kaynak kodları GitHub üzerinden indirebilirsiniz:
Artık WhatsApp’ın Ayarlar sayfasının bir benzerini, UITableView sınıfını kullanarak nasıl kodlayabileceğimizi öğrenmiş bulunuyoruz. Siz de sayısız kullanım alanı olan TableView elemanını uygulamanıza kolaylıkla ekleyebilirsiniz. Keyifli kodlamalar! 💻
Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.
Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
