Hello, iOS Multiscreen – Mulai Cepat

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.

Bagian panduan ini akan menambahkan layar kedua ke aplikasi Telepon word yang menampilkan riwayat nomor telepon yang dipanggil dengan aplikasi. Aplikasi akhir akan memiliki layar kedua yang menampilkan riwayat panggilan, seperti yang diilustrasikan oleh cuplikan layar berikut:

Deep Dive yang menyertainya, akan meninjau aplikasi yang dibangun dan membahas arsitektur, navigasi, dan konsep iOS baru lainnya yang kami temui di sepanjang jalan.

Persyaratan

Panduan ini melanjutkan tempat dokumen Hello, iOS ditinggalkan, dan memerlukan penyelesaian Mulai Cepat Hello, iOS.

Panduan di macOS

Panduan ini akan menambahkan layar Riwayat Panggilan ke aplikasi Telepon word kami.

1. Buka aplikasi Telepon word di Visual Studio untuk Mac.

2. Buka file Main.storyboard dari Solution Pad:

   

3. Seret pengontrol navigasi dari Kotak Alat ke permukaan desain (Anda mungkin perlu memperkecil agar sesuai dengan semua ini di permukaan desain!):

   

4. Seret segue tanpa sumber (yaitu panah abu-abu di sebelah kiri pengontrol tampilan tunggal) ke pengontrol navigasi untuk mengubah titik awal aplikasi:

   

5. Pilih pengontrol tampilan akar yang ada dengan mengklik bilah bawah, dan tekan Hapus untuk menghapusnya dari permukaan desain. Kemudian, pindahkan adegan Telepon word di samping pengontrol navigasi:

   

6. Atur ViewController sebagai pengontrol tampilan Root pengontrol navigasi. Tekan tombol Ctrl dan klik di dalam pengontrol navigasi. Garis biru akan muncul. Kemudian, masih tahan tombol Ctrl, seret dari pengontrol navigasi ke adegan Telepon word dan lepaskan. Ini disebut Ctrl-dragging:

   

7. Dari popover, atur hubungan ke Root:

   

   ViewController sekarang menjadi pengontrol tampilan Root pengontrol navigasi:

   

8. Klik dua kali pada bilah Judul layar Telepon word dan ubah Judul menjadi Telepon word:

   

9. Seret Tombol dari Kotak Alat dan letakkan di bawah Tombol Panggil. Seret handel untuk membuat Tombol baru lebarnya sama dengan Tombol Panggil:

   

10. Di Pad Properti, ubah Nama tombol menjadi CallHistoryButton dan ubah Judul menjadi Riwayat Panggilan:

    

11. Buat layar Riwayat Panggilan. Dari Kotak Alat, seret pengontrol tampilan tabel ke permukaan desain:

    

12. Selanjutnya, pilih pengontrol tampilan tabel dengan mengklik bilah hitam di bagian bawah adegan. Di Pad Properti, ubah kelas pengontrol tampilan tabel menjadi CallHistoryController dan tekan Enter:

    

    Desainer iOS akan menghasilkan kelas backing kustom yang disebut CallHistoryController untuk mengelola hierarki tampilan konten layar ini. File CallHistoryController.cs akan muncul di Solution Pad:

    

13. Klik dua kali pada file CallHistoryController.cs untuk membukanya dan mengganti konten dengan kode berikut:

    using System;
    using Foundation;
    using UIKit;
    using System.Collections.Generic;
    
    namespace Phoneword_iOS
    {
        public partial class CallHistoryController : UITableViewController
        {
            public List<string> PhoneNumbers { get; set; }
    
            static NSString callHistoryCellId = new NSString ("CallHistoryCell");
    
            public CallHistoryController (IntPtr handle) : base (handle)
            {
                TableView.RegisterClassForCellReuse (typeof(UITableViewCell), callHistoryCellId);
                TableView.Source = new CallHistoryDataSource (this);
                PhoneNumbers = new List<string> ();
            }
    
            class CallHistoryDataSource : UITableViewSource
            {
                CallHistoryController controller;
    
                public CallHistoryDataSource (CallHistoryController controller)
                {
                    this.controller = controller;
                }
    
                public override nint RowsInSection (UITableView tableView, nint section)
                {
                    return controller.PhoneNumbers.Count;
                }
    
                public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
                {
                    var cell = tableView.DequeueReusableCell (CallHistoryController.callHistoryCellId);
    
                    int row = indexPath.Row;
                    cell.TextLabel.Text = controller.PhoneNumbers [row];
                    return cell;
                }
            }
        }
    }
    

    Simpan aplikasi (⌘ + s) dan buat (⌘ + b) untuk memastikan tidak ada kesalahan.

