Bagikan melalui

Dasar-dasar iOS Designer

  • Artikel

Panduan ini memperkenalkan Xamarin Designer untuk iOS. Ini menunjukkan cara menggunakan iOS Designer untuk secara visual menata kontrol, cara mengakses kontrol tersebut dalam kode, dan cara mengedit properti.

Peringatan

Desainer iOS tidak digunakan lagi di Visual Studio 2019 versi 16.8 dan Visual Studio 2019 untuk Mac versi 8.8, dan dihapus di Visual Studio 2019 versi 16.9 dan Visual Studio untuk Mac versi 8.9. Cara yang disarankan untuk membangun antarmuka pengguna iOS langsung ada di Mac yang menjalankan Xcode. Untuk informasi selengkapnya, lihat Mendesain antarmuka pengguna dengan Xcode.

Xamarin Designer untuk iOS adalah perancang antarmuka visual yang mirip dengan Interface Builder Xcode dan Android Designer. Beberapa dari banyak fiturnya termasuk integrasi yang mulus dengan Visual Studio untuk Windows dan Mac, pengeditan seret dan letakkan, antarmuka untuk menyiapkan penanganan aktivitas, dan kemampuan untuk merender kontrol kustom.

Persyaratan

Desainer iOS tersedia di Visual Studio untuk Mac dan Visual Studio 2017 dan yang lebih baru di Windows. Di Visual Studio untuk Windows, iOS Designer memerlukan koneksi ke host build Mac yang dikonfigurasi dengan benar, meskipun Xcode tidak perlu berjalan.

Panduan ini mengasumsikan keakraban dengan konten yang tercakup dalam panduan Memulai.

Cara kerja Desainer iOS

Bagian ini menjelaskan bagaimana iOS Designer memfasilitasi pembuatan antarmuka pengguna dan menghubungkannya ke kode.

Desainer iOS memungkinkan pengembang merancang antarmuka pengguna aplikasi secara visual. Seperti yang diuraikan dalam panduan Pengenalan Papan Cerita , papan cerita menjelaskan layar (pengontrol tampilan) yang membentuk aplikasi, elemen antarmuka (tampilan) yang ditempatkan pada pengontrol tampilan tersebut, dan alur navigasi keseluruhan aplikasi.

Pengontrol tampilan memiliki dua bagian: representasi visual di iOS Designer dan kelas C# terkait:

Dalam status defaultnya, pengontrol tampilan tidak menyediakan fungsionalitas apa pun; harus diisi dengan kontrol. Kontrol ini ditempatkan dalam tampilan pengontrol tampilan, area persegi panjang yang berisi semua konten layar. Sebagian besar pengontrol tampilan berisi kontrol umum seperti tombol, label, dan bidang teks, seperti yang diilustrasikan dalam cuplikan layar berikut, yang memperlihatkan pengontrol tampilan yang berisi tombol:

Beberapa kontrol, seperti label yang berisi teks statis, dapat ditambahkan ke pengontrol tampilan dan dibiarkan saja. Namun, lebih sering daripada tidak, kontrol harus disesuaikan secara terprogram. Misalnya, tombol yang ditambahkan di atas harus melakukan sesuatu saat diketuk, sehingga penanganan aktivitas harus ditambahkan dalam kode.

Untuk mengakses dan memanipulasi tombol dalam kode, tombol harus memiliki pengidentifikasi unik. Berikan pengidentifikasi unik dengan memilih tombol, membuka Pad Properti, dan mengatur bidang Namanya ke nilai seperti "SubmitButton":

Setting a button's name in the Properties Pad

Sekarang setelah tombol memiliki nama, tombol dapat diakses dalam kode. Tapi bagaimana cara kerjanya?

Di Solution Pad, menavigasi ke ViewController.cs dan mengklik indikator pengungkapan mengungkapkan bahwa definisi kelas pengontrol ViewController tampilan mencakup dua file, yang masing-masing berisi definisi kelas parsial:

