Implementasi Auto Layout Menggunakan iOS SDK di iPhone

Tentu membuat aplikasi Hello World saja tidak cukup, sebelum kita memulai untuk membuat aplikasi sebenarnya, mari kita bahas terlebih dahulu apa yang dinamakan dengan Auto Layout. Auto Layout adalah sebuah constrain-based layout. Dimana hal ini memperbolehkan developer untuk membuat sebuah UI yang adaptive yang dapat merubah ukuran layar ketika layar dalam posisi potrait atau landscape.

Auto Layout in iPhone

Ini merupakan fitur penting dalam sebuah aplikasi karena dapat membuat aplikasi terlihat lebih menarik. Ditambah lagi iPhone terbaru memiliki ukuran layar yang berbeda-beda. Tanpa menggunakan Auto Layout tentunya development akan terasa susah untuk setiap layar device. Nah di postingan kali ini kita akan cari tahu seberapa canggihnya Storyboard dan Auto Layout ini, let’s check this out!!

 

Mmmmm, Kenapa harus Auto Layout ?

Ok kita ambil contoh, buka project Helo World yang telah kita buat di postingan sebelumnya. Kan di postingan tersebut kita melakukan testing dan target aplikasinya dijalankan di iPhone 5s bukan?.

Sekarang coba jalankan project tersebut menggunakan simulator iPhone 4s dimana device ini memiliki ukuran yang lebih kecil dibandingkan dengan iPhone 5s. Hasilnya akan terlihat seperti gambar dibawah ini:

Auto Layout

Memang sih tombol Hello World nya tetap terlihat tidak berubah, tetapi posisinya tidak di tengah, nah loh. Ok kita coba percobaan lainnya, coba jalankan project Hello World di iPhone 5s tapi rotasikan simulator dalam mode landscape. Terlihatkan posisi tombol Hello World juga tidak berada di tengah ?

Ayoo, kok bisa gitu ?

Ok, yang pertama yang perlu kita ketahui bahwa iPhone 5/5s dengan 4s memiliki dimensi layar yang berbeda. Untuk iPhone 5/5s dalam posisi potrait memiliki ukuran 320 point horizontal dan 568 point vertical (640×1136 pixel). Sedangkan untuk iPhone 4s memiliki ukuran 320 point dan 480 point (640×960 pixel).


Kenapa iOS menggunakan sistem Point ketimbang Pixel ?

Flashback ke tahun 2007, Apple memperkenalkan iPhone dengan ukuran 3.5 inch dengan resolusi 320×480. Secara detail device tersebut memiliki ukuran 320 pixel horizontal dan 480 pixel vertical. Apple mempertahankan ukuran layar tersebut untuk beberapa waktu, karena kesuksesan iPhone 3G dan iPhone 3GS di pasar penjualan. Nah jika kita membuat aplikasi saat itu, satu point itu masih sama dengan satu pixel. Tapi kemudian Apple memperkenalkan iPhone 4 dengan retina display. Ukuran layar device ini dua kali 640×960. Jadi kesimpulannya satu point itu sama dengan dua pixel di retina display, Wew…

Sistem point ini sebernarnya dapat mempermudah developer, karena seberapa sering pun ukuran layar device berubah,  kita tetap memiliki pixel yang lebih besar. Selain itu penerjamahan point ke pixel juga telah dihandle oleh Ios, jadi tenang.

Screen size

Solusi pertama, tanpa menggunakan Auto Layout, posisi dari tombol yang tidak ditengah bisa kita perbaiki menggunakan Storyboard. Dengan kata lain kita melakukanya secara “hard-code”. Contohnya tombol Hello World berada di titik 120, 169. Nah mau kita menggunakan simulator 3.5-inch atau 4-inch, iOS akan membuat posisi tombol secara spesifik. Di gambar diatas dapat dilihat 2 ukuran layar yang berbeda.

Solusi kedua, tentu kita ingin melihat aplikasi terlihat bagus dan sama di kedua iPhone tersebut, baik dalam posisi potrait atau landscape. Disinilah kenapa kita membutuhkan dan harus mempelajari Auto Layout. Karena ini adalah satu-satunya solusi terbaik untuk menjawab pertanyaan sebelumnya.


Auto Layout Itu Semua Hal Tentang “Constraint”