14. Buat segue (transisi) antara adegan Telepon word dan adegan Riwayat Panggilan. Di adegan Telepon word, pilih Tombol Riwayat Panggilan dan Ctrl-seret dari Tombol ke adegan Riwayat Panggilan:

    

    Dari popover Action Segue , pilih Tampilkan

    Desainer iOS akan menambahkan Segue di antara dua adegan:

    

15. Tambahkan Judul ke pengontrol tampilan tabel dengan memilih bilah hitam di bagian bawah adegan dan mengubah tampilan Judul pengontrol ke Riwayat Panggilan di Properti Pad:

    

16. Ketika aplikasi dijalankan, Tombol Riwayat Panggilan akan membuka layar Riwayat Panggilan, tetapi tampilan tabel akan kosong karena tidak ada kode untuk melacak dan menampilkan nomor telepon.

    Aplikasi ini akan menyimpan nomor telepon sebagai daftar string.

    using Tambahkan direktif untuk System.Collections.Generic di bagian atas ViewController:

    using System.Collections.Generic;
    

17. ViewController Ubah kelas dengan kode berikut:

    using System;
    using System.Collections.Generic;
    using Foundation;
    using UIKit;
    
    namespace Phoneword_iOS
    {
      public partial class ViewController : UIViewController
      {
        string translatedNumber = "";
    
        public List<string> PhoneNumbers { get; set; }
    
        protected ViewController(IntPtr handle) : base(handle)
        {
          //initialize list of phone numbers called for Call History screen
          PhoneNumbers = new List<string>();
        }
    
        public override void ViewDidLoad()
        {
          base.ViewDidLoad();
          // Perform any additional setup after loading the view, typically from a nib.
    
          TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
            // Convert the phone number with text to a number
            // using PhoneTranslator.cs
            translatedNumber = PhoneTranslator.ToNumber(
              PhoneNumberText.Text);
    
            // Dismiss the keyboard if text field was tapped
            PhoneNumberText.ResignFirstResponder();
    
            if (translatedNumber == "")
            {
              CallButton.SetTitle("Call ", UIControlState.Normal);
              CallButton.Enabled = false;
            }
            else
            {
              CallButton.SetTitle("Call " + translatedNumber,
                UIControlState.Normal);
              CallButton.Enabled = true;
            }
          };
    
          CallButton.TouchUpInside += (object sender, EventArgs e) => {
    
            //Store the phone number that we're dialing in PhoneNumbers
            PhoneNumbers.Add(translatedNumber);
    
            // Use URL handler with tel: prefix to invoke Apple's Phone app...
            var url = new NSUrl("tel:" + translatedNumber);
    
            // otherwise show an alert dialog
            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);
            }
          };
        }
    
        public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
        {
          base.PrepareForSegue(segue, sender);
    
          // set the view controller that’s powering the screen we’re
          // transitioning to
    
          var callHistoryController = segue.DestinationViewController as CallHistoryController;
    
          //set the table view controller’s list of phone numbers to the
          // list of dialed phone numbers
    
          if (callHistoryController != null)
          {
            callHistoryController.PhoneNumbers = PhoneNumbers;
          }
        }
      }
    }
    

    Ada beberapa hal yang terjadi di sini:

    • Variabel translatedNumber dipindahkan dari metode ke ViewDidLoadvariabel tingkat kelas.
    • Kode CallButton dimodifikasi untuk menambahkan nomor dipanggil ke daftar nomor telepon dengan memanggil PhoneNumbers.Add(translatedNumber).
    • Metode PrepareForSegue ditambahkan.

    Simpan dan buat aplikasi untuk memastikan tidak ada kesalahan.

18. Tekan tombol Mulai untuk meluncurkan aplikasi di dalam Simulator iOS:

    

Selamat atas penyelesaian aplikasi Xamarin.iOS multi-layar pertama Anda!