The two files that make up the ViewController class: ViewController.cs and ViewController.designer.cs

  • ViewController.cs harus diisi dengan kode kustom yang ViewController terkait dengan kelas . Dalam file ini, ViewController kelas dapat merespons berbagai metode siklus hidup pengontrol tampilan iOS, menyesuaikan UI, dan merespons input pengguna seperti ketukan tombol.

  • ViewController.designer.cs adalah file yang dihasilkan, yang dibuat oleh iOS Designer untuk memetakan antarmuka yang dibangun secara visual ke kode. Karena perubahan pada file ini akan ditimpa, maka tidak boleh dimodifikasi. Deklarasi properti dalam file ini memungkinkan kode di ViewController kelas mengakses, berdasarkan Nama, kontrol yang disiapkan di iOS Designer. Membuka ViewController.designer.cs mengungkapkan kode berikut:

namespace Designer
{
    [Register ("ViewController")]
    partial class ViewController
    {
        [Outlet]
        [GeneratedCode ("iOS Designer", "1.0")]
        UIKit.UIButton SubmitButton { get; set; }

        void ReleaseDesignerOutlets ()
        {
            if (SubmitButton != null) {
                SubmitButton.Dispose ();
                SubmitButton = null;
            }
        }
    }
}

Deklarasi SubmitButton properti menghubungkan seluruh ViewController kelas - bukan hanya file ViewController.designer.cs - ke tombol yang ditentukan di papan cerita. Karena ViewController.cs mendefinisikan bagian dari ViewController kelas , ia memiliki akses ke SubmitButton.

Cuplikan layar berikut menggambarkan bahwa IntelliSense sekarang mengenali SubmitButton referensi dalam ViewController.cs:

Bagian ini telah menunjukkan cara membuat tombol di iOS Designer dan mengakses tombol tersebut dalam kode.

Sisa dokumen ini memberikan gambaran umum lebih lanjut tentang iOS Designer.

Dasar-dasar iOS Designer

Bagian ini memperkenalkan bagian-bagian iOS Designer dan menyediakan tur fitur-fiturnya.

Meluncurkan Desainer iOS

Proyek Xamarin.iOS yang dibuat dengan Visual Studio untuk Mac menyertakan papan cerita. Untuk melihat konten papan cerita, klik dua kali file .storyboard di Solution Pad:

A storyboard open in the iOS Designer

Fitur iOS Designer

Desainer iOS memiliki enam bagian utama:

Sections of the iOS Designer

  1. Permukaan Desain – Ruang kerja utama Desainer iOS. Ditunjukkan di area dokumen, ini memungkinkan konstruksi visual antarmuka pengguna.
  2. Bilah Alat Batasan – Memungkinkan peralihan antara mode pengeditan bingkai dan mode pengeditan batasan, dua cara berbeda untuk memosisikan elemen di antarmuka pengguna.
  3. Kotak Alat – Mencantumkan pengontrol, objek, kontrol, tampilan data, pengenal gerakan, jendela, dan bilah yang dapat diseret ke permukaan desain dan ditambahkan ke antarmuka pengguna.
  4. Properti Pad – Menampilkan properti untuk kontrol yang dipilih, termasuk identitas, gaya visual, aksesibilitas, tata letak, dan perilaku.
  5. Kerangka Dokumen – Memperlihatkan pohon kontrol yang menyusun tata letak untuk antarmuka yang sedang diedit. Mengklik item di pohon akan memilihnya di iOS Designer dan menampilkan propertinya di Properties Pad. Ini berguna untuk memilih kontrol tertentu di antarmuka pengguna yang sangat berlapis.
  6. Bilah Alat Bawah – Berisi opsi untuk mengubah cara Perancang iOS menampilkan file .storyboard atau .xib, termasuk perangkat, orientasi, dan zoom.

Alur kerja desain

Menambahkan kontrol ke antarmuka

Untuk menambahkan kontrol ke antarmuka, seret dari Kotak Alat dan letakkan di permukaan desain. Saat menambahkan atau memosisikan kontrol, panduan vertikal dan horizontal menyoroti posisi tata letak yang umum digunakan seperti pusat vertikal, tengah horizontal, dan margin:

Garis putus-putus biru dalam contoh di atas menyediakan pedoman perataan visual tengah horizontal untuk membantu penempatan tombol.

Perintah menu konteks

Menu konteks tersedia baik di permukaan desain maupun di Kerangka Dokumen. Menu ini menyediakan perintah untuk kontrol yang dipilih dan induknya, yang berguna saat bekerja dengan tampilan dalam hierarki berlapis:

The context menu on the design surface

Toolbar Batasan

Toolbar batasan telah diperbarui dan sekarang terdiri dari dua kontrol: mode pengeditan bingkai / tombol mode pengeditan batasan dan tombol perbarui batasan / perbarui bingkai.

Mode pengeditan bingkai/ tombol mode pengeditan batasan

Di versi iOS Designer sebelumnya, mengklik tampilan yang sudah dipilih pada permukaan desain yang beralih antara mode pengeditan bingkai dan mode pengeditan batasan. Sekarang, kontrol pengalih di toolbar batasan beralih di antara mode pengeditan ini.

  • Mode pengeditan bingkai:
  • Mode pengeditan batasan:

Tombol Perbarui batasan / perbarui bingkai

Tombol perbarui batasan / perbarui bingkai berada di sebelah kanan mode pengeditan bingkai / tombol mode pengeditan batasan.

  • Dalam mode pengeditan bingkai, mengklik tombol ini menyesuaikan bingkai elemen yang dipilih agar sesuai dengan batasannya.
  • Dalam mode pengeditan batasan, mengklik tombol ini menyesuaikan batasan elemen yang dipilih agar sesuai dengan bingkainya.

Bilah alat bawah

Toolbar bawah menyediakan cara untuk memilih perangkat, orientasi, dan zoom yang digunakan untuk melihat papan cerita atau file .xib di iOS Designer:

Perangkat dan orientasi

Saat diperluas, toolbar bawah menampilkan semua perangkat, orientasi, dan/atau adaptasi yang berlaku untuk dokumen saat ini. Mengkliknya mengubah tampilan yang ditampilkan pada permukaan desain.

Perhatikan bahwa memilih perangkat dan orientasi hanya mengubah cara Desainer iOS mempratinjau desain. Terlepas dari pilihan saat ini, batasan yang baru ditambahkan diterapkan di semua perangkat dan orientasi kecuali tombol Edit Sifat telah digunakan untuk menentukan sebaliknya.

Saat kelasukuran diaktifkan, tombol Edit Sifat akan muncul di toolbar bawah yang diperluas. Mengklik tombol Edit Sifat menampilkan opsi untuk membuat variasi antarmuka berdasarkan kelas ukuran yang diwakili oleh perangkat dan orientasi yang dipilih. Perhatikan contoh berikut:

  • Jika i Telepon SE / Portrait, dipilih, popover akan menyediakan opsi untuk membuat variasi antarmuka untuk lebar ringkas, kelas ukuran tinggi reguler.
  • Jika iPad Pro 9.7" / Lanskap / Layar Penuh dipilih, popover akan menyediakan opsi untuk membuat variasi antarmuka untuk kelas ukuran lebar reguler dan tinggi reguler.

Kontrol zoom

Permukaan desain mendukung pembesaran melalui beberapa kontrol:

Kontrolnya meliputi yang berikut ini:

  1. Perbesar agar pas
  2. Perkecil
  3. Perbesar tampilan
  4. Ukuran aktual (ukuran piksel 1:1)

Kontrol ini menyesuaikan zoom pada permukaan desain. Mereka tidak memengaruhi antarmuka pengguna aplikasi saat runtime.

Properti Pad

Gunakan Pad Properti untuk mengedit identitas, gaya visual, aksesibilitas, dan perilaku kontrol. Cuplikan layar berikut mengilustrasikan opsi Properti Pad untuk tombol:

The Properties Pad for a button

Bagian Pad Properti

Pad Properti berisi tiga bagian:

  1. Widget – Properti utama kontrol, seperti nama, kelas, properti gaya, dll. Properti untuk mengelola konten kontrol biasanya ditempatkan di sini.
  2. Tata Letak – Properti yang melacak posisi dan ukuran kontrol, termasuk batasan dan bingkai, tercantum di sini.
  3. Peristiwa – Peristiwa dan penanganan aktivitas ditentukan di sini. Berguna untuk menangani peristiwa seperti sentuhan, ketuk, seret, dll. Peristiwa juga dapat ditangani langsung dalam kode.

Mengedit properti di Properti Pad

