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

iOS dari awal dengan Swift: Asas Susun Atur Automatik

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

Malay (Melayu) translation by Muhammad Nabil (you can also view the original English article)

Dalam artikel sebelumnya, kami membuat aplikasi mudah dengan tidak lebih daripada label dan butang. Walaupun kesederhanaannya, aplikasi ini mempunyai beberapa masalah susun atur.  Dalam tutorial ini, anda belajar bagaimana untuk mengatasi masalah ini dengan menggunakan sistem susun atur Apple, Layout Automatik.  Mari kita mulakan dengan projek baru. 

Pengenalan 

Buka Xcode dan buat projek baru, pilih templat Permohonan Lihat Tunggal .  Namakan Layout Autoaplikasi anda dan tetapkan Peranti ke Universal .  Beritahu Xcode di mana untuk menyelamatkan projek dan klik Buat .

Configuring the Project

Ingat dari awal dalam siri ini, aplikasi universal berjalan pada iPad dan iPhone (dan pada iPod Touch).  Ini bermakna bahawa antara muka pengguna mesti menyesuaikan diri dengan peranti yang sedang berjalan. Mari kita terokai bagaimana ia berfungsi dan masalah yang perlu kita selesaikan untuk menyelesaikannya.

Dalam projek ini, buka Main.storyboard dan tambahkan lima label ke paparan pengawal paparan.  Seperti yang anda lihat dalam imej di bawah, saya meletakkan satu label di tengah-tengah paparan dan satu di setiap sudut.

Adding Five Labels

Anda mungkin mendapati bahawa Xcode cuba membantu anda meletakkan label, menunjukkan panduan biru, berlari-lari ketika anda mendekati tepi atau tengah paparan.  Terus mencadangkan Xcode dan mempunyai label masukkan kedudukan di pinggir dan pusat paparan.

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

Kerana kita mencipta aplikasi sejagat, aplikasi itu akan kelihatan baik pada iPad dan iPhone.  Jalankan aplikasi dalam simulator dan pilih iPad Retina (atau simulator iPad lain) sebagai destinasi.

Setting the Destination to iPad Retina

Ouch.  Antara muka pengguna tidak kelihatan bagus pada iPad.  Hanya label kiri atas diletakkan dengan betul.

The labels are not correctly positioned

Tukar destinasi ke iPhone 6 (atau simulator iPhone lain) dan jalankan semula aplikasi itu.

Setting the Destination to iPhone 6

Antara muka pengguna kelihatan lebih buruk pada iPhone.  Dua label tidak kelihatan di iPhone.  Seperti pada iPad, hanya label kiri atas diletakkan dengan betul.

The labels are not correctly positioned

Tujuan tutorial ini ialah untuk memperbaiki masalah antara muka pengguna dengan Layout Auto.  Sebelum kita boleh menggunakan Layout Automatik, kita perlu tahu apa itu dan bagaimana ia dapat membantu kita.

Apakah Layout Auto?

Layout Auto diperkenalkan pada iOS dengan pembebasan iOS 5, beberapa tahun yang lalu.  Tata Letak Automatik adalah sistem susun atur yang bersifat deskriptif dan dibina berdasarkan kekangan.  Ini bermakna anda memberitahu enjin susun atur bagaimana anda mahu antara muka pengguna disusun. Dalam erti kata lain, bukannya memberitahu enjin susun atur bahawa butang itu mesti diletakkan di lokasi tertentu, anda menjelaskan di mana ia harus diletakkan.

Had digunakan untuk menentukan atau menggambarkan susun atur.  Contohnya, anda memberitahu enjin susun atur bahawa butang mesti berpusat secara mendatar dalam pandangan bahawa ia mengandungi. Enjin susun atur mengambil satu set sempadan, mengubahnya menjadi persamaan, dan mengatur elemen bingkai dalam antara muka pengguna.  Untuk membuat kerja ini, anda perlu menambah banyak halangan untuk mengelakkan kekaburan tentang kedudukan elemen.

Kelebihan Layout Automatik yang mudah.  Terima kasih kepada sifat deskriptif Layout Automatik, enjin susun atur mengemas kini antara muka pengguna, tanpa mengira dimensi atau orientasi peranti aplikasi anda sedang berjalan.  Ini juga membuat permohonan anda pada masa akan datang.  Apabila Apple memperkenalkan peranti dengan saiz skrin baharu, aplikasi anda akan secara automatik melaraskan antara muka penggunanya agar sesuai dengan saiz skrin baharu.  Ini tidak benar jika anda keras kodkan antara muka pengguna aplikasi anda.

