Halo, semuanya! Pada blog ini, kita akan membahas bagaimana cara membangun user-interface (UI) yang adaptif di aplikasi iOS. Ini seperti membangun tampilan responsif pada pengembangan web. Auto Layout memungkinkan pengembang membangun UI yang adaptif di berbagai ukuran device.

Pada awalnya, pengembang aplikasi iOS hanya perlu memikirkan bagaimana menyusun UI  pada device iPhone berukuran 3.5 inci dalam mode portrait dan landscape. Seiring berkembanganya teknologi Apple maka semakin bervariasi pula ukuran device iPhone. Selain itu, Apple juga merilis iPad yang tentu saja memiliki ukuran lebih besar. Hal ini membuat para pengembang perlu memikirkan bagaimana tampilan UI yang mereka bangun di berbagai device dengan berbagai ukuran.

Berikut daftar device Apple dengan jenis dan ukurannya:

• iPhone 4/4s (3.5-inch)
• iPhone 5/5c/5s (4-inch)
• iPhone 6/6s/7/8/SE (4.7-inch)
• iPhone 6/6s/7/8 Plus (5.5-inch)
• iPhone X/XS/11 Pro (5.8-inch)
• iPhone XR/11/12/12 Pro/13 Pro/14 Pro/15 Pro (6.1-inch)
• iPhone 16 Pro (6.3-inch)
• iPhone XS Max/11 Pro Max (6.5-inch)
• iPhone 12 Pro Max/13 Pro Max/14 Pro Max/15 Pro Max (6.7-inch) 
• iPhone 16 Pro Max (6.9-inch)
• iPad (9.7-inch)
• iPad Mini (7.9-inch)
• iPad Pro (10.5/12.9-inch)

Membuat Xcode Project

Oke, langsung saja! Buatlah proyek Xcode project dengan Create New Project. Pilih menu iOS kemudian pilih opsi App.

Beri nama project AdaptiveUIExample. Pastikan Interface-nya adalah Storyboard. 

Setelah itu klik Next. Lalu, akan muncul dialog untuk menyimpan berkas project ini. Kamu bisa menyimpannya di mana pun. Setelah itu klik tombol Create.

Kemudian, klik berkas Main.storyboard. Maka akan ditampilkan Interface Builder. Di dalamnya terdapat View Controller Scene. Tampilannya akan seperti ini.

Berikut tampilan yang akan kita buat.

Dari gambar, dapat dilihat bahwa pada orientasi portrait, halaman akan menampilkan konten:

1. Gambar yang memiliki tinggi sekitar 55% dari tinggi layar.
2. Informasi judul, tanggal rilis, dan deskripsi yang menempati sisa ruang yang berada di bawah gambar.

Sementara pada orientasi landscape, halaman akan menampilkan konten yang sama, tetapi berbeda dalam penyusunannya.

1. Gambar memiliki lebar 50% dari lebar layar.
2. Informasi judul, tanggal rilis, dan deskripsi menempati sisa ruang yang berada di samping kanan gambar.

Menyusun UI untuk Orientasi Portrait dengan Auto Layout

Sebelum menyusun UI, pastikan kamu memilih iPhone 15 Pro sebagai device.

Selanjutnya, klik tombol + atau Show Library untuk menampilkan Object Library. Kemudian pilih objek Image View dan seret atau drag object tersebut ke dalam View yang berada di View Controller.

Atur ukuran dan posisi Image View hingga kira-kira seperti ini.

Sekarang saatnya untuk menambahkan spacing constraint. Klik tombol Add New Constraint di bawah dan berikan nilai 0 untuk top, left, dan right.

Agar Image View memiliki tinggi sebesar 55% dari tinggi layar, maka kita harus mengatur tingginya menjadi Equal Height terhadap View yang menampungnya (container view).

Pilih Image View pada Document Outline, kemudian tekan tombol control di keyboard lalu seret (control-drag) dan arahkan ke object View. Setelah itu akan muncul pop-up menu, pilihlah Equal Height.

