Hello, iOS Multiscreen – Hızlı Başlangıç

Uyarı

iOS Tasarım Aracı, Mac için Visual Studio 2019 sürüm 16.8 ve Visual Studio 2019 sürüm 8.8'de kullanım dışı bırakıldı ve Visual Studio 2019 sürüm 16.9 ve Mac için Visual Studio sürüm 8.9'da kaldırıldı. iOS kullanıcı arabirimleri oluşturmanın önerilen yolu doğrudan Xcode'un Interface Builder'ını çalıştıran bir Mac'tedir. Daha fazla bilgi için bkz . Xcode ile kullanıcı arabirimleri tasarlama.

İzlenecek kılavuzun bu bölümü, uygulamayla birlikte çağrılan telefon numaralarının geçmişini görüntüleyen Telefon word uygulamasına ikinci bir ekran ekler. Son uygulama, aşağıdaki ekran görüntüsünde gösterildiği gibi arama geçmişini görüntüleyen ikinci bir ekrana sahip olacaktır:

Buna ek olarak, derlenen uygulamayı gözden geçirecek ve bu arada karşılaştığımız mimari, gezinti ve diğer yeni iOS kavramlarını ele alacaktır.

Gereksinimler

Bu kılavuz, Hello, iOS belgesinin kaldığı yerden devam eder ve Hello, iOS Hızlı Başlangıcı'nın tamamlanmasını gerektirir.

macOS'ta izlenecek yol

Bu izlenecek yol, Telefon word uygulamamıza bir Arama Geçmişi ekranı ekler.

1. Mac için Visual Studio'da Telefon word uygulamasını açın.

2. Çözüm Bölmesi'nden Main.storyboard dosyasını açın:

   

3. Araç Kutusundanbir gezinti denetleyicisini tasarım yüzeyine sürükleyin (Bunların tümünü tasarım yüzeyine sığdırmak için uzaklaştırmanız gerekebilir!):

   

4. Uygulamanın başlangıç noktasını değiştirmek için kaynaksız segue'yi (tek görünüm denetleyicisinin solundaki gri ok) gezinti denetleyicisine sürükleyin:

   

5. Alttaki çıtaya tıklayarak mevcut kök görünüm denetleyicisini seçin ve delete tuşuna basarak bunu tasarım yüzeyinden kaldırın. Ardından Telefon word sahnesini gezinti denetleyicisinin yanına taşıyın:

   

6. ViewController'i gezinti denetleyicisinin Kök görünüm denetleyicisi olarak ayarlayın. Ctrl tuşuna basın ve gezinti denetleyicisinin içine tıklayın. Mavi bir çizgi görünmelidir. Ardından, Ctrl tuşunu basılı tutarak gezinti denetleyicisinden Telefon word görünümüne sürükleyin ve bırakın. Buna Ctrl tuşunu basılı tutarak sürükleme adı verilir:

   

7. Açılır menüden ilişkiyi Kök olarak ayarlayın:

   

   ViewController artık gezinti denetleyicisinin Kök görünüm denetleyicisidir:

   

8. Telefon word ekranının Başlık çubuğuna çift tıklayın ve Başlık'ıTelefon word olarak değiştirin:

   

9. Araç Kutusu'ndanbir Düğmeyi sürükleyin ve Arama Düğmesi'nin altına yerleştirin. Yeni Düğmeyi Arama Düğmesi ile aynı genişlikte yapmak için tutamaçları sürükleyin:

   

10. Özellikler Bölmesi'nde düğmenin Adını CallHistoryButton olarak değiştirin ve Başlık'ı Arama Geçmişi olarak değiştirin:

    

11. Arama Geçmişi ekranını oluşturun. Araç Kutusu'ndan bir tablo görünümü denetleyicisini tasarım yüzeyine sürükleyin:

    

12. Ardından, sahnenin en altındaki siyah çıtaya tıklayarak tablo görünümü denetleyicisini seçin. Özellikler Bölmesi'nde tablo görünümü denetleyicisinin sınıfını olarak değiştirin ve Enter tuşuna CallHistoryControllerbasın:

    

    iOS Tasarım Aracı, bu ekranın içerik görünümü hiyerarşisini yönetmek için adlı CallHistoryController özel bir yedekleme sınıfı oluşturur. CallHistoryController.cs dosyası Çözüm Bölmesi'nde görünür:

    