Sebaik sahaja anda tahu Layout Automatik dan bagaimana ia berfungsi, tiba masanya untuk meneroka bagaimana kami boleh menggunakan Layout Automatik untuk memperbaiki masalah susun atur dalam projek kami.

Menambah Had

Adakah anda teringat garis panduan biru yang anda lihat apabila anda menambah label pada paparan pengawal paparan?  Itu bukan halangan yang anda cari.  Seperti yang saya katakan, mereka adalah panduan untuk membantu anda meletakkan elemen antara muka pengguna.  Mereka tidak lebih daripada arahan Xcode yang memberikan anda untuk mematuhi Garis Panduan Antara Muka Manusia Apple.

Terdapat beberapa cara untuk menambah sekatan ke elemen antara muka pengguna.  Salah satu cara ialah menggunakan menu Pin di bahagian bawah Builder Interface .  Pilih label di kiri atas dan klik menu Pin di bahagian bawah.

Opening the Pin Menu

Label di kiri atas tidak mempunyai sebarang halangan.  Mari kita ubahnya dengan memasukkan label ke kiri pandangan ibu bapa atau penyeliaan.  Menggunakan menu Pin , kita boleh menambah beberapa halangan sekaligus.  Mari tambahkan had untuk menetapkan lebar dan ketinggian label untuk diperbetulkan dengan menyemak kotak pilihan dilabel Lebar dan Ketinggian .  Inilah yang kelihatan seperti menu Pin .  Perhatikan Membina Kotak Cek margin tidak diperiksa.

Adding Constraints to the Label

Di bahagian bawah menu Pin , teks butang kini mengatakan Tambah 4 Kekangan .  Xcode memberitahu kami bahawa kami tidak menambah sebarang halangan.  Klik butang untuk menambah sekatan yang kami tetapkan dalam menu Pin .  Kedudukan label kini ditakrifkan atau dijelaskan oleh empat kekangan.  Ini divisualisasikan di papan cerita oleh empat, garis biru di sekeliling label.

Constraints of the Label

Sebelum meneruskan, tambahkan had ke atas kanan, bawah kiri dan bawah kanan label.  Adalah penting bagi anda untuk memasukkan setiap label ke tepi paling dekat pandangan ibu bapa.  Sebagai contoh, label kanan bawah mesti disematkan ke tepi bawah dan tepi kanan paparan pengawal paparan.  Ini adalah paparan menu Pin untuk label kanan bawah.

Adding Constraints to the Bottom Right Label

Dengan sekatan di tempat, jalankan aplikasi dalam simulator.  Inilah yang harus anda lihat dalam simulator iPhone 6.  Itu kelihatan lebih baik.  Label tengah tidak mempunyai apa-apa sekatan.  Mari tambahkan beberapa sekarang.

This is looking much better

Pilih label pusat dan tambahkan dua sekatan untuk membetulkan lebar dan ketinggian label, menggunakan menu Pin di bahagian bawah.  Adakah anda mengharapkan untuk melihat dua garis biru? Sekiranya anda menambah sempadan dengan betul, anda seharusnya melihat garis merah, bukan garis biru.  Mengapa itu?  Garis merah menunjukkan sesuatu yang salah.  Xcode memberitahu kami bahawa label tidak mempunyai had yang cukup untuk mengelakkan kekaburan.  Keterangan kedudukan label semasa tidak lengkap.

Missing Constraints

Kami telah memberitahu Xcode bahawa label mesti mempunyai lebar tetap tetap dan tinggi.  Apa yang kita belum jelas ialah kedudukan mendatar dan menegak label.  Anda boleh mengetahui lebih lanjut mengenai masalah ini dengan menyemak ralat di panel di sebelah kiri.  Anda harus melihat anak panah merah di sebelah kiri Lihat Pemandangan Pengawal .  Klik anak panah untuk membaca mesej ralat.

Xcode Error Messages
Xcode Error Messages

Kesilapan memberitahu kami bahawa kedudukan X dan Y tidak ditentukan.  Jika anda mengklik bulatan merah di sebelah ralat, Xcode memberi anda pilihan untuk membetulkan masalah dengan menambahkan halangan yang hilang.  Jangan malas dan selesaikan masalah kita sendiri.

 Untuk memusatkan label, tanpa mengira dimensi dan orientasi peranti aplikasi yang sedang berjalan, kita tidak boleh menggunakan menu Pin .  Sebaliknya, kami menggunakan menu Align di sebelah kiri menu Pin.  Dengan label yang dipilih, buka menu Align dan tambahkan dua sekatan untuk memusatkan label pada paparan ibu bapa.  Dengan menambah had ini, garis merah digantikan oleh garis biru.

Adding Missing Constraints

Semak Kekangan