Pindah ke menu Size Inspector (ada di sisi kanan Xcode). Edit constraint Proportional Height To.

Ubah nilai Multiplier menjadi 0.55. Ini akan membuat ukuran Image View menjadi 55% dari ukuran layar atau container view-nya.

Tampilan Image View akan seperti ini dan pastikan constraint-nya seperti ini juga ya.

Selanjutnya kita akan menambahkan label-label yang merupakan judul, tanggal rilis, dan deskripsi. Sebelum itu, karena nantinya tampilan ini akan berbeda pada orientasi layar yang berbeda, akan lebih baik jika label-label ini ditampung di dalam suatu View.

Klik tombol + atau Show Library kemudian ketik “View” pada kolom pencarian. Object View yang kita cari tidak ditampilkan di paling atas. Scroll ke bawah pada hasil pencarian di Object Library sampai menemukan object View. Drag atau seret object View ke Document Outline sehingga posisi View tersebut berada di bawah object Image View.

Susunan Image View dan View akan seperti ini.

Tambahkan constraint dengan nilai 0 untuk top, left, right, dan bottom.

Gantilah nama View ini menjadi Game Info. Di Document Outline, pilih object View tersebut kemudian tekan tombol “return” di keyboard dan ganti namanya menjadi Game Info. Ke depannya kita akan menyebutnya sebagai Game Info.

Selanjutnya, kita akan menambahkan object Label ke dalam Game Info. Terdapat 4 object Label yang akan kita tambahkan. 

Untuk menambahkan object baru, lakukanlah langkah-langkah yang telah kita lakukan sebelumnya. 

Tambahkan object Label untuk menampung informasi judul. Pastikan object Label ini berada di dalam object Game Info. Pindah ke Attributes Inspector (ada di sisi kanan Xcode) dan ubah teks “Label” menjadi “Portal”. Kemudian ubah nilai Font menjadi Title 1.

Pilih Label Portal dan klik Add new constraint. Atur dengan nilai top, left, dan right sebesar 15. Pastikan untuk tidak memilih Constraint to margins.

Selanjutnya tambahkan kembali dua object Label. Satu sebagai label “Released:” dan satu lagi untuk menampung informasi tanggal rilis. Pastikan object Label ini berada di dalam object Game Info. Pada bagian Attributes Inspector, ubah salah satu teks Label menjadi “Released:”. Kemudian pilih Label lainnya dan ubah teksnya menjadi “October 9, 2007”.

Pilih Label “Released:” dan posisikan agar berada di bawah Label “Portal”. Kemudian tekan tombol Add new constraint. Atur dengan nilai top dan left sebesar 15 sehingga tampilan dan constraint-nya seperti ini.

Selanjutnya, pilih Label “October 9, 2007”. Posisikan Label tersebut agar berada di bawah Label “Portal” dan di sebelah kanan Label “Released:”. Kemudian tekan tombol Add new constraint. Atur dengan nilai top dan right sebesar 15 dan nilai left dengan 10. 

Sehingga tampilan dan constraint-nya seperti ini.

Constraint yang ditambahkan bergaris merah, artinya ada layout issues. Layout issues terjadi ketika ada constraint yang ambigu. Pada kasus ini, kita harus menentukan Label mana yang harus mempertahankan ukuran aslinya (intrinsic size). Kita akan memilih Label “Released:” yang mempertahankan ukuran aslinya karena teks atau konten pada Label ini tidak akan berubah. Kita tambahkan nilai Horizontal pada Content Hugging Priority dari 251 menjadi 252. Semakin besar nilai Content Hugging Priority, semakin besar pula ketahanan suatu object untuk mempertahankan ukuran aslinya. Penjelasan lebih lanjut tentang Content Hugging akan diberikan di bawah.

