Pengantar Desain Adaptif

Apple telah mendorong pengembang untuk membuat aplikasi iOS universal untuk beberapa waktu sekarang. Di WWDC 12, Tata Letak Otomatis dirilis untuk iOS dan peningkatan diikuti untuk itu di iOS 7. Dan sekarang dengan iOS 8, desain adaptif telah diperkenalkan, yang mencakup beberapa API baru dan peningkatan Interface Builder untuk mempromosikan pengembangan binari universal.

Dalam tutorial ini, kita akan melihat apa arti sebenarnya desain adaptif dan bagaimana menggunakan beberapa konsepnya. Pada akhir tutorial, Anda akan dapat menggunakan desain adaptif untuk membuat aplikasi universal menggunakan alur kerja intuitif. Kami akan menggunakan kelas ukuran baru untuk membuat aplikasi fiksi untuk toko komputer yang berfungsi di semua perangkat.

1. Apa itu Desain Adaptif?

Desain adaptif mencakup beberapa ide dan teknik baru dan bukannya hanya satu, API tunggal. Beberapa komponen desain adaptif termasuk koleksi trait, kelas ukuran, font adaptif, Tata Letak Otomatis, dan banyak lagi. Pada intinya, desain adaptif ada untuk membantu pengembang membuat aplikasi universal dan aplikasi terlokalisasi dengan mudah.

Jika Anda telah mengembangkan aplikasi iOS selama beberapa tahun, Anda mungkin telah menyadari secara langsung mengapa desain adaptif dapat membantu. Autoresizing masks mengalami cepat rusak, melacak orientasi bisa melelahkan, dan mengembangkan jalur kode yang berbeda berdasarkan jenis perangkat tidak dapat diskalakan. Desain adaptif bertujuan untuk mengatasi semua masalah ini.

Sekarang kita telah mengidentifikasi apa itu desain adaptif dan mengapa kita harus menggunakannya, unduh proyek sampel untuk memulai.

2. Kelas Ukuran

Kelas ukuran adalah fitur besar dari desain adaptif. Dengan menggunakannya, Anda dapat menghilangkan kode dan logika yang membahas berbagai ukuran layar, orientasi, atau perangkat tertentu. Ini juga membuatnya mudah untuk memiliki hanya satu antarmuka untuk semua perangkat yang tersedia.

Ada dua jenis kelas ukuran, compact dan regular. Setiap kelas ukuran dapat diwakili secara horizontal dan vertikal, dan setiap perangkat diberi kelas ukuran untuk kedua orientasi. Ukuran regular mewakili jumlah "real" layar real estate, seperti pada iPad. Juga disertakan paradigma antarmuka yang memberikan ilusi ruang berlebih, seperti tampilan gulir pada iPhone.

Di sisi lain, ukuran layar "compact" menunjukkan jumlah ruang yang lebih kecil. iPhone atau iPod Touch umumnya akan masuk dalam kategori ini. Namun tentu saja itu bukan aturan, bagaimanapun. Misalnya, iPhone 6 Plus mendukung kelas ukuran reguler secara horizontal. Tabel berikut mencantumkan perangkat iOS dan kelas ukurannya masing-masing:

Langkah 1: Memilih Kelas Ukuran di Interface Builder

Buka Main.storyboard di dalam proyek. Anda akan melihat bahwa kanvas itu berbentuk seperti persegi panjang. Meskipun menggelegar pada awalnya, ini sebenarnya menampilkan komponen inti dari desain adaptif. Melihat ke bagian bawah pembangun antarmuka, Anda akan melihat tombol yang mengatakan wAny hAny.

Ini adalah singkatan dari Any Width, Any Height, yang menunjukkan bahwa setiap perubahan pada antarmuka pengguna di sini berlaku untuk setiap kelas ukuran. Jika Anda mengklik tombol, muncul grid yang memungkinkan Anda untuk beralih di antara kelas ukuran yang berbeda:

Pada contoh di atas, Compact Width | Compact Height dipilih dan ada titik hijau di kotak biru. Titik hijau menunjukkan kelas ukuran mana yang diwakili. Dalam hal ini, perubahan hanya berlaku untuk iPhone 3,5, 4, dan 4,7 inci dalam lanskap.

Perhatikan bahwa ada sedikit perbedaan dalam pengkalimatannya, karena Interface Builder menggunakan istilah lebar dan tinggi sedangkan kelas ukuran menggunakan istilah horizontal dan vertikal. Lebar sesuai dengan horisontal dan tinggi sesuai dengan vertikal.

