Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS
Code

iOS Dari Awal Dengan Swift: Dasar-Dasar Tata Letak Otomatis

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called iOS From Scratch With Swift.
iOS From Scratch With Swift: First Steps With UIKit
iOS From Scratch With Swift: Table View Basics

Indonesian (Bahasa Indonesia) translation by Ibnukholil (you can also view the original English article)

Di artikel sebelumnya, kami membuat aplikasi sederhana dengan tidak lebih dari label dan tombol. Meskipun kesederhanaannya, aplikasi ini memiliki beberapa masalah tata letak. Dalam tutorial ini, Anda belajar cara mengatasi masalah tersebut menggunakan sistem tata letak Apple, Tata Letak Otomatis. Mari kita mulai dengan proyek baru.

Introduction

Buka Xcode dan buat proyek baru, pilih template Single View Application. Beri nama aplikasi Anda Auto Layout dan atur Perangkat ke Universal. Beri tahu Xcode tempat menyimpan proyek dan klik Create.

Configuring the Project

Ingat dari awal dalam seri ini, aplikasi universal berjalan di iPad dan iPhone (dan di iPod Touch). Ini berarti antarmuka pengguna harus beradaptasi dengan perangkat yang sedang berjalan. Mari kita jelajahi cara kerjanya dan masalah apa yang perlu kita selesaikan untuk menyelesaikannya.

Dalam proyek, buka Main.storyboard dan tambahkan lima label ke tampilan pengontrol tampilan. Seperti yang dapat Anda lihat pada gambar di bawah ini, saya menempatkan satu label di tengah-tengah tampilan dan satu di setiap sudutnya.

Adding Five Labels

Anda mungkin telah memperhatikan bahwa Xcode mencoba membantu Anda memposisikan label, menampilkan biru, panduan putus-putus ketika Anda mendekati tepi atau pusat tampilan. Tetaplah dengan saran Xcode dan minta label masuk ke posisi di bagian tepi dan bagian tengah tampilan.

Snapping a Label Into the Corner
Snapping a Label Into the Center

Karena kami menciptakan aplikasi universal, aplikasi akan terlihat bagus di iPad dan iPhone. Jalankan aplikasi di simulator dan pilih iPad Retina (atau simulator iPad lainnya) sebagai tujuan.

Setting the Destination to iPad Retina

Ouch. Antarmuka pengguna tidak terlihat bagus di iPad. Hanya label kiri atas yang diposisikan dengan benar.

The labels are not correctly positioned

Ubah tujuan ke iPhone 6 (atau simulator iPhone lainnya) dan jalankan aplikasi sekali lagi.

Setting the Destination to iPhone 6

Antarmuka pengguna tampak lebih buruk di iPhone. Dua label bahkan tidak terlihat di iPhone. Seperti pada iPad, hanya label kiri atas yang diposisikan dengan benar.

The labels are not correctly positioned

Tujuan dari tutorial ini adalah memperbaiki masalah antarmuka pengguna dengan Auto Layout. Sebelum kita dapat menerapkan Tata Letak Otomatis, kita perlu tahu apa itu dan bagaimana itu dapat membantu kita.

Apa itu Auto Layout?

Auto Layout diperkenalkan di iOS dengan rilis iOS 5, beberapa tahun yang lalu. Tata Letak Otomatis adalah sistem tata letak yang deskriptif dan dibangun di atas kendala. Ini berarti Anda memberitahu mesin layout bagaimana Anda ingin antarmuka pengguna ditata. Dengan kata lain, alih-alih memberi tahu mesin tata letak bahwa tombol harus diposisikan di lokasi tertentu, Anda menjelaskan di mana itu harus diposisikan.

Batasan digunakan untuk mendefinisikan atau menggambarkan tata letak. Misalnya, Anda memberi tahu mesin tata letak bahwa tombol harus terpusat secara horizontal dalam tampilan yang mengandung. Mesin layout mengambil satu set batasan, mengubahnya menjadi persamaan, dan mengatur frame elemen di antarmuka pengguna. Untuk membuat ini bekerja, Anda harus menambahkan banyak kendala untuk menghindari ambiguitas tentang posisi elemen.

Keuntungan dari Tata Letak Otomatis sederhana. Berkat sifat deskriptif dari Tata Letak Otomatis, mesin tata letak memperbarui antarmuka pengguna, terlepas dari dimensi atau orientasi perangkat yang dijalankan aplikasi Anda. Ini juga membuat aplikasi Anda di masa depan. Ketika Apple memperkenalkan perangkat dengan ukuran layar baru, aplikasi Anda akan secara otomatis menyesuaikan antarmuka penggunanya agar sesuai dengan ukuran layar baru. Ini tidak benar jika Anda mem-hard-kode antarmuka pengguna aplikasi Anda.

