Bagikan melalui

Halo, iOS Multiscreen – mendalami

  • Artikel

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 adalah langsung di Mac yang menjalankan Penyusun Antarmuka Xcode. Untuk informasi selengkapnya, lihat Mendesain antarmuka pengguna dengan Xcode.

Dalam panduan Mulai Cepat, kami membangun dan menjalankan aplikasi Xamarin.iOS multi-layar pertama kami. Sekarang saatnya untuk mengembangkan pemahaman yang lebih mendalam tentang navigasi dan arsitektur iOS.

Dalam panduan ini kami memperkenalkan pola Model, Tampilan, Pengontrol (MVC) dan perannya dalam arsitektur dan navigasi iOS. Kemudian kita menyelami pengontrol navigasi dan belajar menggunakannya untuk memberikan pengalaman navigasi yang akrab di iOS.

Model-View-Controller (MVC)

Dalam tutorial Halo, iOS, kami mengetahui bahwa aplikasi iOS hanya memiliki satu Jendela yang menampilkan pengontrol yang bertugas memuat Hierarki Tampilan Konten mereka ke Jendela. Dalam panduan Telepon word kedua, kami menambahkan layar kedua ke aplikasi kami dan meneruskan beberapa data - daftar nomor telepon - di antara dua layar, seperti yang diilustrasikan oleh diagram di bawah ini:

Diagram ini mengilustrasikan meneruskan data di antara dua layar

Dalam contoh kami, data dikumpulkan di layar pertama, diteruskan dari pengontrol tampilan pertama ke yang kedua, dan ditampilkan oleh layar kedua. Pemisahan layar, pengontrol tampilan, dan data ini mengikuti pola Model, Tampilan, Pengontrol (MVC). Di beberapa bagian berikutnya, kita membahas manfaat pola, komponennya, dan bagaimana kita menggunakannya dalam aplikasi Telepon word kita.

Manfaat pola MVC

Model-View-Controller adalah pola desain – solusi arsitektur yang dapat digunakan kembali untuk masalah umum atau kasus penggunaan dalam kode. MVC adalah arsitektur untuk aplikasi dengan Antarmuka Pengguna Grafis (GUI). Ini menetapkan objek dalam aplikasi salah satu dari tiga peran - Model (logika data atau aplikasi), Tampilan (antarmuka pengguna), dan Pengontrol (kode di belakang). Diagram di bawah ini menggambarkan hubungan antara tiga bagian pola MVC dan pengguna:

Diagram ini mengilustrasikan hubungan antara tiga bagian pola MVC dan pengguna

Pola MVC berguna karena menyediakan pemisahan logis antara berbagai bagian aplikasi GUI dan memudahkan kita untuk menggunakan kembali kode dan tampilan. Mari kita melompat dan melihat masing-masing dari tiga peran secara lebih rinci.

Catatan

Pola MVC secara longgar dianalogikan dengan struktur halaman ASP.NET atau aplikasi WPF. Dalam contoh ini, Tampilan adalah komponen yang benar-benar bertanggung jawab untuk menjelaskan UI dan sesuai dengan halaman ASPX (HTML) di ASP.NET atau ke XAML dalam aplikasi WPF. Pengontrol adalah komponen yang bertanggung jawab untuk mengelola Tampilan, yang sesuai dengan kode di belakang ASP.NET atau WPF.

Model

Objek Model biasanya merupakan representasi data khusus aplikasi yang akan ditampilkan atau dimasukkan ke dalam Tampilan. Model sering didefinisikan secara longgar - misalnya, di aplikasi Telepon word_iOS kami, daftar nomor telepon (direpresentasikan sebagai daftar string) adalah Model. Jika kami membangun aplikasi lintas platform, kami dapat memilih untuk berbagi kode Telepon word Penerjemah antara aplikasi iOS dan Android kami. Kita juga bisa menganggap kode bersama itu sebagai Model.

MVC benar-benar agnostik dari persistensi data dan akses Model. Dengan kata lain, MVC tidak peduli seperti apa data kita atau bagaimana data disimpan, hanya bagaimana data diwakili. Misalnya, kita dapat memilih untuk menyimpan data kita dalam database SQL, atau mempertahankannya di beberapa mekanisme penyimpanan cloud, atau hanya menggunakan List<string>. Untuk tujuan MVC, hanya representasi data itu sendiri yang disertakan dalam pola.