Jika Anda mengubah kelas ukuran yang saat ini dipilih, pastikan untuk kembali ke Any Width | Any Height.

Langkah 2: Menambahkan Gambar

Seret tampilan gambar ke kanvas view controller dari Object Library. Menggunakan Size Inspector, atur posisi X ke 0 poin dan posisi Y menjadi 72 poin. Atur width menjadi 600 poin dan height menjadi 218 poin. Buka Attributes Inspector dan ubah mode tampilan menjadi aspect fit dan image menjadi "Laptop". Kanvas Anda akan terlihat seperti gambar di bawah ini:

Langkah 3: Menambahkan Label

Buka Object Library sekali lagi dan seret label ke kanvas. Buka Size Inspector dan atur posisi X label ke 16 poin dan posisi Y menjadi 312 poin. Untuk ukuran, atur width menjadi 568 poin dan height menjadi 242 poin.

Di Attributes Inspector, buat perubahan berikut:

• atur Text menjadi "Silver Laptop"
• ubah Font Size menjadi System 100.0 poin
• atur Alignment ke Center
• atur Lines ke 0

Langkah 4: Menambahkan Constraint

Sekarang kita akan menambahkan constraint untuk label dan tampilan gambar. Di bagian bawah Interface Builder, klik Reset to Suggested Constraints di bawah bagian All Views in View Controller. Jika opsi ini berwarna abu-abu, maka pastikan salah satu tampilan di kanvas dipilih.

Karena tampilan gambar memiliki latar belakang putih yang sama dengan tampilan di dalamnya, kami akan mengubah warna latar belakang tampilan untuk memudahkan membedakan keduanya. Pilih View dari document outline dan ubah background color menjadi Group Table View Background Color.

Langkah 5: Bangun dan Jalankan

Di bagian atas Xcode, pilih iPad Retina untuk digunakan untuk iOS Simulator. Bangun dan jalankan aplikasi dengan menekan Command + R. Aplikasi ini sepertinya terlihat baik untuk iPad, tetapi kami ingin memastikan itu ditampilkan dengan benar di setiap perangkat.

3. Pratinjau Langsung

Bangun dan jalankan aplikasi Anda hanya untuk melihat bagaimana perilaku antarmuka pengguna Anda bisa menjadi tugas yang membosankan. Untungnya, Xcode 6 telah menambahkan kemampuan untuk mendapatkan rendering langsung antarmuka pengguna Anda pada perangkat apa pun dalam orientasi apa pun. Ini membantu kami menyelesaikan masalah tata letak otomatis lebih cepat daripada menjalankan aplikasi di iOS Simulator setiap waktu.

Langkah 1: Mengaktifkan Preview Assistant

Di bagian atas Xcode, klik tombol Asisten Editor.

Ini membagi editor Xcode dalam dua panel. Di panel kanan, pilih Automatic > Preview > Main.storyboard di jump bar.

Langkah 2: Menambahkan Perangkat ke Pratinjau

Interface Builder sekarang menunjukkan pratinjau langsung antarmuka pengguna pada iPhone 4 inci. Seperti yang diharapkan, antarmuka pengguna kurang dari ideal di iPhone. Jika Anda tidak melihat apa pun di pratinjau, klik view controller di panel kiri untuk menyegarkannya.

Di panel kanan, mengklik tombol + di bagian bawah memungkinkan Anda menambahkan lebih banyak perangkat ke pratinjau. Silakan dan tambahkan iPad untuk pratinjau juga.

Langkah 3: Mengganti orientasi

Arahkan kursor ke iPhone di asisten editor ke arah bawah. Di sebelah kiri nama perangkat, ada tombol yang mengubah orientasi saat ini. Klik sekali untuk mengalihkan pratinjau iPhone ke orientasi lanskap.

Dengan orientasi dalam lanskap, antarmuka pengguna terlihat lebih buruk. Tampilan gambar tidak muncul sama sekali dan teks label terlalu besar.

4. Memasang Kelas Ukuran Untuk Constraint Spesifik

Untuk memperbaiki antarmuka pengguna, kami akan menambahkan beberapa constraint yang khusus untuk kelas ukuran tertentu. Ini adalah keunggulan lain dari desain adaptif. Kita dapat memberi tahu antarmuka pengguna bagaimana seharusnya menampilkan tampilan untuk kelas ukuran tertentu, menggunakan storyboard yang sama. Sebelumnya, ini biasanya membutuhkan menggunakan dua storyboard yang berbeda dan memuat yang benar pada saat runtime.

Langkah 1: Menambahkan Constraint Dasar Tampilan Gambar