Setelah Anda mengetahui apa itu Tata Letak Otomatis dan cara kerjanya, inilah saatnya untuk mengeksplorasi bagaimana kami dapat menerapkan Tata Letak Otomatis untuk memperbaiki masalah tata letak dalam proyek kami.

Menambahkan Batasan

Apakah Anda ingat pedoman biru yang Anda lihat ketika Anda menambahkan label ke tampilan pengontrol tampilan? Itu bukan kendala yang Anda cari. Seperti saya katakan, mereka adalah panduan untuk membantu Anda menempatkan elemen antarmuka pengguna. Mereka tidak lebih dari petunjuk Xcode memberi Anda untuk tetap pada Human Interface Guidelines Apple.

Ada sejumlah cara untuk menambahkan batasan ke elemen antarmuka pengguna. Salah satu caranya adalah dengan menggunakan menu Pin di bagian bawah Interface Builder. Pilih label di kiri atas dan klik menu Pin di bagian bawah.

Opening the Pin Menu

Label di kiri atas tidak memiliki kendala apa pun. Mari kita ubah itu dengan menyematkan label ke kiri atas tampilan induk atau superview-nya. Menggunakan menu Pin, kita dapat menambahkan beberapa kendala sekaligus. Mari kita tambahkan batasan untuk mengatur lebar dan tinggi label untuk diperbaiki dengan mencentang kotak centang berlabel Lebar dan Tinggi. Seperti inilah tampilan menu Pin. Perhatikan Checkbox Constrain to margins tidak dicentang.

Adding Constraints to the Label

Di bagian bawah menu Pin, teks tombol sekarang bertuliskan Add 4 Constraints. Xcode mengatakan kepada kami bahwa kami belum menambahkan kendala apa pun. Klik tombol untuk menambahkan batasan yang kami tentukan di menu Pin. Posisi label sekarang didefinisikan atau dijelaskan oleh empat kendala. Ini divisualisasikan di storyboard oleh empat, garis biru di sekitar label.

Constraints of the Label

Sebelum melanjutkan, tambahkan batasan ke kanan atas, kiri bawah, dan label kanan bawah. Penting bagi Anda untuk menyematkan setiap label ke tepi terdekat dari pandangan induknya. Misalnya, label kanan bawah harus disematkan ke tepi bawah dan tepi kanan tampilan pengontrol tampilan. Ini adalah tampilan menu Pin untuk label kanan bawah.

Adding Constraints to the Bottom Right Label

Dengan batasan di tempat, jalankan aplikasi di simulator. Ini adalah apa yang seharusnya Anda lihat di iPhone 6 simulator. Itu terlihat jauh lebih baik. Label tengah belum memiliki batasan apa pun. Mari tambahkan beberapa sekarang.

This is looking much better

Pilih label pusat dan tambahkan dua batasan untuk memperbaiki lebar dan tinggi label, menggunakan menu Pin di bagian bawah. Apakah Anda berharap melihat dua garis biru? Jika Anda benar menambahkan batasan, Anda harus melihat garis merah, bukan garis biru. Mengapa demikian? Garis merah menunjukkan bahwa ada sesuatu yang salah. Xcode mengatakan kepada kita bahwa label tidak memiliki batasan yang cukup untuk menghindari ambiguitas. Deskripsi posisi label saat ini tidak lengkap.

Missing Constraints

Kami telah memberi tahu Xcode bahwa label harus memiliki lebar tetap dan tinggi tetap. Yang belum kami definisikan adalah posisi horizontal dan vertikal label. Anda dapat mengetahui lebih lanjut tentang masalah dengan memeriksa kesalahan pada panel di sebelah kiri. Anda harus melihat panah merah di sebelah kiri View Controller Scene. Klik tanda panah untuk membaca pesan kesalahan.

Xcode Error Messages
Xcode Error Messages

Kesalahan memberi tahu kita bahwa posisi X dan Y tidak terdefinisi. Jika Anda mengklik lingkaran merah di samping kesalahan, Xcode memberi Anda opsi untuk memperbaiki masalah dengan menambahkan kendala yang hilang. Jangan malas dan perbaiki masalah kita sendiri.

Untuk memusatkan label, terlepas dari dimensi dan orientasi perangkat aplikasi yang sedang berjalan, kita tidak bisa menggunakan menu Pin. Sebagai gantinya, kami menggunakan menu Align di sebelah kiri menu Pin. Dengan label yang dipilih, buka menu Align dan tambahkan dua batasan untuk memusatkan label pada tampilan induknya. Dengan menambahkan batasan ini, garis merah diganti dengan garis biru.