Dalam beberapa kasus, bagian Model dari MVC mungkin kosong. Misalnya, kami dapat memilih untuk menambahkan beberapa halaman statis ke aplikasi kami yang menjelaskan cara kerja penerjemah telepon, mengapa kami membuatnya, dan cara menghubungi kami untuk melaporkan bug. Layar aplikasi ini masih akan dibuat menggunakan Tampilan dan Pengontrol, tetapi tidak akan memiliki data Model nyata.

Catatan

Dalam beberapa literatur, bagian Model dari pola MVC dapat merujuk ke seluruh backend aplikasi, bukan hanya data yang ditampilkan di UI. Dalam panduan ini kita menggunakan interpretasi modern dari Model, tetapi perbedaannya tidak terlalu penting.

Tampilan

Tampilan adalah komponen yang bertanggung jawab untuk merender antarmuka pengguna. Di hampir semua platform yang menggunakan pola MVC, antarmuka pengguna terdiri dari hierarki tampilan. Kita dapat menganggap Tampilan di MVC sebagai hierarki tampilan dengan satu tampilan – yang dikenal sebagai tampilan akar - di bagian atas hierarki dan sejumlah tampilan anak (dikenal sebagai atau subview) di bawahnya. Di iOS, hierarki Tampilan Konten layar sesuai dengan komponen Tampilan di MVC.

Pengontrol

Objek Pengontrol adalah komponen yang menghubungkan semuanya bersama-sama dan diwakili di iOS oleh UIViewController. Kita dapat menganggap Pengontrol sebagai kode dukungan untuk layar atau serangkaian tampilan. Pengontrol bertanggung jawab untuk mendengarkan permintaan dari pengguna dan mengembalikan hierarki tampilan yang sesuai. Ini mendengarkan permintaan dari Tampilan (klik tombol, input teks, dll.) dan melakukan pemrosesan yang sesuai, Melihat modifikasi, dan memuat ulang Tampilan. Pengontrol juga bertanggung jawab untuk membuat atau mengambil Model dari penyimpanan data cadangan apa pun yang ada di aplikasi, dan mengisi Tampilan dengan datanya.

Pengontrol juga dapat mengelola Pengontrol lainnya. Misalnya, satu Pengontrol mungkin memuat Pengontrol lain jika perlu menampilkan layar yang berbeda, atau mengelola tumpukan Pengontrol untuk memantau urutannya dan transisi di antaranya. Di bagian berikutnya, kita akan melihat contoh Pengontrol yang mengelola Pengontrol lain saat kita memperkenalkan jenis khusus pengontrol tampilan iOS yang disebut pengontrol navigasi.

Dalam aplikasi Telepon word, kami menggunakan pengontrol navigasi untuk membantu mengelola navigasi di antara beberapa layar. Pengontrol navigasi adalah khusus UIViewController yang diwakili oleh UINavigationController kelas . Alih-alih mengelola hierarki Tampilan Konten tunggal, pengontrol navigasi mengelola pengontrol tampilan lain, serta hierarki Tampilan Konten khususnya sendiri dalam bentuk toolbar navigasi yang menyertakan judul, tombol kembali, dan fitur opsional lainnya.

Pengontrol navigasi umum dalam aplikasi iOS dan menyediakan navigasi untuk aplikasi iOS staple seperti aplikasi Pengaturan, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Pengontrol navigasi menyediakan navigasi untuk aplikasi iOS seperti aplikasi Pengaturan yang ditampilkan di sini