13. CallHistoryController.cs dosyasına çift tıklayarak açın ve içeriğini aşağıdaki kodla değiştirin:

    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;
                }
            }
        }
    }
    

    Hata olmadığından emin olmak için uygulamayı (⌘ + s) kaydedin ve derleyin (⌘ + b).

14. Telefon word sahnesi ile Arama Geçmişi sahnesi arasında bir segue (geçiş) oluşturun. Telefon word sahnesinde Arama Geçmişi Düğmesi'niseçin ve Düğme'den Arama Geçmişi görünümüne Ctrl tuşunu basılı tutarak sürükleyin:

    

    Eylem Segue açılır menüsünden Göster'i seçin

    iOS Tasarım Aracı iki sahne arasına bir Segue ekler:

    

15. Sahnenin alt kısmındaki siyah çubuğu seçip Görünüm denetleyicisi Başlığını Özellikler Bölmesi'nde Arama Geçmişi olarak değiştirerek tablo görünümü denetleyicisine başlık ekleyin:

    

16. Uygulama çalıştırıldığında, Arama Geçmişi Düğmesi Arama Geçmişi ekranını açar, ancak telefon numaralarını izlemek ve görüntülemek için kod olmadığından tablo görünümü boş olur.

    Bu uygulama, telefon numaralarını dize listesi olarak depolar.

    ViewController'ın en üstüne için System.Collections.Generic bir using yönerge ekleyin:

    using System.Collections.Generic;
    

17. sınıfını ViewController aşağıdaki kodla değiştirin:

    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;
          }
        }
      }
    }
    

    Burada birkaç şey oluyor:

    • değişkeni translatedNumber yönteminden ViewDidLoad sınıf düzeyinde bir değişkene taşındı.
    • CallButton kodu, aranarak PhoneNumbers.Add(translatedNumber)telefon numaraları listesine çevrilen numaralar eklemek için değiştirildi.
    • PrepareForSegue yöntemi eklendi.

    Hata olmadığından emin olmak için uygulamayı kaydedin ve oluşturun.

18. Uygulamayı iOS Simülatörü içinde başlatmak için Başlat düğmesine basın:

    

İlk çok ekranlı Xamarin.iOS uygulamanızı tamamladığım için tebrikler!

Windows'ta izlenecek yol

Bu izlenecek yol, Telefon word uygulamamıza bir Arama Geçmişi ekranı ekler.

1. Visual Studio'da Telefon word uygulamasını açın. iOS Tasarım Aracı ve iOS simülatörünü kullanmak için Mac'e bağlanmanın gerekli olduğunu hatırlayın.

2. Kullanıcı arabirimini düzenleyerek başlayın. Çözüm Gezgini Main.storyboard dosyasını açın ve Farklı Görüntüle'nin i Telefon 6 olarak ayarlandığından emin olun:

   

3. Araç Kutusu'ndan bir gezinti denetleyicisinitasarım yüzeyine sürükleyin:

   

4. Uygulamanın başlangıç noktasını değiştirmek için Kaynaksız Segue'yi (Telefon word sahnesinin solundaki gri ok) Telefon word sahnesinden gezinti denetleyicisine sürükleyin:

   

5. Siyah çubuk üzerine tıklayarak Kök görünüm denetleyicisini seçin ve tasarım yüzeyinden kaldırmak için Delete tuşuna basın. Ardından Telefon word sahnesini gezinti denetleyicisinin yanına taşıyın:

   

6. ViewController'i gezinti denetleyicisinin kök görünüm denetleyicisi olarak ayarlayın. Ctrl tuşuna basın ve Gezinti Denetleyicisi'nin içine tıklayın. Mavi bir çizgi görünmelidir. Ardından, Ctrl tuşunu basılı tutarak Gezinti Denetleyicisi'nden Telefon word görünümüne sürükleyin ve bırakın. Buna Ctrl tuşunu basılı tutarak sürükleme adı verilir:

   