Selanjutnya, tambahkan object Label terakhir untuk menampung informasi deskripsi. Pastikan object ini berada di dalam Game Info. Pindah ke Attributes Inspector dan ubah teks “Label” menjadi “Every single time you click your mouse while holding a gun, you expect bullets to fly and enemies to fall. But here you will try out the FPS game filled with environmental puzzles and engaging story.”. Masih di Attributes Inspector, atur nilai Lines menjadi 0.

Pilih Label deskripsi tersebut dan posisikan agar berada di bawah label “Released:” dan  “October 9, 2007” kemudian klik Add new constraint. Atur dengan nilai top, left, right, dan bottom sebesar 15. Pastikan untuk uncheck Constraint to margins.

Jika sebelumnya ada layout issue pada Content Hugging Horizontal, sekarang ada layout issue pada Content Hugging Vertical.

Kita akan menetapkan agar tinggi Label deskripsi ini dapat fleksibel sehingga ia tidak perlu mempertahankan ukuran aslinya. Maka dari itu, kita akan menurunkan nilai Content Hugging Vertical-nya dari 251 menjadi 250.

Nice! Kita sudah memperbaiki layout issues. Selanjutnya, kita mau agar teks deskripsi tepat berada di bawah label tanggal rilis. Namun, hal ini tidak terjadi karena kita memberikan spacing constraint dengan nilai yang sama pada top dan bottom yaitu sebesar 15. Hal ini membuat label tersebut membesar sehingga konten yang berada di dalamnya terlihat seperti berada di tengah.

Cara untuk menyelesaikan ini adalah dengan mengubah constraint bottom yang sebelumnya “sebesar” 15, diubah menjadi “setidaknya” 15. Dengan ini kita mengubah operator sama dengan (=) menjadi lebih dari sama dengan (≥).

Pilih Label deskripsi, kemudian pada Size Inspector pilih constraint bottom yaitu Bottom Space To. Klik tombol Edit, ketika muncul pop up, ubah tanda sama dengan (=) menjadi lebih dari sama dengan (≥).

Nice! Namun, jika Device diubah menjadi iPhone SE (1st generation), kita akan mendapati layout issues seperti berikut.

Lagi-lagi hal ini terjadi karena constraint yang masih ambigu dan kita harus memilih object mana yang harus menyusut atau terpotong ketika ada batasan ruang. Karena kita mau Label deskripsi yang fleksibel, nilai dari Vertical Compression Resistance untuk Label deskripsi perlu dikurangi.

Pilih Label deskripsi, kemudian pada Size Inspector pilih ubah nilai Vertical pada Content Compression Resistance Priority dari 750 menjadi 749. Semakin besar nilai Content Compression Resistance Priority, semakin besar pula ketahanan suatu object untuk mempertahankan ukuran aslinya ketika ruang layout menjadi lebih kecil dari ukuran yang diinginkan. Penjelasan lebih lanjut tentang Content Compression akan diberikan di bawah. 

Keren! Sejauh ini kita sudah membangun UI yang adaptif dengan Auto Layout.

Sekilas tentang Content Hugging

Content hugging pada iOS adalah konsep dalam pengaturan tampilan (UI) yang menentukan seberapa “ketat” tampilan sebuah elemen (seperti label atau tombol) ingin mempertahankan ukurannya sendiri agar tidak diperluas oleh tata letak di sekitarnya.

Sederhananya, content hugging berfungsi seperti sebuah “pelukan” pada isi elemen. Misalnya, jika kamu memiliki label dengan teks “Halo”, content hugging menentukan seberapa besar label itu akan mempertahankan ukurannya hanya cukup untuk memuat kata “Halo”, dan tidak akan membiarkan ukurannya membesar jika tidak perlu.

Kamu bisa mengatur content hugging priority. Semakin tinggi nilainya, semakin kuat elemen tersebut menolak diperbesar ukurannya lebih dari yang diperlukan untuk menampilkan isinya.

Sekilas tentang Content Compression Resistance