Adding Missing Constraints

Memeriksa Constraints

Saatnya untuk mempelajari lebih lanjut tentang constraints. Constraints tidak statis dan mereka pasti tidak ajaib. Anda dapat menambah, menghapus, dan memodifikasi batasan Sebagai contoh, mari kita lihat batasan label pusat. Pilih label dan buka Size Inspector di sebelah kiri. Bagian Constraints mencantumkan batasan ke pilihan saat ini, label tengah. Setiap constraint memiliki tombol Edit untuk mengubah atribut constraint.

Inspecting Constraints

Klik tombol Edit kendala yang membaca Width Equals: 42. Dengan memodifikasi properti Constant , Anda dapat mengubah lebar label. Setel Konstan ke 100 dan tekan Enter atau Return untuk melakukan perubahan. Ukuran label di papan cerita segera mencerminkan perubahan yang kami buat.

Modifying Constraints

Properti Prioritas dari kendala penting jika beberapa kendala bertentangan satu sama lain. Mari ilustrasikan ini dengan sebuah contoh. Pilih label pusat dan tambahkan batasan baru yang mengatur lebar label menjadi 200. Anda sudah tahu cara melakukan ini. Ketika Anda menambahkan kendala baru, Xcode mengeluh bahwa itu tidak dapat memenuhi kedua kendala pada saat yang bersamaan.

Conflicting Constraints

Pilih label dan buka Size Inspector untuk memeriksa kendala. Ada dua batasan pengaturan lebar label. Klik tombol Edit kendala yang mengatakan  Width Equals: 100 dan tetapkan Prioritas ke Tinggi (750). Lebar label berubah menjadi 200 di storyboard dan salah satu garis biru berubah dari padat menjadi putus-putus, menunjukkan bahwa kendala ini ditolak oleh kendala dengan prioritas yang lebih tinggi. Hambatan putus-putus masih aktif, tetapi saat ini tidak diterapkan karena prioritasnya lebih rendah dibandingkan dengan batasan yang mengatur lebar label menjadi 200.

Overruling Constraints

Ada cara lain untuk memecahkan masalah. Setel prioritas kedua constraints to Required (1000). Pada saat yang sama, ubah = to >= untuk kendala yang bertuliskan Width Equals: 100. Ini juga memecahkan masalah. Hasilnya tidak sama. Kedua kendala berlaku, bekerja sama untuk menentukan posisi label. Kendala sekarang mendefinisikan bahwa lebar label harus lebih besar dari atau sama dengan 100.

Collaborating Constraints

Menambahkan Lebih Banyak Constraints

Saya sudah menyebutkan bahwa ada beberapa cara untuk menambahkan kendala dalam pembangun antarmuka. Mari kita lihat teknik populer lainnya. Buka Object Library di sebelah kanan dan tambahkan bidang teks ke tampilan pengontrol tampilan. Untuk menyematkan bidang teks ke bagian atas tampilan, pilih bidang teks, tekan Kontrol, dan seret dari bidang teks ke bagian atas tampilan. Lihatlah screenshot di bawah ini untuk klarifikasi.

Another Way to Add Constraints

Dari menu yang muncul, pilih Vertical Spacing to Top Layout Guide. Panduan tata letak atas adalah panduan khusus yang ditempatkan di sepanjang tepi bawah bilah status dan bilah navigasi. Posisi panduan tata letak atas tergantung pada ada atau tidak adanya bilah status dan bilah navigasi di bagian atas.

Adding Vertical Spacing to Top Layout Guide

Bidang teks sekarang harus disematkan ke bagian atas tampilan. Seperti yang diharapkan, Xcode memberi tahu kita bahwa bidang teks tidak memiliki batasan yang cukup untuk menggambarkan posisinya secara jelas.

Adding a Constraint

Pilih bidang teks, tekan Control, dan seret ke label di sebelah kiri bidang teks. Dari menu, pilih Horizontal Spacing. Ulangi langkah ini untuk label di sebelah kanan bidang teks. Kita hampir sampai.

Adding More Constraints

Untuk menetapkan tinggi label agar tetap, pilih bidang teks, tekan Control, dan seret dari bagian atas bidang teks ke bagian bawah bidang teks. Pilih Tinggi dari menu yang muncul. Ini mendefinisikan kendala tentang bidang teks itu sendiri, tingginya.

Fixing the Height of the Text Field