Pengontrol navigasi melayani tiga fungsi utama:

  • Menyediakan Hook untuk Navigasi Maju – Pengontrol navigasi menggunakan metafora navigasi hierarkis tempat Hierarki Tampilan Konten didorong ke tumpukan navigasi . Anda dapat menganggap tumpukan navigasi sebagai tumpukan kartu bermain, di mana hanya kartu paling atas yang terlihat, seperti yang diilustrasikan oleh diagram di bawah ini:

    Diagram ini mengilustrasikan navigasi sebagai tumpukan kartu

  • Secara opsional Menyediakan Tombol Kembali - Saat kita mendorong item baru ke tumpukan navigasi, bilah judul dapat secara otomatis menampilkan tombol kembali yang memungkinkan pengguna untuk menavigasi mundur. Menekan tombol kembali memunculkan pengontrol tampilan saat ini dari tumpukan navigasi, dan memuat hierarki Tampilan Konten sebelumnya ke dalam Jendela:

    Diagram ini mengilustrasikan popping kartu dari tumpukan

  • Menyediakan Bilah Judul – Bagian atas pengontrol navigasi disebut Bilah Judul . Ini bertanggung jawab untuk menampilkan judul pengontrol tampilan, seperti yang diilustrasikan oleh diagram di bawah ini:

    Bilah Judul bertanggung jawab untuk menampilkan judul pengontrol tampilan

Pengontrol tampilan akar

Pengontrol navigasi tidak mengelola hierarki Tampilan Konten, sehingga tidak memiliki apa pun untuk ditampilkan sendiri. Sebagai gantinya, pengontrol navigasi dipasangkan dengan pengontrol tampilan Root:

Pengontrol navigasi dipasangkan dengan pengontrol tampilan Root

Pengontrol tampilan Akar mewakili pengontrol tampilan pertama dalam tumpukan pengontrol navigasi, dan hierarki Tampilan Konten pengontrol tampilan Akar adalah hierarki Tampilan Konten pertama yang dimuat ke dalam Jendela. Jika kita ingin menempatkan seluruh aplikasi kita pada tumpukan pengontrol navigasi, kita dapat memindahkan Sourceless Segue ke pengontrol navigasi dan mengatur pengontrol tampilan layar pertama kita sebagai pengontrol tampilan Root, seperti yang kita lakukan di aplikasi Telepon word:

Segue Tanpa Sumber mengatur pengontrol tampilan layar pertama sebagai pengontrol tampilan Root

Opsi navigasi tambahan

Pengontrol navigasi adalah cara umum untuk menangani navigasi di iOS, tetapi ini bukan satu-satunya opsi. Misalnya, Pengontrol Bilah Tab dapat membagi aplikasi menjadi area fungsional yang berbeda dan pengontrol Tampilan terpisah dapat digunakan untuk membuat tampilan master/detail. Menggabungkan pengontrol navigasi dengan paradigma navigasi lainnya ini memungkinkan banyak cara fleksibel untuk menyajikan dan menavigasi konten di iOS.

Menangani transisi

Dalam panduan Telepon word, kami menangani transisi antara dua pengontrol tampilan dengan dua cara berbeda - pertama dengan Storyboard Segue dan kemudian secara terprogram. Mari kita jelajahi kedua opsi ini secara lebih rinci.

PrepareForSegue

Saat menambahkan Segue dengan tindakan Tampilkan ke Storyboard, kami menginstruksikan iOS untuk mendorong pengontrol tampilan kedua ke tumpukan pengontrol navigasi:

Mengatur jenis segue dari daftar dropdown

Menambahkan Segue ke Storyboard sudah cukup untuk membuat transisi sederhana antar layar. Jika kita ingin meneruskan data antara pengontrol tampilan, kita harus mengambil alih PrepareForSegue metode dan menangani data sendiri:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);
    ...
}

iOS memanggil PrepareForSegue tepat sebelum transisi terjadi dan meneruskan Segue yang kami buat di Storyboard ke dalam metode . Pada titik ini, kita harus mengatur pengontrol tampilan tujuan Segue secara manual. Kode berikut mendapatkan handel ke pengontrol tampilan Tujuan dan melemparkannya ke kelas yang tepat - CallHistoryController, dalam hal ini:

CallHistoryController callHistoryController = segue.DestinationViewController as CallHistoryController;

Terakhir, kami meneruskan daftar nomor telepon (Model) dari ViewController ke ke CallHistoryController dengan mengatur PhoneHistory properti CallHistoryController ke daftar nomor telepon yang diputar:

callHistoryController.PhoneNumbers = PhoneNumbers;

Kode lengkap untuk meneruskan data menggunakan Segue adalah sebagai berikut:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    var callHistoryController = segue.DestinationViewController as CallHistoryController;

    if (callHistoryController != null) {
         callHistoryController.PhoneNumbers = PhoneNumbers;
    }
 }

