Halo, iOS – Penyelaman mendalam

Panduan Mulai Cepat, memperkenalkan pembuatan dan menjalankan aplikasi Xamarin.iOS dasar. Sekarang saatnya untuk mengembangkan pemahaman yang lebih mendalam tentang cara kerja aplikasi iOS sehingga Anda dapat membangun program yang lebih canggih. Panduan ini meninjau langkah-langkah yang ada di panduan Hello, iOS untuk memungkinkan pemahaman tentang konsep dasar pengembangan aplikasi iOS.

Panduan ini membantu Anda mengembangkan keterampilan dan pengetahuan yang diperlukan untuk membangun aplikasi iOS satu layar. Setelah mengerjakannya, Anda harus memiliki pemahaman tentang berbagai bagian aplikasi Xamarin.iOS dan bagaimana mereka cocok bersama.

Pengantar Visual Studio untuk Mac

Visual Studio untuk Mac adalah IDE sumber terbuka gratis yang menggabungkan fitur dari Visual Studio dan Xcode. Ini fitur desainer visual yang sepenuhnya terintegrasi, editor teks lengkap dengan alat pemfaktoran ulang, browser perakitan, integrasi kode sumber, dan banyak lagi. Panduan ini memperkenalkan beberapa fitur Dasar Visual Studio untuk Mac, tetapi jika Anda baru menggunakan Visual Studio untuk Mac, lihat dokumentasi Visual Studio untuk Mac .

Visual Studio untuk Mac mengikuti praktik Visual Studio mengatur kode ke dalam solusi dan proyek. Solusinya adalah kontainer yang dapat menyimpan satu atau beberapa proyek. Proyek dapat berupa aplikasi (seperti iOS atau Android), pustaka pendukung, aplikasi pengujian, dan banyak lagi. Di aplikasi Telepon word, proyek i Telepon baru ditambahkan menggunakan templat Aplikasi Tampilan Tunggal. Solusi awal terlihat seperti ini:

Pengantar Visual Studio

Visual Studio adalah IDE yang kuat dari Microsoft. Ini fitur desainer visual yang sepenuhnya terintegrasi, editor teks lengkap dengan alat pemfaktoran ulang, browser perakitan, integrasi kode sumber, dan banyak lagi. Panduan ini memperkenalkan beberapa fitur Visual Studio dasar dengan Alat Xamarin untuk Visual Studio.

Visual Studio mengatur kode ke dalam solusi dan proyek. Solusinya adalah kontainer yang dapat menyimpan satu atau beberapa proyek. Proyek dapat berupa aplikasi (seperti iOS atau Android), pustaka pendukung, aplikasi pengujian, dan banyak lagi. Di aplikasi Telepon word, proyek i Telepon baru ditambahkan menggunakan templat Aplikasi Tampilan Tunggal. Solusi awal terlihat seperti ini:

Anatomi aplikasi Xamarin.iOS

Di sebelah kiri adalah Pad solusi, yang berisi struktur direktori dan semua file yang terkait dengan solusi:

Di sebelah kanan adalah Panel solusi, yang berisi struktur direktori dan semua file yang terkait dengan solusi:

Di panduan Hello, iOS, Anda membuat solusi yang disebut Telepon word dan menempatkan proyek iOS - Telepon word_iOS - di dalamnya. Item di dalam proyek meliputi:

• Referensi - Berisi rakitan yang diperlukan untuk membangun dan menjalankan aplikasi. Perluas direktori untuk melihat referensi ke rakitan .NET seperti System, System.Core, dan System.Xml, serta referensi ke rakitan Xamarin.iOS.
• Paket - Direktori paket berisi paket NuGet siap pakai.
• Sumber Daya - Folder sumber daya menyimpan media lain.
• Main.cs - Ini berisi titik masuk utama aplikasi. Untuk memulai aplikasi, nama kelas aplikasi utama, AppDelegate, diteruskan dalam .
• AppDelegate.cs – File ini berisi kelas aplikasi utama dan bertanggung jawab untuk membuat Jendela, membangun antarmuka pengguna, dan mendengarkan peristiwa dari sistem operasi.
• Main.storyboard - Storyboard berisi desain visual antarmuka pengguna aplikasi. File papan cerita terbuka di editor grafis yang disebut iOS Designer.
• ViewController.cs – Pengontrol tampilan mendukung layar (Tampilan) yang dilihat dan disentuh pengguna. Pengontrol tampilan bertanggung jawab untuk menangani interaksi antara pengguna dan Tampilan.
• ViewController.designer.cs – designer.cs adalah file yang dihasilkan secara otomatis yang berfungsi sebagai lem antara kontrol dalam Tampilan dan representasi kodenya di pengontrol tampilan. Karena ini adalah file pipa internal, IDE akan menimpa perubahan manual apa pun dan sebagian besar waktu file ini dapat diabaikan.
• Info.plist – Info.plist adalah tempat properti aplikasi seperti nama aplikasi, ikon, gambar peluncuran, dan lainnya diatur. Ini adalah file yang kuat dan pengenalan menyeluruh tentangnya tersedia dalam panduan Bekerja dengan Daftar Properti.
• Entitlements.plist - Daftar properti pemberian izin memungkinkan kami menentukan kemampuan aplikasi (juga disebut App Store Technologies) seperti iCloud, PassKit, dan banyak lagi. Informasi selengkapnya tentang Entitlements.plist dapat ditemukan di panduan Bekerja dengan Daftar Properti. Untuk pengenalan umum tentang pemberian izin, lihat panduan Provisi Perangkat.