Sudah tiba masanya untuk mengetahui lebih lanjut mengenai kekangan.  Kekangan tidak statik dan mereka tidak pasti ajaib.  Anda boleh menambah, memadam dan mengubah suai sekatan Sebagai contoh, mari kita lihat sempadan label pusat.  Sebagai contoh, mari kita lihat kekangan label tengah Pilih label dan buka Inspektor Saiz di sebelah kiri.  Bahagian Kekangan menyenaraikan had untuk pemilihan semasa, label pertengahan.  Setiap kekangan mempunyai butang Edit untuk mengubah sifat kekangan.

Inspecting Constraints

Klik kekunci butang Edit yang membaca Lebar bersamaan: 42 .  Dengan mengubah suai harta yang berterusan , anda boleh menukar lebar label.  Tetapkan Terus ke 100 dan tekan Enter atau Kembali untuk membuat perubahan.  Saiz label di papan cerita dengan serta-merta mencerminkan perubahan yang kami buat.

Modifying Constraints

Ciri-ciri utama kekangan penting jika sesetengah kekangan bertentangan antara satu sama lain.  Mari kita gambarkan ini dengan contoh.  Pilih label pusat dan tambahkan had baru yang menetapkan lebar label kepada 200 .  Anda sudah tahu bagaimana untuk melakukannya.  Apabila anda menambah kekangan baru, Xcode mengadu bahawa ia tidak dapat memenuhi kedua-dua kekangan pada masa yang sama.

Conflicting Constraints

Pilih label dan buka Inspektor Saiz untuk memeriksa kekangan tersebut.  Terdapat dua sekatan pada tetapan lebar label.  Klik butang Edit kekangan yang mengatakan Lebar bersamaan: 100 dan tetapkan Keutamaan Tinggi (750) .  Lebar label berubah menjadi 200 dalam papan cerita dan salah satu daripada garis biru berubah dari pepejal hingga putus-putus, menunjukkan bahawa kekangan ini ditolak oleh kekangan keutamaan yang lebih tinggi.  Rintangan putus-putus masih aktif, tetapi pada masa ini tidak dilaksanakan kerana keutamaannya lebih rendah daripada batas yang menetapkan lebar label menjadi 200

Overruling Constraints

Ada cara lain untuk menyelesaikan masalah.  Tetapkan kekangan keutamaan kedua kepada Diperlukan (1000) .  Pada masa yang sama, change = to > = untuk kekangan yang membaca Lebar bersamaan: 100 . Ini juga menyelesaikan masalah.  Hasilnya tidak sama.  Kedua-dua kekangan itu berlaku, bekerja sama untuk menentukan kedudukan label.  Kekangan sekarang mendefinisikan bahawa lebar label mestilah lebih besar daripada atau sama dengan 100 .

Collaborating Constraints

Tambah Lebih banyak Kekangan

Saya telah menyebut bahawa terdapat beberapa cara untuk menambah kekangan kepada pembina antara muka.  Mari kita lihat teknik popular yang lain.  Buka Perpustakaan Objek di sebelah kanan dan tambahkan medan teks ke paparan pengawal paparan.  Untuk menanamkan medan teks ke bahagian atas paparan, pilih medan teks, tekan Control , dan seretnya dari medan teks ke bahagian atas paparan. Lihat tangkapan skrin di bawah untuk penjelasan. Untuk menanamkan medan teks ke bahagian atas paparan, 

Another Way to Add Constraints

Dari menu yang muncul, pilih Spek Menegak ke Panduan Layout Teratas .  Panduan tata letak teratas adalah panduan khas yang diletakkan di sepanjang tepi bawah bar status dan bar navigasi.  Kedudukan panduan tata letak teratas bergantung pada kehadiran atau ketiadaan bar status dan bar navigasi di atas.

Adding Vertical Spacing to Top Layout Guide

Bidang teks mesti disematkan di bahagian atas paparan.  Seperti yang dijangkakan, Xcode memberitahu kami bahawa medan teks tidak mempunyai had yang mencukupi untuk menjelaskan kedudukannya dengan jelas.

Adding a Constraint

Pilih medan teks, tekan Control , dan seretnya ke label ke kiri medan teks.  Dari menu, pilih Spasi Mendatar.  Ulangi langkah ini untuk label di sebelah kanan medan teks.  Kami hampir di sana.

Adding More Constraints

Untuk menetapkan ketinggian label untuk kekal, pilih medan teks, tekan Control , dan seret dari bahagian atas medan teks ke bahagian bawah medan teks.  Pilih ketinggian dari menu yang muncul.  Ini mentakrifkan kekangan tentang bidang teks itu sendiri, ketinggiannya.

Fixing the Height of the Text Field