Content compression pada iOS adalah kebalikan dari content hugging. Ini menentukan seberapa “rela” tampilan sebuah elemen (seperti label atau tombol) menyusut atau mengompres ukurannya ketika ada batasan ruang, sehingga isi elemen tersebut mungkin akan terpotong atau menjadi terlalu sempit.

Sederhananya, jika content hugging menjaga elemen agar tidak membesar, content compression menjaga elemen agar tidak menyusut terlalu banyak. Dengan pengaturan content compression resistance priority, kamu bisa menentukan prioritas seberapa besar tampilan elemen akan melawan untuk tidak dipaksa mengecil. Semakin tinggi prioritasnya, semakin besar kemauan elemen untuk mempertahankan ukurannya dan tidak menyusut, meskipun ada batasan ruang yang ketat.

Ada istilah menarik dari Keith Harrison dalam bukunya yang berjudul Modern Auto Layout.

• Content-Hugging dapat diibaratkan sebagai “Don’t Stretch Me”
• Compression-Resistance dapat diibaratkan sebagai “Don’t Squeeze Me”

Menyusun UI untuk Orientasi Landscape dengan Size Class

Sebenarnya dengan teknik Auto Layout sebelumnya sudah cukup untuk membuat tampilan yang adaptif. Namun, untuk menyempurnakan tampilan UI pada mode landscape, kita dapat memanfaatkan Size Class.

Berikut tampilan landscape yang akan kita buat.

Langkah pertama yang harus dilakukan adalah dengan mendaftarkan constraint yang telah kita tambahkan sebelumnya ke dalam Size Class untuk portrait yaitu Height Compact. Pastikan kamu memilih iPhone 15 Pro sebagai Device.

Buka Document Outline, pilih seluruh constraints yang telah ditambahkan sebelumya. Kamu bisa men-select constraint tersebut sambil menekan tombol Command.

Kemudian, buka Size Inspector. Klik tanda + yang berada di sebelah opsi Installed. 

Setelah itu, akan muncul pop-up menu. Pilih Width dengan nilai Any dan Height dengan nilai Regular kemudian klik Add Variation.

Setelah kamu menambahkan variasi, uncheck opsi Installed dan check opsi Installed pada hR.

Untuk memastikan bahwa constraints tersebut hanya terpasang pada orientasi portrait, kamu bisa mengubah orientasi device-nya menjadi landscape dengan mengklik tombol Orientation.

Dan jika kita buka Document Outline, constraints tidak lagi berwarna biru, tetapi berwarna abu-abu. Ini berarti constraints tersebut tidak aktif lagi pada orientasi landscape.

Sekarang saatnya kita menyusun ulang UI untuk orientasi landscape. Pertama, kita ingin Image View memiliki lebar sebesar setengah (50%) dari ukuran layar. Tentu saja untuk Game Info juga memiliki lebar setengah (50%) dari ukuran layar.

Karena beberapa object tidak muncul atau tidak tampil di View Controller, cara paling mudah untuk men-select object tersebut adalah melalui Document Outline. Pilih Game Info dari Document Outline, kemudian ubah posisi x menjadi 393 dan y menjadi 0.

Jika sebelumnya menambahkan spacing constraint melalui tombol Add new constraint,  kini kita menambahkan constraint dengan cara lain yaitu dengan control-drag. 

Pilih Image View, kemudian control-drag dari Image View ke Safe Area. Pilih constraint Space to Safe Area untuk top, leading (left), dan bottom.

Buka Size Inspector dan pastikan constraints Image View memiliki nilai 0 pada Align Leading (left), Align Bottom (bottom), dan Align Top (top). Jika nilainya tidak 0, kamu bisa mengubahnya, ya.

Untuk mengatur lebar dari Image View, kamu bisa melakukan control-drag ke arah View (container). Setelah muncul pop-up menu, pilihlah Equal Width.

Buka Size Inspector, Edit constraint Proportional Height To dan ubah nilai Multiplier menjadi 0.5. Ini akan membuat ukuran Image View menjadi 50% atau setengah dari ukuran layar atau container view-nya.