Arsitektur dan dasar-dasar aplikasi

Sebelum aplikasi iOS dapat memuat antarmuka pengguna, dua hal harus diberlakukan. Pertama, aplikasi perlu menentukan titik masuk - kode pertama yang berjalan ketika proses aplikasi dimuat ke dalam memori. Kedua, perlu menentukan kelas untuk menangani peristiwa di seluruh aplikasi dan berinteraksi dengan sistem operasi.

Bagian ini mempelajari hubungan yang diilustrasikan dalam diagram berikut:

Metode utama

Titik masuk utama aplikasi iOS adalah Application kelas . Kelas Application didefinisikan dalam file Main.cs dan berisi metode statis Main . Ini membuat instans aplikasi Xamarin.iOS baru dan meneruskan nama kelas Delegasi Aplikasi yang akan menangani peristiwa OS. Kode templat untuk metode statis Main muncul di bawah ini:

using System;
using UIKit;

namespace Phoneword_iOS
{
    public class Application
    {
        static void Main (string[] args)
        {
            UIApplication.Main (args, null, "AppDelegate");
        }
    }
}

Delegasi aplikasi

Di iOS, kelas Delegasi Aplikasi menangani peristiwa sistem; kelas ini berada di dalam AppDelegate.cs. Kelas AppDelegate mengelola Jendela aplikasi. Jendela adalah satu instans UIWindow kelas yang berfungsi sebagai kontainer untuk antarmuka pengguna. Secara default, aplikasi hanya mendapatkan satu Jendela untuk memuat kontennya, dan Jendela dilampirkan ke Layar (instans tunggal UIScreen ) yang menyediakan persegi panjang pembatas yang cocok dengan dimensi layar perangkat fisik.

AppDelegate juga bertanggung jawab untuk berlangganan pembaruan sistem tentang peristiwa aplikasi penting seperti ketika aplikasi selesai diluncurkan atau ketika memori rendah.

Kode templat untuk AppDelegate disajikan di bawah ini:

using System;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{

    [Register ("AppDelegate")]
    public partial class AppDelegate : UIApplicationDelegate
    {
        public override UIWindow Window {
            get;
            set;
        }

        ...
    }
}

Setelah aplikasi menentukan Jendelanya, aplikasi dapat mulai memuat antarmuka pengguna. Bagian berikutnya menjelajahi pembuatan UI.

Antarmuka pengguna

Antarmuka pengguna aplikasi iOS seperti etalase - aplikasi biasanya mendapatkan satu Jendela, tetapi dapat mengisi Jendela dengan objek sebanyak yang dibutuhkannya, dan objek dan pengaturan dapat diubah tergantung pada apa yang ingin ditampilkan aplikasi. Objek dalam skenario ini - hal-hal yang dilihat pengguna - disebut Tampilan. Untuk membangun satu layar dalam aplikasi, Tampilan ditumpuk di atas satu sama lain dalam Hierarki Tampilan Konten, dan hierarki dikelola oleh pengontrol tampilan tunggal. Aplikasi dengan beberapa layar memiliki beberapa Hierarki Tampilan Konten, masing-masing dengan pengontrol tampilannya sendiri, dan aplikasi menempatkan Tampilan di Jendela untuk membuat Hierarki Tampilan Konten yang berbeda berdasarkan layar tempat pengguna berada.

Untuk detail selengkapnya tentang membangun antarmuka pengguna menggunakan Storyboards, lihat bagian Mendesain dengan Papan Cerita dari Gambaran Umum Xcode di Perpustakaan Pengembang iOS Apple.

Diagram di bawah ini menggambarkan hubungan antara Jendela, Tampilan, Subview, dan pengontrol tampilan yang membawa antarmuka pengguna ke layar perangkat:

Di bagian berikutnya membahas cara bekerja dengan Tampilan dalam kode dan belajar memprogram interaksi pengguna menggunakan pengontrol tampilan dan Lihat siklus hidup.

Melihat pengontrol dan siklus hidup tampilan

Setiap Hierarki Tampilan Konten memiliki pengontrol tampilan yang sesuai untuk mendukung interaksi pengguna. Peran pengontrol tampilan adalah mengelola Tampilan dalam Hierarki Tampilan Konten. Pengontrol tampilan bukan bagian dari Hierarki Tampilan Konten, dan bukan elemen dalam antarmuka. Sebaliknya, ini menyediakan kode yang mendukung interaksi pengguna dengan objek di layar.

Melihat pengontrol dan papan cerita

Pengontrol tampilan diwakili dalam Papan Cerita sebagai bilah di bagian bawah Adegan. Memilih pengontrol tampilan memunculkan propertinya di Properties Pad:

Kelas pengontrol tampilan kustom untuk Hierarki Tampilan Konten yang diwakili oleh Adegan ini dapat diatur dengan mengedit properti Kelas di bagian Identitas di Pad Properti. Misalnya, aplikasi Telepon word kami menetapkan ViewController sebagai pengontrol tampilan untuk layar pertama kami, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Pengontrol tampilan diwakili dalam Papan Cerita sebagai bilah di bagian bawah Adegan. Memilih pengontrol tampilan memunculkan propertinya di Panel Properti:

Kelas pengontrol tampilan kustom untuk Hierarki Tampilan Konten yang diwakili oleh Adegan ini dapat diatur dengan mengedit properti Kelas di bagian Identitas panel Properti. Misalnya, aplikasi Telepon word kami menetapkan ViewController sebagai pengontrol tampilan untuk layar pertama kami, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Ini menautkan representasi Storyboard dari pengontrol tampilan ke ViewController kelas C#. ViewController.cs Buka pengontrol tampilan file dan pemberitahuan adalah subkelas dari UIViewController, seperti yang diilustrasikan oleh kode di bawah ini:

public partial class ViewController : UIViewController
{
    public ViewController (IntPtr handle) : base (handle)
    {

    }
}

Sekarang ViewController mendorong interaksi hierarki tampilan konten yang terkait dengan pengontrol tampilan ini di papan cerita. Selanjutnya Anda akan mempelajari tentang peran pengontrol tampilan dalam mengelola Tampilan dengan memperkenalkan proses yang disebut siklus hidup tampilan.

Catatan

Untuk layar khusus visual yang tidak memerlukan interaksi pengguna, properti Kelas dapat dibiarkan kosong di Properties Pad. Ini mengatur kelas pencadangan pengontrol tampilan sebagai implementasi default , UIViewControlleryang sesuai jika Anda tidak berencana menambahkan kode kustom.

Lihat siklus hidup

Pengontrol tampilan bertanggung jawab untuk memuat dan membongkar hierarki tampilan konten dari jendela. Ketika sesuatu yang penting terjadi pada tampilan dalam hierarki tampilan konten, sistem operasi memberi tahu pengontrol tampilan melalui peristiwa dalam siklus hidup tampilan. Dengan mengesampingkan metode dalam siklus hidup tampilan, Anda dapat berinteraksi dengan objek di layar dan membuat antarmuka pengguna yang dinamis dan responsif.

Ini adalah metode siklus hidup dasar dan fungsinya:

• ViewDidLoad - Dipanggil setelah pertama kali pengontrol tampilan memuat Hierarki Tampilan Kontennya ke dalam memori. Ini adalah tempat yang baik untuk melakukan pengaturan awal karena saat Subviews pertama kali tersedia dalam kode.
• ViewWillAppear - Dipanggil setiap kali Tampilan pengontrol tampilan akan ditambahkan ke Hierarki Tampilan Konten dan muncul di layar.
• ViewWillDisappear - Dipanggil setiap kali Tampilan pengontrol tampilan akan dihapus dari Hierarki Tampilan Konten dan menghilang dari layar. Peristiwa siklus hidup ini digunakan untuk membersihkan dan menyimpan status.
• ViewDidAppear dan ViewDidDisappear - Dipanggil saat Tampilan ditambahkan atau dihapus dari Hierarki Tampilan Konten.

Ketika kode kustom ditambahkan ke tahap siklus hidup apa pun, implementasi dasar metode siklus hidup tersebut harus ditimpa. Ini dicapai dengan mengetuk ke dalam metode siklus hidup yang ada, yang memiliki beberapa kode yang sudah terpasang padanya, dan memperluasnya dengan kode tambahan. Implementasi dasar dipanggil dari dalam metode untuk memastikan kode asli berjalan sebelum kode baru. Contoh ini ditunjukkan di bagian berikutnya.