Saya pasti anda bersetuju bahawa asas-asas Layout Automatik mudah difahami.  Kadang-kadang ia agak rumit.  Apa yang telah kami bincangkan sejauh ini adalah asas-asas, Layout Automatik membentangkan otot.  Mari tamat tutorial ini dengan melihat masalah yang sangat biasa yang mudah diselesaikan oleh Layout Automatik. 

Beberapa kekangan  

Tidak semestinya anda mahukan subview untuk mencapai lebar dan ketinggian pandangan ibu bapa. Pandangan jadual, misalnya, sangat kerap mempunyai saiz yang sama dengan pandangan ibu bapa.  Mari lihat bagaimana kita boleh mengendalikan ini menggunakan Layout Automatik. 

Tambah pandangan dari Perpustakaan Objek ke paparan pengawal paparan.  Buka Inspektor Atribut dan tetapkan latar belakang ke biru untuk memastikan ia menonjol.  Jalankan aplikasi dalam simulator iPad untuk melihat apa yang kami bermula dengan.

Adding a Blue Subview

Anda boleh menekan Command + Left Arrow atau Command + Right Arrow untuk memutar peranti.  Ia kelihatan seperti paparan mengekalkan lebar dan ketinggiannya, tetapi melekat ke kiri atas.  Tujuannya adalah untuk mempunyai pelbagai lebar dan ketinggian dari sudut pandangan ibu bapa.  Pilih paparan biru dan tambah sekatan yang berikut menggunakan menu Pin .

Add Four Constraints to the Blue View

Sebelum anda klik Tambah 4 Kekangan , pastikan anda menambah sekatan berhubung dengan pandangan penyeliaan biru.  Apa maksudnya?  Kekangan menggambarkan hubungan antara dua pandangan.  Anda akan menggunakan had ini kepada pandangan biru berhubung dengan adik terdekat.  Apa yang kita mahu, bagaimanapun, adalah untuk menambah kekangan yang menentukan kedudukan pandangan biru berhubung dengan pandangan yang mengandungi atau ibu bapa.  Anda menentukan apa yang ditetapkan oleh sempadan dengan mengklik pada segi tiga kecil di sebelah nombor (yang mentakrifkan kekangan berterusan).  Lihat tangkapan skrin berikut untuk penjelasan.

Specifying the Constrained Views

Periksa semula bahawa setiap halangan berlaku pada paparan biru dan induk atau mengandungi paparan. Apabila anda sudah bersedia, tambah empat kekangan.

Daripada garis biru, anda mungkin melihat garis oren dengan nombor.  Dalam Xcode, oren bermaksud amaran.  Baris jingga memberi amaran kepada anda bahawa kedudukan semasa paparan biru tidak sejajar dengan kedudukan paparan biru pada masa proses.  Pernahkah anda melihat garis oren di pinggir pandangan utama pandangan biru itu?  Garis putus-putus menggambarkan bingkai paparan biru jika kekangan yang anda baru terapkan.  Itu berlaku pada masa proses.

Orange Means Warning

Jika anda tidak mempercayai saya, saya cadangkan anda menjalankan aplikasi dalam simulator iPad untuk melihat sendiri.  Paparan biru membentang lebar dan ketinggian paparan ibu bapa, walaupun anda memutarkan simulator dari potret ke landskap dan sebaliknya.

Garis oren yang tidak perlu mengganggu ruang kerja dan apa yang anda lihat bukan apa yang anda dapat apabila anda berjalan.  Lebih baik untuk membetulkan masalah dengan mengemas kini bingkai paparan biru.  Ini mudah.  Pilih paparan biru dan pilih Kemas Kini Bingkai dari menu Isi Penyelesaian Layout Auto di sebelah kanan bawah.

Pastikan anda memahami apa yang dibincangkan dalam tutorial ini, kerana kami akan memerlukannya dalam siri ini.  Dalam tutorial seterusnya, kami akan membincangkan pandangan jadual dan kami akan menerapkan beberapa teknik yang dibincangkan dalam tutorial ini.  Untuk mengetahui lebih lanjut mengenai Layout Automatik, semak Panduan Layout Auto Apple.

Kesimpulannya

Mengatakan bahawa Layout Automatik sangat kuat adalah meremehkan.  . Walaupun kita hanya menggaraskan permukaan dalam tutorial ini, anda sudah tentu tahu apa Layout Auto dan apa yang boleh dilakukan untuk anda.

Dalam baki siri ini, kami akan terus menggunakan Layout Automatik.  Sekiranya anda terjebak, pastikan anda mengkaji semula tutorial ini atau menghantar saya dalam talian dalam komen.  Anda juga boleh 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.