Seperti yang telah disebutkan sebelumnya, Auto Layout merupakan sistem layout yang merupakan constraint-based. Dimana hal itu memperbolehkan developer untuk membuat UI yang adaptive dan dapat mengatur ukuran layar berdasarkan posisi layar device. Nah ini memang terdengar bagus, tapi apa arti dari constraint-based layout ?

Dengan memikirkan kembali tombol Hello World, apa yang bisa kita deskripsikan jika kita ingin menempatkan tombol ditengah tampilan aplikasi ? mungkin jawabannya akan seperti ini.

Tombol tersebut seharusnya berada di tengah antara horizontal dan bertical, dan tanpa menghiraukan ukuran layar dan juga mode orientasi layar.

Dari kesimpulan diatas mari kita definisikan dalam bentuk 2 constraint yang spesifik:

  • Berada di tengah horizontal
  • Berada di tengah vertical

Constraint ini secara jelas ditunjukkan untuk tombol yang ada di interface. Auto Layout adalah semua hal tentang Constraint. Ketika kita mendiskripsikan constraint dalam bentuk kata, constraint di Auto Layout di deskripsikan dalam bentuk matematika. Sebagai contoh, jika kita mendeskripsikan posisi dari tombol, mungkin akan terdengar seperti “harusnya berada tengah dengan jarak pinggir kiri 30 point”, nah itu akan di terjemahkan menjadi button.left = (container.left+30). Itulah gambaran yang harus kita ketahui, sekarang mari kita praktekkan tombol yang berada ditengah tanpa menghiraukan ukuran layar atau mode layar.


Menggunakan Auto Layout untuk Tombol di tengah

Xcode memperkenalkan 2 cara untuk menggunakan Auto Layout :

  • Menu Auto Layout
  • Drag-Control

Kita akan mendemonstrasikan keduanya di pembahasan kali ini. Mari kita mulai dengan menu Auto Layout. Buka “Main.storyboard” di project Hello World. Di sebelah kanan bawah dari Interface Builder, terdapat menu Auto Layout. Tombol yang ada di menu tersebut memiliki fungsinya masing-masing.

Center Layout

Berikut fungsi dari masing-masing tombol tersebut:

  • Align – Membuat constrain yang sejajar, seperti rata kiri dari dua tampilan.
  • Pin – Membuat jarak pada constraint, seperti mendefinisikan ukuran dari sebuah UI control.
  • Issues – Memperbaiki masalah layout.
  • Resizing – Menentapkan berapa ukuran dari constraint.

Untuk meletakkan tombol Hello World di tengah, pertama kita harus memilihnya dan klik icon Align yang ada di menu Auto Layout. Kemudian akan muncul pop-over, centang kedua pilihan yaitu “Vertical center in container” dan “Horizontal center in container”. Kemudian klik tombol “Add 2 Constraint”.

View Controller

Seharunya terdapat 2 baris constrain seperti yang terlihat pada gambar diatas. Jika garis constraint bewarna biru, itu menandakan tampilan layout telah di edit sehingga tidak ambigu lagi. Nah sekarang kita sudah bisa mengetes aplikasi kembali, kita bisa mengklik tombol Run untuk menjalan simulator dan mentesnya di simlator iPhone 4 dan 5. Jika kita menggunakan simulator iPhone 6 & 6 plus maka akan terlihat lebih bagus lagi.

View Controller 2


Memecahkan Masalah Layout

Layout ProblemConstraint layout yang telah kita setting sebelumnya telah sempurna. Tapi itu tidak akan selalu sempurna. Xcode cukup pintar untuk mendeteksi semua masalah constraint yang ada.

Coba untuk pindahkan tombol Hello World ke bagian sudut kanan bawah dari layar. Xcode dengan seketika mendeteksi beberapa masalah layout dan akan muncul garis orange ketika kita memindahkan tombol.

Masalah layout biasanya terjadi ketika kita membuat 2 constraint atau constraint yang berdempetan. Nah disini kita harus meletakkan tombol berada di tengah vertical dan horizontal. Dengan adanya masalah layout yang muncul, tampilan Document Outline akan menampilkan garis (merah/orange). Nah untuk memperbaiki masalah ini kita hanya perlu memilih Update Frame dan klik tombol Fix Misplacement pada menu pilihan yang muncul. Setelah itu bomol akan kembali seperti semula.