Panduan di Windows

Panduan ini akan menambahkan layar Riwayat Panggilan ke aplikasi Telepon word kami.

1. Buka aplikasi Telepon word di Visual Studio. Ingat bahwa perlu terhubung ke Mac untuk menggunakan iOS Designer, dan simulator iOS.

2. Mulailah dengan mengedit antarmuka pengguna. Buka file Main.storyboard dari Penjelajah Solusi, pastikan bahwa Lihat Sebagai diatur ke i Telepon 6:

   

3. Seret pengontrol navigasi dari Kotak Alat ke permukaan desain:

   

4. Seret Segue Tanpa Sumber (itulah panah abu-abu ke sebelah kiri adegan Telepon word) dari adegan Telepon word ke pengontrol navigasi untuk mengubah titik awal aplikasi:

   

5. Pilih pengontrol tampilan Akar dengan mengklik bilah hitam, dan tekan Hapus untuk menghapusnya dari permukaan desain. Kemudian, pindahkan adegan Telepon word di samping pengontrol navigasi:

   

6. Atur ViewController sebagai pengontrol tampilan akar pengontrol navigasi. Tekan tombol Ctrl dan klik di dalam Pengontrol Navigasi. Garis biru akan muncul. Kemudian, masih tahan tombol Ctrl, seret dari Pengontrol Navigasi ke adegan Telepon word dan rilis. Ini disebut Ctrl-dragging:

   

7. Dari popover, atur hubungan ke Root:

   

   ViewController sekarang menjadi pengontrol tampilan Root pengontrol navigasi kami.

8. Klik dua kali pada bilah Judul layar Telepon word dan ubah Judul menjadi Telepon word:

   

9. Seret Tombol dari Kotak Alat dan letakkan di bawah Tombol Panggil. Seret handel untuk membuat Tombol baru lebarnya sama dengan Tombol Panggil:

   

10. Di Penjelajah Properti, ubah Nama Tombol menjadi CallHistoryButton dan ubah Judul menjadi Riwayat Panggilan:

    

11. Buat layar Riwayat Panggilan. Dari Kotak Alat, seret pengontrol tampilan tabel ke permukaan desain:

    

12. Pilih pengontrol tampilan tabel dengan mengklik bilah hitam di bagian bawah adegan. Di Penjelajah Properti, ubah kelas pengontrol tampilan tabel menjadi CallHistoryController dan tekan Enter:

    

    Desainer iOS akan menghasilkan kelas backing kustom yang disebut CallHistoryController untuk mengelola hierarki tampilan konten layar ini. File CallHistoryController.cs akan muncul di Penjelajah Solusi:

    

13. Klik dua kali pada file CallHistoryController.cs untuk membukanya dan mengganti konten dengan kode berikut:

    using System;
    using Foundation;
    using UIKit;
    using System.Collections.Generic;
    
    namespace Phoneword
    {
        public partial class CallHistoryController : UITableViewController
        {
            public List<String> PhoneNumbers { get; set; }
    
            static NSString callHistoryCellId = new NSString ("CallHistoryCell");
    
            public CallHistoryController (IntPtr handle) : base (handle)
            {
                TableView.RegisterClassForCellReuse (typeof(UITableViewCell), callHistoryCellId);
                TableView.Source = new CallHistoryDataSource (this);
                PhoneNumbers = new List<string> ();
            }
    
            class CallHistoryDataSource : UITableViewSource
            {
                CallHistoryController controller;
    
                public CallHistoryDataSource (CallHistoryController controller)
                {
                    this.controller = controller;
                }
    
                // Returns the number of rows in each section of the table
                public override nint RowsInSection (UITableView tableView, nint section)
                {
                    return controller.PhoneNumbers.Count;
                }
    
                public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath)
                {
                    var cell = tableView.DequeueReusableCell (CallHistoryController.callHistoryCellId);
    
                    int row = indexPath.Row;
                    cell.TextLabel.Text = controller.PhoneNumbers [row];
                    return cell;
                }
            }
        }
    }
    

    Simpan aplikasi dan buat untuk memastikan tidak ada kesalahan. Tidak apa-apa untuk mengabaikan peringatan build apa pun untuk saat ini.