Transisi dari pengontrol tampilan pertama ke yang kedua dalam kode adalah proses yang sama seperti dengan Segue, tetapi beberapa langkah harus dilakukan secara manual. Pertama, kami menggunakan this.NavigationController untuk mendapatkan referensi ke pengontrol navigasi yang tumpukannya sedang kami gunakan. Kemudian, kita menggunakan metode Pengontrol PushViewController Navigasi untuk secara manual mendorong pengontrol tampilan berikutnya ke tumpukan, meneruskan pengontrol tampilan dan opsi untuk menganimasikan transisi (kami mengatur ini ke true).

Kode berikut menangani transisi dari layar Telepon word ke layar Riwayat Panggilan:

this.NavigationController.PushViewController (callHistory, true);

Sebelum kita dapat beralih ke pengontrol tampilan berikutnya, kita harus membuat instans secara manual dari Storyboard dengan memanggil this.Storyboard.InstantiateViewController dan meneruskan ID Storyboard dari CallHistoryController:

CallHistoryController callHistory =
this.Storyboard.InstantiateViewController
("CallHistoryController") as CallHistoryController;

Akhirnya, kami meneruskan daftar nomor telepon (Model) dari ViewController ke CallHistoryController dengan mengatur PhoneHistory properti CallHistoryController ke daftar nomor telepon yang dipanggang, seperti yang kami lakukan ketika kami menangani transisi dengan Segue:

callHistory.PhoneNumbers = PhoneNumbers;

Kode lengkap untuk transisi terprogram adalah sebagai berikut:

CallHistoryButton.TouchUpInside += (object sender, EventArgs e) => {
    // Launches a new instance of CallHistoryController
    CallHistoryController callHistory = this.Storyboard.InstantiateViewController ("CallHistoryController") as CallHistoryController;
    if (callHistory != null) {
     callHistory.PhoneNumbers = PhoneNumbers;
     this.NavigationController.PushViewController (callHistory, true);
    }
};

Konsep tambahan yang diperkenalkan dalam Telepon word

Aplikasi Telepon word memperkenalkan beberapa konsep yang tidak tercakup dalam panduan ini. Konsep-konsep ini meliputi:

  • Pembuatan pengontrol tampilan otomatis – Saat kami memasukkan nama kelas untuk pengontrol tampilan di Properties Pad , perancang iOS memeriksa apakah kelas tersebut ada lalu menghasilkan kelas backing pengontrol tampilan untuk kami. Untuk informasi selengkapnya tentang fitur desainer iOS ini dan lainnya, lihat Panduan Pengantar Desainer iOS.
  • Pengontrol tampilan tabel – CallHistoryController adalah pengontrol tampilan Tabel. Pengontrol tampilan Tabel berisi Tampilan Tabel, alat tata letak dan tampilan data yang paling umum di iOS. Tabel berada di luar cakupan panduan ini. Untuk informasi selengkapnya tentang pengontrol tampilan Tabel, lihat panduan Bekerja dengan Tabel dan Sel .
  • ID Papan Cerita – Mengatur ID Storyboard membuat kelas pengontrol tampilan yang Objective-C berisi kode di belakang untuk pengontrol tampilan di Storyboard. Kami menggunakan ID Storyboard untuk menemukan Objective-C kelas dan membuat instans pengontrol tampilan di Storyboard. Untuk informasi selengkapnya tentang ID Storyboard, silakan merujuk ke panduan Pengantar Papan Cerita.

Ringkasan

Selamat, Anda telah menyelesaikan aplikasi iOS multi-layar pertama Anda!

Dalam panduan ini kami memperkenalkan pola MVC dan menggunakannya untuk membuat aplikasi multi-layar. Kami juga menjelajahi pengontrol navigasi dan perannya dalam mendukung navigasi iOS. Anda sekarang memiliki fondasi yang kuat yang Anda butuhkan untuk mulai mengembangkan aplikasi Xamarin.iOS Anda sendiri.

Selanjutnya, mari kita belajar membangun aplikasi lintas platform dengan Xamarin dengan panduan Pengenalan Pengembangan Seluler dan Membangun Aplikasi Lintas Platform.