Implementasi Self Sizing Cell di iOS – FoodPin Apps

Di iOS 8, Apple memperkenalkan sebuah fitur baru untuk UITableView yang dinamakan dengan Self Sizing Cell. Ini merupakan salah satu fitur penting yang ada di SDK yang baru ini, karena sebelumnya kita harus mengukurang ketinggian dari baris secara manual pada suatu konten, sehingga cell harus dalam kondisi statis untuk menampilkan konten yang dinamis.

Self Sizing di iOS

Nah di postingan ini kita akan membahas bagaimana mengimplementasikan Self Sizing Cell ini sebagai solusi dari menampilkan konten yang dinamis pada sebuah tabel, berikut langkah-langkahnya:

  • Menambahkan Auto Layout Constraint pada prototype cell
  • Menspesifikasikan estimatedRowHeight dari table view aplikasi
  • Menggunakan rowHeight pada table view dari UITableViewAutomaticDimension

Jika mengkonversikan 2 point terakhir diatas menjadi sebuah code maka akan jadi seperti berikut:

tableView.estimatedRowHeight = 36.0;
tableView.rowHeight = UITableViewAutomaticDimension;

Dengan hanya dua baris code, kita telah menginstruksikan table view untuk mengkalkulasikan ukurang tabel agar sesuai dengan ukuran konten sehingga menjadi konten yang dinamis. Sehingga fitur self sizing ini telah menyelematkan banyak code dan waktu kita karena tidak perlu membuatnya manual dan statis lagi.

Nah kita akan melanjutkan pengembangan aplikasi FoodPin dan memansangkan fitur self sizing cell ini pada table view cell yang ada di detail view.

Jalankan Xcode dan buka project FoodPin terakhir, lalu pilih file RestaurantTableViewController.swift dan perbarui array restaurant dengan array berikut:

Alamat tidak di tampilkan dalam keterangan full
Alamat tidak di tampilkan dalam keterangan full

Nilai dari property location telah di perbarui dengan alamat asli yang lengkap. Jika kita menjalankan aplikasi dan berpindah ke halaman detai view, seharusnya kita akan menemukan alamat dari restaurant akan terpotong, seperti yang terlihat pada gambar disamping. Nah kita akan memodifikasinnya agar alamatnya tidak terpotong dan menyesuaikan dengan ukuran layout menggunakan fitur self sizing cell.


 

Menambahkan Auto Layout Constraint untuk Prototype Cell

Kita tidak akan bisa menggunakan self sizing cell tanpa mengaplikasikan auto layout dan iOS menggunakan constraint untuk mengkalkulasikan ukuran dari cell.

Jika belum mengetahui tentang auto layout, lihat kembali postingan sebelumnya di “Tentang Auto Layout di iOS”.

Buka Main.storyboard dan pilih Detail View Controller. Beirkut point-point layout constraint yang akan kita tambahkan:

  • Kedua label Field dan Value harus dalam mode verticallu centered.
  • Label Field harus berjarak 9 point dari pinggir kiri garis konten.
  • Label Value harus berjarak 87 point dari pinggir kiri dan 10 point dari pinggir kanan dari tampilan konten.

Pertama pilih label Field dan pilih icon Pin dari menu auto layout. Klik bar left, top dan bottom. Bar tersebut harusnya di tandai dengan warna merah terang. Lalu klik tombol “Add 3 Constraints” untuk mengimplementasikan spacing constraints.

Menambahkan spacing contraints ke label Field
Menambahkan spacing contraints ke label Field

Di Document Outlet dari Interface Builder, seharusnya ada terlihat panah kuning. Klik panah bewarna kuning itu lalu Xcode akan memprosesnya dan berpindah ke panel selanjutnya. Klik indikator panah kuning itu lagi, pilih Update Frame dan klik “Fix Misplacement” untuk membereskan masalah layout.

Tanda panah bewarna kuning di Document Outline menandakannya adanya masalah layout
Tanda panah bewarna kuning di Document Outline menandakannya adanya masalah layout

Selanjutnya pilih label Value, sekali lagi pili icon Pin dari menu auto layout dan klik bar top, bottom, dan right. Isikan spacing constraint dari bar kanan dengan 10 point. Kemudian klik tombol “Add 3 constraint”. Constaint ini membuat label berad di posisi vertically centered dan memiliki ukuran yang otomatis.

Menambahkan spacing contraints untuk atas dan bawah
Menambahkan spacing contraints untuk atas dan bawah

Untuk menambahkan spacing constraint pada garis pinggir kiri dari cell, tahan tombol control dan pindahkan dari label Value ke tampilan konten cell. Lepaskan tombol dan pilih pilihan leading space to container margin.

Interface Builder akan mendeteksi beberapa masalah layout untuk constraint sebelumnya. Klik panah kuning di Document Outline dan perbaiki masalah tersebut.

Menambahkan spacing contraints menggunakan control-drag
Menambahkan spacing contraints menggunakan control-drag

 

Menggunakan Self Sizing Cell

Cell alamat sekarang telah ikut menyesuaikan ukuran keterangan
Cell alamat sekarang telah ikut menyesuaikan ukuran keterangan

Dengan auto layout yang telah terkongfigurasi, langkah selanjutnya adalah menambahkan code di method viewDidLoad dari DetailViewController berikut:

tableView.estimatedRowHeight = 36.0
tableView.rowHeight = UITableViewAutomaticDimension

Seperti yang telah dijelaskan sebelumnya, pada code baris pertama di gunakan untuk memasang ketinggian dari baris cell. Sedangkan baris kedua adalah mengganti property rowHeight menjadi UITableViewAutomaticDimension yang merupakan ketinggian bawaan dari baris iOS 8.


 

Mengatur Garis Label menjadi Nol

Jika kita menjalankan aplikasi sekarang, ukuran cell belum lah berubah, alasanya karena kita sebelumnya memasang nilai labelnya 1, dengan kata lain label hanya akan menampilkan satu garis per konten. Sehingga konten yang kepanjangan juga akan dipisahkan oleh satu garis.

Untuk menyelesaikan masalah ini pilih label Value, lalu di Attributes Inspector ganti nilai Lines menjadi 0. Label akan otomatis mengatur jumlah baris untuk menyesuaikannya dengan konten.

Nah akhirnya selesai, sekarang kita sudah bisa testing aplikasi dan seharusnya cell nya sekarang telah otomatis menyesuaikan ukuran dari konten.


 

Latihan

Cobakan fitur self sizing self pada halaman home screen aplikasi kita sebelumnya. Buat tampilannya menjadi lebih menarik yang nantinya akan terlihat seperti gambar dibawah ini.

Mengaplikasikan self sizing cell untuk home screen
Mengaplikasikan self sizing cell untuk home screen

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code pada pembahasan kali ini bisa di download disini: https://www.dropbox.com/s/qosr2zjwel8mtub/FoodPinSelfSizing.zip

Semoga Informasinya bermanfaat Guys, See yaa  😉

Iklan

Satu pemikiran pada “Implementasi Self Sizing Cell di iOS – FoodPin Apps

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s