Kami pertama-tama akan menambahkan Constraint yang seharusnya berfungsi untuk sebagian besar perangkat dan memperbaikinya dari sana. Mulailah dengan menghilangkan constraint yang ditambahkan sebelumnya dengan mengklik tampilan apa pun di kanvas dan pilih Editor > Resolve Auto Layout Issues > All Views in View Controller - Clear Constraints.

Pilih tampilan gambar, klik tombol Align, pilih Horizontal Center in Container, dan klik Add 1 Constraint.

Buka constraint yang baru saja kita tambahkan di Size Inspector di sebelah kanan dan klik dua kali untuk mengeditnya.

Constraint memiliki pusat superview sama dengan pusat tampilan gambar, tetapi kami ingin sebaliknya. Klik Second Item dan pilih Reverse First And Second Item untuk memperbaiki masalah.

Selanjutnya, tekan Control dan seret dari tampilan gambar ke View di dalam outline dokumen di sebelah kiri, dan pilih Equal Heights. Pilih constraint di Size Inspector dan ubah multiplier constraint menjadi 0,4. Ini akan memaksa tinggi tampilan gambar untuk menjadi sama dengan tinggi superview atau setidaknya 40 persen dari itu - mana yang akhirnya menjadi lebih pendek.

Selanjutnya, klik tombol Pin dan pilih jarak atas dan bawah ke tetangga terdekat. Untuk spasi bawah, masukkan 18 poin. Spasi atas seharusnya sudah diatur ke 0 poin. Pastikan Constrain to margins tidak dicentang karena kami tidak ingin menambahkan view. Klik Add 2 Constraints di bagian bawah untuk menambahkan constraint.

Klik dua kali constraint Bottom Space di Size Inspector untuk mengeditnya. Ubah Relation menjadi Greater Than or Equal. Untuk menyelesaikan constraint tampilan gambar, Control dan seret dari tampilan gambar ke label dan pilih Equal Heights.

Constraint untuk tampilan gambar akan terlihat seperti ini:

Langkah 2: Menambahkan Constraint Basis Label

Karena constraint yang ditambahkan ke tampilan gambar, label sudah memiliki tinggi dan jarak vertikal dari tampilan gambar yang ditambahkan. Pilih label dan klik tombol Pin untuk menambahkan constraint spasi awal, akhir, dan vertikal seperti yang ditunjukkan pada gambar di bawah ini.

Jika Anda melihat pratinjau aplikasi sekarang di asisten editor, constraint telah membuat segalanya menjadi lebih baik. Namun, masih ada masalah ketika aplikasi menggunakan kelas ukuran horisontal kompak seperti yang Anda lihat di bawah (tengah).

Dalam hal ini, akan lebih baik untuk memiliki tampilan gambar dan label berdampingan daripada di atas satu sama lain.

Langkah 3: Menambahkan Constraint Horizontal Kompak

Menggunakan tombol toggle size class di bagian bawah, pilih Compact Width | Compact Height. Bilah berubah menjadi warna biru untuk menunjukkan Anda sekarang mengedit antarmuka pengguna untuk kelas ukuran tertentu.

Pilih tampilan gambar, buka Size Inspector, dan perbarui framenya seperti yang ditunjukkan pada gambar di bawah ini.

Selanjutnya, pilih label dan perbarui frame di Size Inspector seperti yang ditunjukkan di bawah ini.

Dengan label yang masih dipilih dan Size Inspector terbuka, pilih constraint label dan hapus dengan menekan Delete. Anda dapat memilih beberapa constraint dengan menekan tombol Shift. Ini akan menghapus constraint yang kami tambahkan sejauh ini, tetapi hanya untuk kelas ukuran ini.

Lakukan hal yang sama untuk tampilan gambar dengan memilihnya, membuka Size Inspector, memilih constraint, dan menekan Delete. Kami sekarang dapat menambahkan constraint untuk memastikan tampilan gambar dan label diposisikan berdampingan.

Untungnya, Xcode dapat dengan mudah mengetahui constraint ini bagi kami. Dengan tampilan gambar atau label yang dipilih, pilih Editor > Resolve Auto Layout Issues > All Views in View Controller - Reset to Suggested Constraints.

Langkah 5: Pratinjau Constraint yang Diperbarui

Buka Size Inspector untuk tampilan gambar. Anda akan melihat bahwa ada beberapa consraint yang terdaftar, tetapi beberapa kelabu dan beberapa tidak. Ini menunjukkan constraint mana yang aktif untuk kelas ukuran saat ini.

