Self Sizing TableViewCell

Bu yazıda TableViewCell objelerinin uzunluğunu dinamik olarak ayarlamayı öğreneceksiniz.

Yarattığımız UITableViewCell objelerinin her zaman aynı boyutta olmasını istemeyiz; özelliklede hücre içeriğinin ne kadar uzun olacağını bilmiyorsak.

Bizim istediğimiz her bir hücrenin kendi boyutunu belirlemesi ve içeriğine göre daralıp genişleyebilmesi.

Dolayısıyla tableView(_:heightForRowAt:) delege fonksiyonuyla bu işi çözemiyoruz, bize daha esnek ve kolay bir yapı lazım.

 

Çözüm

Self Sizing TableViewCells dediğimizde aslında farklı türde bir TableViewCell hücresinden bahsetmiyoruz. Yalnızca auto layout kurallarına göre hücrenin daralmasını veya genişlemesini sağlıyoruz.

TableViewCell hücresine yerleştirdiğimiz elemanlara verdiğimiz auto layout constraint leri direkt olarak hücrenin uzunluğunu otomatik olarak değiştirmeye imkan sağlamaktadır.

Örneğin hücrenin içerisinde 200 birim uzunluğunda ve genişliğinde bir UIView objesi yerleştirir ve top&bottom uzaklığını 20 şer birim verirsek elimize toplamda 240 birim uzunluğa sahip bir hücre geçer.

Burada dikkat edilmesi gereken iki nokta var.

Birincisi, top&bottom constraint lerinden birini vermeyi unutursanız tasarladığınız hücre kendi uzunluğunu hesaplayamaz. Dolayısıyla şöyle bir görüntüyle karşılaşmanız muhtemel olur:

Kare şeklinde bir cisim görmemiz gerekirken bottom constraint vermediğimiz için hücre kendi uzunluğunu hesaplayamadı olması gerektiğinden kısa kaldı.

Bottom constraint verdikten sonraki hali ise bu oldu:

 

İkinci dikkat etmemiz gereken nokta ise .xib tasarım dosyasındaki çalışma alanının sadece bir çalışma alanı olduğunu bilmek.

Çalışma alanı büyüklüğü demek sizin o anki çalıştığınız tasarım alanının büyüklüğü anlamına gelir. Uygulama çalıştığı zamanki görüntülenecek olan büyüklüğü değil.

Dolayısıyla, siz çalışma alanını ister 300 birim uzunluğunda tutun, ister 10 birim uzunluğunda tutun run-time da asla dikkate alınmaz.

Yapılması gereken tek şey yerleştirdiğimiz objelerin constraint lerini eksiksiz vererek bulunmuş olduğu hücrenin yüksekliğini arttırmak.

Yan taraftaki constraint ler kutu cisminin constraint lerinin doğru verilmiş halini gösteriyor. Bu hücre için Self Sizing TableViewCells diyebiliriz.

 

Gerçek Örnek

Gerçek hayatta hücrenin sadece bir eleman içermesi pek muhtemel olmadığı için daha kompleks bir Self Sizing TableViewCells örneği yapalım.

Bir haber uygulaması yaptığımızı düşünelim. Bir haberin genel olarak resmi, başlığı, tarihi ve açıklaması vardır.

Bu komponentlerin hepsi bir arada olsa bile hücrenin uzunluğunu dinamik yapabiliriz. Önemli olan hücrenin uzunluğunu hesaplatabilmek.

Şimdi elemanları tek tek yerleştirelim ve constraint lerini inceleyelim:

Çalışma alanına bir adet ImageView sürükleyelim ve constraint lerini aşağıdaki gibi verelim.

ImageView objesi hücre içinde kendisini nerde konumlandıracağını artık biliyor.

Başlığı temsil edecek bir label objesi yaratalım.

 

Label İle İlgili Hatırlatma

Label eklerken içerisine alacak yazının kaç satır yer kaplayacağına dikkat etmemiz gerekiyor. Eğer tek satır olmasını istiyorsanız yapmanız gereken bir şey yok fakat birden çok satır olabilir diyorsanız isteğe göre maksimum satır limitini belirlemeli veya “0” seçerek sınırsız yapabilirsiniz.

Aslında 0 yapmak burda işin püf noktası çünkü içeriğine kaç karakter bir yazı geleceğini çoğu zaman bilmiyoruz. Bu durumda label ı yazının boyutu kadar uzatmayı tercih ediyoruz.

 

Label a leading ve trailing constraint lerini verdiğimiz için yazının label a sığmadığı durumda otomatik olarak aşağı uzadığını görüyoruz. Eğer trailing veya leading constraint i vermezseniz yazı hep yatayda kalacak ve hatta tableviewcell in dışına taşacaktır. Lütfen bu duruma dikkat edin.

Başlık için kullanacağımız label da artık kendisini nerede konumlandıracağını biliyor. Şimdi benzer işlemi tarih label ı için yapacağız.

Bu komponent için işimiz kolaydı. Sadece top ve leading constraint vermemiz yeterli. Zaten buraya kısa bir yazı geleceği için trailing constraint vermemize gerek yok.

Son olarak açıklama metnini içeren bir label ekleyeceğiz. Bu komponent en önemli elemanımız çünkü tableviewcell buna göre genişleyecek. Lütfen satır sayısını “0” olarak seçmeyi unutmayın.

Açıklama metnini yazacağımız label a diğer komponentlerden farklı olarak bir de bottom constraint ekliyoruz. Bu constraint hücrenin belirtilen constraint ler doğrultusunda genişleyebilmesini sağlıyor.

Bottom constraint inde diğer constraint lerde olduğu gibi “=” ifadesi kullanmadık çünkü çalışma alanınızdaki büyüklük bottom constraint verdiğiniz değeri karşılayamıyorsa hata varmış gibi gösterebilir. Bu yüzden büyüktür ifadesi kullandık.

Unutmamak lazımki, her bir elemanın;

  1. Hücrenin neresinde konumlanacağını bilmesi gerekiyor.
  2. Diğer komponente ne kadar uzakta olması gerektiğini bilmesi gerekiyor.

Yani çok elemanlı bir tableviewcell üzerinde çalışıyorsak en alttaki elamana bottom constraint vermemiz yeterli olmaz. Tüm elemanların komşusuna ne kadar mesafede duracağını da bilmesi gerekir.

Sonuç

Self Sizing TableViewCells oluşturmak için auto-layout kurallarını iyi anlamak ve uygulamak yeterlidir.

Örnek uygulamayı buradan indirebilirsiniz.