Untuk informasi selengkapnya tentang bekerja dengan pengontrol tampilan, lihat Panduan Pemrograman pengontrol tampilan Apple untuk iOS dan referensi UIViewController.

Menanggapi interaksi pengguna

Peran terpenting dari pengontrol tampilan adalah merespons interaksi pengguna, seperti penekanan tombol, navigasi, dan lainnya. Cara paling sederhana untuk menangani interaksi pengguna adalah dengan menghubungkan kontrol untuk mendengarkan input pengguna dan melampirkan penanganan aktivitas untuk merespons input. Misalnya, tombol dapat dikabel untuk merespons peristiwa sentuhan, seperti yang ditunjukkan di aplikasi Telepon word.

Mari kita jelajahi cara kerjanya. Phoneword_iOS Dalam proyek, tombol ditambahkan dipanggil TranslateButton ke Hierarki Tampilan Konten:

Saat outlet referensi dibuat menggunakan Xcode Interface Builder, Xcode Sync secara otomatis memetakannya ke kontrol di ViewController.designer.cs, membuat TranslateButton tersedia di dalam ViewControllerkelas. Kontrol pertama kali tersedia dalam ViewDidLoad tahap siklus hidup Tampilan, sehingga metode siklus hidup ini digunakan untuk merespons sentuhan pengguna:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // wire up TranslateButton here
}

Aplikasi Telepon word menggunakan peristiwa sentuhan yang disebut TouchUpInside untuk mendengarkan sentuhan pengguna. TouchUpInside mendengarkan acara sentuhan (jari mengangkat layar) yang mengikuti sentuhan ke bawah (jari menyentuh layar) di dalam batas kontrol. Kebalikannya TouchUpInside adalah TouchDown peristiwa, yang diaktifkan ketika pengguna menekan kontrol. Peristiwa ini TouchDown menangkap banyak kebisingan dan tidak memberi pengguna opsi untuk membatalkan sentuhan dengan meluncurkan jari mereka dari kontrol. TouchUpInside adalah cara paling umum untuk menanggapi sentuhan Tombol dan menciptakan pengalaman yang diharapkan pengguna saat menekan tombol. Informasi selengkapnya tentang ini tersedia dalam Panduan Antarmuka Manusia iOS Apple.

Aplikasi ini menangani TouchUpInside peristiwa dengan lambda, tetapi delegasi atau penanganan aktivitas bernama juga dapat digunakan. Kode Tombol akhir menyerupkan yang berikut ini:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    string translatedNumber = "";

    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
      translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);
      PhoneNumberText.ResignFirstResponder ();

      if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
      } else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
      }
  };
}

Konsep tambahan yang diperkenalkan dalam Telepon word

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

• Ubah Teks Tombol – Aplikasi Telepon word menunjukkan cara mengubah teks Tombol dengan memanggil SetTitle Tombol dan meneruskan teks baru dan Status Kontrol Tombol. Misalnya, kode berikut mengubah teks CallButton menjadi "Call":

  CallButton.SetTitle ("Call", UIControlState.Normal);
  

• Aktifkan dan Nonaktifkan Tombol – Tombol dapat berada dalam status Enabled atau Disabled . Tombol yang dinonaktifkan tidak akan merespons input pengguna. Misalnya, kode berikut menonaktifkan CallButton:

  CallButton.Enabled = false;
  

  Untuk informasi selengkapnya tentang tombol, lihat panduan Tombol .

• Mematikan Keyboard – Saat pengguna mengetuk Bidang Teks, iOS menampilkan keyboard untuk memungkinkan pengguna memasukkan input. Sayangnya, tidak ada fungsionalitas bawaan untuk menutup keyboard. Kode berikut ditambahkan ke TranslateButton untuk menutup keyboard saat pengguna menekan TranslateButton:

  PhoneNumberText.ResignFirstResponder ();
  

  Untuk contoh lain mematikan keyboard, lihat Mengalihkan resep Keyboard .

• Lakukan panggilan Telepon dengan URL – Di aplikasi Telepon word, skema URL Apple digunakan untuk meluncurkan aplikasi telepon sistem. Skema URL kustom terdiri dari awalan "tel:" dan nomor telepon yang diterjemahkan, seperti yang diilustrasikan oleh kode di bawah ini:

  var url = new NSUrl ("tel:" + translatedNumber);
  if (!UIApplication.SharedApplication.OpenUrl (url))
  {
      // show alert Controller
  }
  