14. Buat segue (transisi) antara adegan Telepon word dan adegan Riwayat Panggilan. Di adegan Telepon word, pilih Tombol Riwayat Panggilan dan Ctrl-seret dari Tombol ke adegan Riwayat Panggilan:

    

    Dari popover Action Segue , pilih Tampilkan:

    

    Perancang iOS akan menambahkan segue di antara dua adegan:

    

15. Tambahkan Judul ke pengontrol tampilan tabel dengan memilih bilah hitam di bagian bawah adegan dan mengubah tampilan Judul pengontrol > ke Riwayat Panggilan di Penjelajah Properti:

    

16. Ketika aplikasi dijalankan, Tombol Riwayat Panggilan akan membuka layar Riwayat Panggilan, tetapi tampilan tabel akan kosong karena tidak ada kode untuk melacak dan menampilkan nomor telepon.

    Aplikasi ini akan menyimpan nomor telepon sebagai daftar string.

    using Tambahkan direktif untuk System.Collections.Generic di bagian atas ViewController:

    using System.Collections.Generic;
    

17. ViewController Ubah kelas dengan kode berikut:

    using System;
    using System.Collections.Generic;
    using Foundation;
    using UIKit;
    
    namespace Phoneword_iOS
    {
      public partial class ViewController : UIViewController
      {
        string translatedNumber = "";
    
        public List<string> PhoneNumbers { get; set; }
    
        protected ViewController(IntPtr handle) : base(handle)
        {
          //initialize list of phone numbers called for Call History screen
          PhoneNumbers = new List<string>();
        }
    
        public override void ViewDidLoad()
        {
          base.ViewDidLoad();
          // Perform any additional setup after loading the view, typically from a nib.
    
          TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
            // Convert the phone number with text to a number
            // using PhoneTranslator.cs
            translatedNumber = PhoneTranslator.ToNumber(
              PhoneNumberText.Text);
    
            // Dismiss the keyboard if text field was tapped
            PhoneNumberText.ResignFirstResponder();
    
            if (translatedNumber == "")
            {
              CallButton.SetTitle("Call ", UIControlState.Normal);
              CallButton.Enabled = false;
            }
            else
            {
              CallButton.SetTitle("Call " + translatedNumber,
                UIControlState.Normal);
              CallButton.Enabled = true;
            }
          };
    
          CallButton.TouchUpInside += (object sender, EventArgs e) => {
    
            //Store the phone number that we're dialing in PhoneNumbers
            PhoneNumbers.Add(translatedNumber);
    
            // Use URL handler with tel: prefix to invoke Apple's Phone app...
            var url = new NSUrl("tel:" + translatedNumber);
    
            // otherwise show an alert dialog
            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);
            }
          };
        }
    
        public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
        {
          base.PrepareForSegue(segue, sender);
    
          // set the view controller that’s powering the screen we’re
          // transitioning to
    
          var callHistoryController = segue.DestinationViewController as CallHistoryController;
    
          //set the table view controller’s list of phone numbers to the
          // list of dialed phone numbers
    
          if (callHistoryController != null)
          {
            callHistoryController.PhoneNumbers = PhoneNumbers;
          }
        }
      }
    }
    

    Ada beberapa hal yang terjadi di sini

    • Variabel translatedNumber dipindahkan dari metode ke ViewDidLoadvariabel tingkat kelas.
    • Kode CallButton dimodifikasi untuk menambahkan nomor dipanggil ke daftar nomor telepon dengan memanggil PhoneNumbers.Add(translatedNumber)
    • Metode PrepareForSegue ditambahkan

    Simpan dan buat aplikasi untuk memastikan tidak ada kesalahan.

    Simpan dan buat aplikasi untuk memastikan tidak ada kesalahan.

18. Tekan tombol Mulai untuk meluncurkan aplikasi kami di dalam Simulator iOS:

    

Selamat atas penyelesaian aplikasi Xamarin.iOS multi-layar pertama Anda!

Aplikasi ini sekarang dapat menangani navigasi menggunakan segue papan cerita dan dalam kode. Sekarang saatnya untuk membedah alat dan keterampilan yang baru saja kita pelajari di Hello, iOS Multiscreen Deep Dive.

Link Terkait

• Pedoman Antarmuka Manusia iOS