Update Frame

Mungkin akan banyak masalah yang muncul ketika memulai mengembangkan. Ini lah cara bagaimana memperbaiki masalah tersebut. Ketika kita membuat UI dengan Auto Layout maka masalah yang ada akan terminimalisir pada aplikasi kita.


Menampilkan Gambaran Storyboard

StoryboardSejauh ini kita hanya mengunakan simulator untuk menge-tes perubahan UI. Memang sih Xcode memiliki simulator yang lumayan keren, tapi sebenarnya itu bukan cara terbaik untuk melihat perubah dari UI aplikasi kita. Nah di Xcode 6 terdapat fitur yang dinamakan dengan Preview yang bisa digunakan developer untuk melihat tampilan dari perubahan UI dalam sementara waktu.

Di Interface Builder, buka menu pop-up Assistant lalu pilih Preview (1). Tekan dan tahan tombol shift+option, dan kemudian pilih Main.storyboard sebagai file yang ingin di preview. Seperti yang terlihat digambar diatas.

Nantinya kita akan diarahkan ke mode preview. Klik dua kali tombol + sebelah kanan sehingga akan membuka Assistant Editor.

Xcode akan menampilkan sebuah preview dari tampilan aplikasi di assistant editor. Umumnya akan ditampilkan dalam iPhone 4. Kita bisa meng-klik tombol + sebelah kiri untuk menampilkannya dalam iPhone 3.5. Jika kita ingin menampilkan layar dalam mode landscape, kita hanya perlu meng-klik tombol rotate.

Preview

Fitur preview ini sangat berguna untuk mendesign tampilan aplikasi. Kita bisa dengan mudah mengganti storyboard (seperti menambahkan tombol lain ke view) dan mensimulasikannya melalui fitur preview. Ini tentunya akan menghemat waktu tanpa harus menjalankan simulator lagi dan lagi.

Test App


Menambahkan Label

Nah sekarang kita telah mengerti tentang Auto Layout. Mari kita coba beri label untuk masing-masing view. Seperti yang kita tahu iPhone 5 memiliki ukuran layar lebih besar dari iPhone 4. Ketika kita menambahkan beberapa UI control ke kedua layar tersebut mungkin kita akan sedikit bingung menentukan ukurannya, karena tidak adanya labeling.

Di Interface Builder, pindahkah label dari Object Library dan letakkan di sebelah kanan bawah dari view. Klik dua kali label tersebut untuk mengganti namanya, dan beri namanya “Welcome to Auto Layout” atau apapun yang diinginkan.

Label

Auto Layout ConstraintJika kita telah membuat preview di Asistant Editor, seharunya kita akan melihat sebuah pembaruan seperti yang terlihat pada gambar diatas. Seperti yang kita lihat, tanpa menggunakan Auto Layout, aplikasi kita tidak akan bisa menampilkan label pada device iPhone 3.5.

Jadi bagiamana kita memecahkan masalah ini ?

Kembali lagi, kita atur constraintnya. Pertama kita akan menambahkan sebuah constrain seperti meletakkan label di bagian kanan bawah. Kali ini kita akan menggunakan “Control-drag” untuk mengimplementasikan Auto Layout. Untuk menambahkannya tahan tombol control dan geser dari label ke bawah samapi superview. Setelah kita melepaskan tombolnya, menu pop-iver akan menampilkan daftar pilihan constraint. Pilih “Bottom Space to Bottom Layout Guide” untuk memasangnya di vertical space constraing dari tombol bawah view controller. Ini akan menyelesaikan masalah jarak yang ada di view.

Untuk menyelasikan masalah auto layout constraint, buka Document Outline. Lalu klik icon garis merah, dan akan muncul indikator “Add missing constraints”.

Add Missing Constraint

Ketika kita menampilkan UI atau menjalankan aplikasi di simulator, label seharusnya juga telah tampil di iPhone 3.5 maupun dalam model landscape.

Well cukup sekian pembahasan kali ini, semoga bermanfaat guys!! Keep calm and build apps, oya untuk sample codenya bisa di download dibawah ini, See Ya 😉

 https://www.dropbox.com/s/4htvd6hvhlln9q5/HelloWorldAutoLayout.zip

Iklan

Satu pemikiran pada “Implementasi Auto Layout Menggunakan iOS SDK di iPhone

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