• Tampilkan Pemberitahuan – Saat pengguna mencoba melakukan panggilan telepon di perangkat yang tidak mendukung panggilan – misalnya simulator atau iPod Touch – dialog pemberitahuan ditampilkan untuk memberi tahu pengguna bahwa panggilan telepon tidak dapat dilakukan. Kode di bawah ini membuat dan mengisi pengontrol pemberitahuan:

  if (!UIApplication.SharedApplication.OpenUrl (url)) {
                  var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                  alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                  PresentViewController (alert, true, null);
              }
  

  Untuk informasi selengkapnya tentang tampilan pemberitahuan iOS, lihat resep Pengontrol Pemberitahuan.

Menguji, menyebarkan, dan menyelesaikan sentuhan

Visual Studio untuk Mac dan Visual Studio menyediakan banyak opsi untuk menguji dan menyebarkan aplikasi. Bagian ini mencakup opsi penelusuran kesalahan, menunjukkan aplikasi pengujian di perangkat, dan memperkenalkan alat untuk membuat ikon aplikasi kustom dan meluncurkan gambar.

Alat penelusuran kesalahan

Terkadang masalah dalam kode aplikasi sulit didiagnosis. Untuk membantu mendiagnosis masalah kode kompleks, Anda dapat Mengatur Titik Henti, Langkah Melalui Kode, atau Informasi Output ke Jendela Log.

Sebarkan ke perangkat

Simulator iOS adalah cara cepat untuk menguji aplikasi. Simulator memiliki sejumlah pengoptimalan yang berguna untuk pengujian, termasuk lokasi tiruan, gerakan simulasi, dan banyak lagi. Namun, pengguna tidak akan menggunakan aplikasi akhir dalam Simulator. Semua aplikasi harus diuji pada perangkat nyata lebih awal dan sering.

Perangkat membutuhkan waktu untuk memprovisikan dan memerlukan Akun Pengembang Apple. Panduan Provisi Perangkat memberikan instruksi menyeluruh tentang menyiapkan perangkat untuk pengembangan.

Catatan

Saat ini, karena persyaratan dari Apple, perlu memiliki sertifikat pengembangan atau identitas penandatanganan untuk membangun kode Anda untuk perangkat fisik atau simulator. Ikuti langkah-langkah dalam panduan Provisi Perangkat untuk menyiapkannya.

Setelah perangkat disediakan, Anda dapat menyebarkannya dengan menyambungkannya, mengubah target di toolbar build ke Perangkat iOS, dan menekan Mulai ( Putar) seperti yang diilustrasikan oleh cuplikan layar berikut:

Aplikasi akan disebarkan ke perangkat iOS:

Buat ikon kustom dan luncurkan gambar

Tidak semua orang memiliki perancang yang tersedia untuk membuat ikon kustom dan meluncurkan gambar yang dibutuhkan aplikasi untuk menonjol. Berikut adalah beberapa pendekatan alternatif untuk menghasilkan karya seni aplikasi kustom:

• Pixelmator – Aplikasi pengeditan gambar serbaguna untuk Mac yang harganya sekitar $30.
• Fiverr – Pilih dari berbagai desainer untuk membuat set ikon untuk Anda, mulai dari $ 5. Dapat dipukul atau dilewatkan tetapi sumber daya yang baik jika Anda membutuhkan ikon yang dirancang dengan cepat

• Visual Studio – Anda dapat menggunakan ini untuk membuat ikon sederhana yang ditetapkan untuk aplikasi Anda langsung di IDE.
• Fiverr – Pilih dari berbagai desainer untuk membuat set ikon untuk Anda, mulai dari $ 5. Dapat dipukul atau dilewatkan tetapi sumber daya yang baik jika Anda membutuhkan ikon yang dirancang dengan cepat

Untuk informasi selengkapnya tentang ikon dan meluncurkan ukuran dan persyaratan gambar, lihat panduan Bekerja dengan Gambar.

Ringkasan

Selamat! Anda sekarang memiliki pemahaman yang kuat tentang komponen aplikasi Xamarin.iOS serta alat yang digunakan untuk membuatnya. Dalam tutorial berikutnya dalam seri Memulai, Anda akan memperluas aplikasi kami untuk menangani beberapa layar. Sepanjang jalan Anda akan mengimplementasikan Pengontrol Navigasi, mempelajari tentang Storyboard Segues, dan memperkenalkan pola Model, Tampilan, Pengontrol (MVC) saat Anda memperluas aplikasi Anda untuk menangani beberapa layar.

Tautan terkait

• Pedoman Antarmuka Manusia iOS
• Portal Provisi iOS