Saya yakin Anda setuju bahwa dasar-dasar Tata Letak Otomatis mudah dimengerti. Kadang-kadang bisa cukup rumit. Apa yang kita bahas sejauh ini adalah dasar-dasar, Tata Letak Otomatis meregangkan otot-ototnya. Mari kita selesaikan tutorial ini dengan melihat masalah yang sangat umum yang mudah diselesaikan dengan Tata Letak Otomatis.

Beberapa Constraint

Tidak jarang Anda menginginkan sebuah subview untuk menjangkau lebar dan tinggi dari pandangan induknya. Tampilan tabel, misalnya, sangat sering memiliki ukuran yang sama dengan tampilan induknya. Mari kita lihat bagaimana kami dapat menangani ini menggunakan Tata Letak Otomatis.

Tambahkan tampilan dari Object Library ke tampilan pengontrol tampilan. Buka Attributes Inspector dan atur latar belakang tampilan menjadi biru untuk memastikannya menonjol. Jalankan aplikasi di simulator iPad untuk melihat apa yang kita mulai dengan.

Adding a Blue Subview

Anda dapat menekan Command + Left Arrow atau Command + Right Arrow untuk memutar perangkat. Sepertinya tampilan mempertahankan lebar dan tingginya, tetapi menempel di kiri atas. Tujuannya adalah untuk memiliki rentang lebar dan tinggi dari pandangan induknya. Pilih tampilan biru dan tambahkan batasan berikut menggunakan menu Pin.

Add Four Constraints to the Blue View

Sebelum Anda mengklik Add 4 Constraint, pastikan bahwa Anda menambahkan batasan dalam kaitannya dengan tampilan superview biru. Apa artinya? Kendala menggambarkan hubungan antara dua pandangan. Anda akan menerapkan batasan ini ke tampilan biru dalam hubungannya dengan saudara terdekatnya. Apa yang kita inginkan, bagaimanapun, adalah menambahkan kendala yang menentukan posisi pandangan biru dalam kaitannya dengan pandangan yang mengandung atau orang tua. Anda menetapkan apa yang dilihat batasan mendefinisikan dengan mengklik segitiga kecil di samping nomor (yang mendefinisikan konstanta kendala). Lihatlah screenshot berikut untuk klarifikasi.

Specifying the Constrained Views

Periksa kembali apakah setiap kendala berlaku untuk tampilan biru dan induknya atau mengandung tampilan. Saat Anda siap, tambahkan empat constraints.

Alih-alih garis biru, Anda mungkin melihat garis oranye dengan angka. Di Xcode, oranye berarti peringatan. Garis oranye memperingatkan Anda bahwa posisi saat ini dari tampilan biru tidak sejajar dengan posisi tampilan biru pada waktu proses. Pernahkah Anda memperhatikan garis-garis berwarna oranye di tepi tampilan induk pandang biru itu? Garis-garis putus-putus itu melambangkan bingkai tampilan biru jika kendala yang baru saja Anda terapkan berlaku. Itu terjadi pada waktu proses.

Orange Means Warning

Jika Anda tidak mempercayai saya, saya sarankan Anda menjalankan aplikasi di simulator iPad untuk melihat sendiri. Tampilan biru membentang lebar dan tinggi tampilan induknya, bahkan jika Anda memutar simulator dari potret ke lanskap dan sebaliknya.

Garis-garis oranye yang tidak perlu mengacaukan ruang kerja dan apa yang Anda lihat bukan apa yang Anda dapatkan pada waktu berjalan. Lebih baik memperbaiki masalah dengan memperbarui bingkai tampilan biru. Ini sederhana. Pilih tampilan biru dan pilih Update Frames dari menu Resolve Auto Layout Issues di kanan bawah.

Pastikan Anda memahami apa yang telah kami bahas dalam tutorial ini, karena kami akan membutuhkannya di sisa seri ini. Dalam tutorial berikutnya, kita akan membahas tampilan tabel dan kami akan menerapkan beberapa teknik yang dibahas dalam tutorial ini. Untuk mempelajari lebih lanjut tentang Tata Letak Otomatis, telusuri Panduan Auto Layout Guide Apple.

Kesimpulan

Mengatakan bahwa Tata Letak Otomatis sangat kuat adalah pernyataan yang meremehkan. Meskipun kami hanya menggores permukaan di tutorial ini, Anda seharusnya sudah tahu apa itu Auto Layout dan apa yang bisa dilakukan untuk Anda.

Di sisa seri ini, kami akan terus menggunakan Tata Letak Otomatis. Jika Anda Mendapatkan Stuck, pastikan untuk mengunjungi kembali tutorial ini atau kirimi saya line di komentar. Anda juga dapat menghubungi saya di Twitter.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.