Selain pengeditan visual pada permukaan desain, iOS Designer mendukung properti pengeditan di Properties Pad. Properti yang tersedia berubah berdasarkan kontrol yang dipilih, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Button properties

View controller properties

Penting

Bagian Identitas dari Pad Properti sekarang menampilkan bidang Modul . Anda perlu mengisi bagian ini hanya ketika beroperasi dengan kelas Swift. Gunakan untuk memasukkan nama modul untuk kelas Swift, yang diberi namespace.

Nilai default

Banyak properti di Properties Pad tidak menampilkan nilai atau nilai default. Namun, kode aplikasi mungkin masih memodifikasi nilai-nilai ini. Properti Pad tidak menampilkan nilai yang diatur dalam kode.

Penangan kejadian

Untuk menentukan penanganan aktivitas kustom untuk berbagai peristiwa, gunakan tab Peristiwa di Pad Properti. Misalnya, pada cuplikan layar di bawah ini, HandleClick metode menangani peristiwa Touch Up Inside tombol:

The Properties Pad, with an event handler set for a button

Setelah penanganan aktivitas ditentukan, metode dengan nama yang sama harus ditambahkan ke kelas pengontrol tampilan yang sesuai. Jika tidak, unrecognized selector pengecualian akan terjadi saat tombol diketuk:

An unrecognized selector exception

Perhatikan bahwa setelah penanganan aktivitas ditentukan di Properties Pad, iOS Designer akan segera membuka file kode yang sesuai dan menawarkan untuk menyisipkan deklarasi metode.

Misalnya yang menggunakan penanganan aktivitas kustom, lihat Panduan Memulai Hello, iOS.

Tampilan kerangka

Desainer iOS juga dapat menampilkan hierarki kontrol antarmuka sebagai kerangka. Kerangka tersedia dengan memilih tab Kerangka Dokumen, seperti yang ditunjukkan di bawah ini:

Kontrol yang dipilih dalam tampilan kerangka tetap sinkron dengan kontrol yang dipilih pada permukaan desain. Fitur ini berguna untuk memilih item dari hierarki antarmuka yang sangat berlapis.

Kembali ke Xcode

Dimungkinkan untuk menggunakan iOS Designer dan Xcode Interface Builder secara bergantian. Untuk membuka papan cerita atau file .xib di Xcode Interface Builder, klik kanan pada file dan pilih Buka Dengan > Xcode Interface Builder, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Opening a storyboard in Xcode Interface Builder

Setelah melakukan pengeditan di Xcode Interface Builder, simpan file dan kembali ke Visual Studio untuk Mac. Perubahan akan disinkronkan ke proyek Xamarin.iOS.

Dukungan .xib

Perancang iOS mendukung pembuatan, pengeditan, dan pengelolaan file .xib. Ini adalah file XML yang merespresentasikan tampilan kustom tunggal yang dapat ditambahkan ke hierarki tampilan aplikasi. File .xib umumnya mewakili antarmuka untuk satu tampilan atau layar dalam aplikasi, sedangkan papan cerita mewakili banyak layar dan transisi di antaranya.

Ada banyak pendapat tentang solusi mana - file .xib, papan cerita, atau kode - berfungsi paling baik untuk membuat dan memelihara antarmuka pengguna. Pada kenyataannya, tidak ada solusi yang sempurna, dan selalu layak untuk mempertimbangkan alat terbaik untuk pekerjaan yang ditangani. Meskipun demikian, file .xib umumnya paling kuat saat digunakan untuk mewakili tampilan kustom yang diperlukan di beberapa tempat di aplikasi, seperti sel tampilan tabel kustom.

Dokumentasi selengkapnya tentang menggunakan file .xib dapat ditemukan dalam resep berikut:

Untuk informasi selengkapnya mengenai penggunaan papan cerita, lihat Pengantar Storyboards.

Panduan terkait Desainer iOS ini dan lainnya mengacu pada penggunaan papan cerita sebagai pendekatan standar untuk membangun antarmuka pengguna, karena sebagian besar templat proyek baru Xamarin.iOS menyediakan papan cerita secara default.

Ringkasan

Panduan ini memberikan pengenalan iOS Designer, menjelaskan fitur-fiturnya dan menguraikan alat yang ditawarkannya untuk merancang antarmuka pengguna yang indah.