Sekarang saatnya mengatur spacing constraint untuk Game Info. Perkecil ukuran Game Info sehingga Game Info benar-benar berada di ruang yang tersisa (tidak bertumpuk dengan Image View).

Tambahkan spacing constraint dengan mengklik tombol Add new constraint dan berikan nilai 0 untuk seluruh sisi (top, left, right, dan bottom).

Selanjutnya, tambahkan spacing constraint pada Label yang tersisa.

1. Label judul dengan nilai 15 untuk top, left, dan right. 
2. Label “Released:” dengan nilai 15 untuk top dan left.
3. Label tanggal rilis dengan nilai 10 untuk left dan 15 untuk top dan right.
4. Label deskripsi dengan nilai 15 untuk seluruh sisi yaitu top, left, right, dan bottom. Jangan lupa untuk mengubah tanda sama dengan (=) menjadi lebih dari sama dengan (≥) pada constraint bottom.

Sehingga hasil akhirnya sebagai berikut.

Kita sudah berhasil menambahkan constraints untuk mode landscape, kini saatnya untuk mendaftarkan constraints tersebut pada Size Class Regular width.

Pilih seluruh constraints yang aktif (berwarna biru) pada Document Outline.

Kemudian buka Size Inspector. Klik tanda + yang berada di sebelah opsi Installed. 

Setelah itu, akan muncul pop-up menu. Pilih Width dengan nilai Any dan Height dengan nilai Compact kemudian klik Add Variation.

Setelah kamu menambahkan variasi, uncheck opsi Installed dan check opsi Installed pada hC.

Berikut tampilannya portrait dan landscape.

Tapi sepertinya ukurannya tidak sesuai dengan apa yang kita inginkan sebelumnya. Pada mode portrait, ukuran gambar sepertinya bukan 55% dan pada mode portrait sangat jelas bahwa ukurannya tidak 50%.

Sedikit Perbaikan Layout

Ukuran gambar yang tidak sesuai dengan yang kita harapkan terjadi karena kita sebelumnya mengatur nilai Equal Height dan Equal Width terhadap View.

Seharusnya kita mengatur nilai Equal Height dan Equal Width terhadap Safe Area. 

Untuk mengubah constraint Equal Height yang sebelumnya sudah kita tambahkan, buka Document Outline. Buka Constraints. Kemudian cari constraint yang memiliki angka 0.55.

Pilih constraint tersebut kemudian pindah ke Size Inspector. Ubah nilai properti Second Item yang sebelumnya Superview.Height menjadi Safe Area.

Selanjutnya, untuk mengubah constraint Equal Width, buka Document Outline. Buka Constraints. Kemudian cari constraint yang memiliki angka 0.5.

Pilih constraint tersebut kemudian pindah ke Size Inspector. Ubah nilai properti Second Item yang sebelumnya Superview.Width menjadi Safe Area.

Tampilan sudah diperbaiki! Jika kita lihat menggunakan preview, UI akan tampil dengan sangat baik.

Keren! Kita sudah mempelajari bagaimana menyusun UI dengan Auto Layout dan menyempurnakannya dengan Size Class.

Oh ya. Gambar poster Portal bisa kamu unduh di sini ya. 

Berikut link GitHub project AdaptiveUIExample.

• https://github.com/nazaralwi/AdaptiveUIExample

Penutup

Jadi, itulah Auto Layout. Kita dapat membangun UI yang adaptif hanya dengan Auto Layout.  Jika tertarik untuk mempelajari pengembangan aplikasi iOS, kamu dapat belajar di Learning Path iOS dari Dicoding, yaitu iOS Developer. Di dalamnya, kita akan belajar bagaimana cara membangun aplikasi iOS mulai dari tahap pemula hingga mahir..

Sekian artikel kali ini, sampai bertemu di artikel lainnya! Terima kasih.