7. Açılır menüden ilişkiyi Kök olarak ayarlayın:

   

   ViewController artık gezinti denetleyicimizin Kök görünüm denetleyicisidir.

8. Telefon word ekranının Başlık çubuğuna çift tıklayın ve Başlık'ıTelefon word olarak değiştirin:

   

9. Araç Kutusu'ndanbir Düğmeyi sürükleyin ve Arama Düğmesi'nin altına yerleştirin. Yeni Düğmeyi Arama Düğmesi ile aynı genişlikte yapmak için tutamaçları sürükleyin:

   

10. Özellikler Gezgini'nde DüğmeninCallHistoryButtonAdını olarak değiştirin ve Başlığı Arama Geçmişi olarak değiştirin:

    

11. Arama Geçmişi ekranını oluşturun. Araç Kutusu'ndan bir tablo görünümü denetleyicisini tasarım yüzeyine sürükleyin:

    

12. Sahnenin alt kısmındaki siyah çıtaya tıklayarak tablo görünümü denetleyicisini seçin. Özellikler Gezgini'nde tablo görünümü denetleyicisinin sınıfını olarak değiştirin ve Enter tuşuna CallHistoryControllerbasın:

    

    iOS Tasarım Aracı, bu ekranın içerik görünümü hiyerarşisini yönetmek için adlı CallHistoryController özel bir yedekleme sınıfı oluşturur. CallHistoryController.cs dosyası Çözüm Gezgini görünür:

    

13. CallHistoryController.cs dosyasına çift tıklayarak açın ve içeriğini aşağıdaki kodla değiştirin:

    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;
                }
            }
        }
    }
    

    Hata olmadığından emin olmak için uygulamayı kaydedin ve derleyin. Şimdilik derleme uyarılarını yoksaymak sorun değil.

14. Telefon word sahnesi ile Arama Geçmişi sahnesi arasında bir segue (geçiş) oluşturun. Telefon word sahnesinde Arama Geçmişi Düğmesi'ni seçin ve Düğme'denArama Geçmişi görünümüne Ctrl tuşunu basılı tutarak sürükleyin:

    

    Eylem Segue açılır menüsünde Göster'i seçin:

    

    iOS Tasarım Aracı iki sahne arasına bir segue ekler:

    

15. Sahnenin alt kısmındaki siyah çubuğu seçerek ve Görünüm denetleyicisi Başlığını Özellikler Gezgini'nde Arama Geçmişi olarak değiştirerek tablo görünümü denetleyicisine >başlık ekleyin:

    

16. Uygulama çalıştırıldığında, Arama Geçmişi Düğmesi Arama Geçmişi ekranını açar, ancak telefon numaralarını izlemek ve görüntülemek için kod olmadığından tablo görünümü boş olur.

    Bu uygulama, telefon numaralarını dize listesi olarak depolar.

    ViewController'ın en üstüne için System.Collections.Generic bir using yönerge ekleyin:

    using System.Collections.Generic;
    

17. sınıfını ViewController aşağıdaki kodla değiştirin:

    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;
          }
        }
      }
    }
    

    Burada birkaç şey oluyor

    • değişkeni translatedNumber yönteminden ViewDidLoad sınıf düzeyinde bir değişkene taşındı.
    • CallButton kodu, aranarak telefon numaraları listesine arayarak arama numaraları eklemek için değiştirildiPhoneNumbers.Add(translatedNumber)
    • PrepareForSegue yöntemi eklendi

    Hata olmadığından emin olmak için uygulamayı kaydedin ve oluşturun.

    Hata olmadığından emin olmak için uygulamayı kaydedin ve oluşturun.

18. Uygulamamızı iOS Simülatörü içinde başlatmak için Başlat düğmesine basın:

    

İlk çok ekranlı Xamarin.iOS uygulamanızı tamamladığım için tebrikler!

Uygulama artık hem görsel taslak segue'lerini hem de koddaki gezintiyi işleyebilir. Şimdi Hello, iOS Multiscreen Deep Dive'da öğrendiğimiz araçları ve becerileri incelemenin zamanı geldi.

İlişkili Bağlantılar

• iOS İnsan Arabirimi Yönergeleri