Jika Anda mengklik dua kali pada salah satu dari mereka, bagian bawah menunjukkan kepada kami kelas ukuran mana constraint yang aktif untuk itu. Gambar di bawah ini menunjukkan bahwa constraint dipasang untuk Compact Width | Compact Height dan dinonaktifkan untuk Regular Width | Regular Height. Mengklik tombol x atau + mengaktifkan atau menonaktifkan constraint untuk kelas ukuran yang diberikan.

Buka preview assistant editor lagi dan tambahkan iPhone 3,5 inci dalam mode lansekap jika belum ada. Kita dapat melihat bahwa kita telah mencapai tata letak yang sepenuhnya berbeda untuk perangkat tertentu dalam orientasi lanskap - semuanya dalam satu storyboard.

5. Teks Dinamis

Hal terakhir yang harus diatasi adalah ukuran font. Sementara frame sebenarnya dari tampilan gambar dan label bekerja dengan baik, font terkadang dapat terpotong. Desain adaptif telah menambahkan opsi baru bagi pengembang untuk menangani skenario jenis ini.

Langkah 1: Edit Skala Font

Pilih label dan buka Attributes Inspector di sebelah kanan. Di bawah Autoshrink, pilih Minimum Font Scale dan atur ke 0.4.

Langkah 2: Menambahkan Kelas Ukuran Untuk Spesifik Font

Mengedit skala font akan cukup untuk sebagian besar kasus. Namun, dalam aplikasi kami, isi label dapat dibaca ukuran kelas untuk Compact Width | Compact Height, tetapi tidak ideal. Jika Anda membuka preview assistant editor, Anda akan melihat "p" dalam kata "laptop" ada di barisnya sendiri.

Dengan label yang dipilih, klik tombol + di sebelah Font di Attributes Inspector. Ini membuka menu untuk memilih kelas ukuran untuk menerapkan font tertentu. Pilih Compact Width | Compact Height.

Mirip dengan constraint spesifik kelas ukuran, font telah ditambahkan untuk kelas ukuran yang kami pilih. Ubah font size menjadi 50 poin. Sekarang, buka preview assistant editor sekali lagi dan verifikasi font terlihat sempurna di setiap perangkat.

Kemampuan untuk menambahkan font adaptif sangat kuat. Aplikasi pelokalan sepele ketika Anda dapat mengontrol ukuran font lebih tepat dengan teks dinamis.

6. Teknologi Desain Adaptif Lainnya

Meskipun kelas ukuran jelas merupakan fitur utama, ada banyak API desain dan kemajuan adaptif lainnya yang belum saya bahas dalam tutorial ini. Misalnya, view controller sekarang sesuai dengan protokol UITraitEnvironment. Ini berarti view controller memiliki properti traitCollection yang melacak kelas ukuran apa yang saat ini ditampilkan.

Jika Anda menikmati membuat antarmuka pengguna dalam kode, properti traitCollection memberi Anda kemampuan yang sama seperti kelas ukuran di Interface Builder. Anda dapat diberitahu ketika kelas ukuran berubah dan melakukan pembaruan yang diperlukan untuk constraint atau antarmuka pengguna Anda.

API bermanfaat lainnya adalah UIPopoverController. Jika sebelumnya Anda telah mengembangkan aplikasi universal, saya yakin Anda telah melihat kode seperti ini:

1

UIViewController *contentVC = //content

2

3

if([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)

4

{

5

    UIPopoverController *popVC = [[UIPopoverController alloc]

6

initWithContentViewController:contentVC];

7

8

    [popVC presentPopoverFromBarButtonItem:item

9

permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];

10

}

11

else

12

{

13

    [self presentViewController:contentVC animated:YES completion:nil];

14

}

Pada iOS 8, tidak ada lagi kebutuhan untuk memeriksa perangkat mana aplikasi berjalan saat menggunakan kelas UIPopoverController. Kelas UIPopoverController sekarang juga mendukung iPhone dan iPod Touch.

Sejauh aset gambar, perhatikan bahwa sekarang ada ukuran @3x. Ini karena layar Retina HD yang ditemukan pada iPhone 6 Plus. Jika Anda membuka file Images.xcassets di proyek, Anda akan melihatnya di bawah set gambar yang disediakan.

Kesimpulan

Desain adaptif mungkin merupakan perubahan terpenting dalam pengembangan iOS dalam beberapa tahun. Sebelum desain adaptif, aplikasi universal tidak mudah dikembangkan dan skalabilitas dalam proyek semacam itu bisa menjadi masalah. Semoga Anda sudah cukup belajar dari tutorial ini untuk menghindari masalah-masalah itu dan memasukkan desain adaptif ke dalam aplikasi Anda sendiri.