Hello, iOS Multiscreen – Rychlý start

Upozorňující

Návrhář pro iOS byl v sadě Visual Studio 2019 verze 16.8 a Visual Studio 2019 pro Mac verze 8.8 zastaralý a odebrán v sadě Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Doporučený způsob, jak vytvářet uživatelská rozhraní pro iOS, je přímo na Macu, na kterém běží Tvůrce rozhraní Xcode. Další informace naleznete v tématu Navrhování uživatelských rozhraní pomocí Xcode.

Tato část návodu přidá druhou obrazovku do aplikace Telefon word, která zobrazuje historii telefonních čísel, která byla volána v aplikaci. Konečná aplikace bude mít druhou obrazovku, která zobrazí historii volání, jak je znázorněno na následujícím snímku obrazovky:

Doprovodné podrobné informace se podíváme na aplikaci, která je sestavená a diskutuje o architektuře, navigaci a dalších nových konceptech iOSu, se kterými se setkáme.

Požadavky

Tato příručka pokračuje tam, kde skončil dokument Hello, iOS a vyžaduje dokončení rychlého startu Hello, iOS.

Návod v systému macOS

Tento názorný postup přidá do naší aplikace Telefon word obrazovku Historie volání.

1. Otevřete aplikaci Telefon word v Visual Studio pro Mac.

2. Otevřete soubor Main.storyboard z panelu řešení:

   

3. Přetáhněte navigační ovladač ze sady nástrojů na návrhovou plochu (možná budete muset oddálit, aby se všechny tyto prvky vešly na návrhovou plochu!):

   

4. Přetáhněte bez zdrojové šipek (která je šedá šipka vlevo od kontroleru s jedním zobrazením) na navigační kontroler a změňte výchozí bod aplikace:

   

5. Kliknutím na dolní panel vyberte existující řadič kořenového zobrazení a stisknutím klávesy Delete ho odeberte z návrhové plochy. Potom přesuňte scénu Telefon word vedle navigačního kontroleru:

   

6. Nastavte ViewController jako řadič kořenového zobrazení navigačního kontroleru. Stiskněte klávesu Ctrl a klikněte do navigačního ovladače. Měla by se zobrazit modrá čára. Potom podržte stisknutou klávesu Ctrl a přetáhněte z navigačního ovladače na scénu Telefon word a uvolněte ji. Říká se tomu přetahování ctrl:

   

7. V automaticky otevírané nabídce nastavte relaci na Root:

   

   ViewController je teď kontroler kořenového zobrazení navigačního kontroleru:

   

8. Poklikejte na záhlaví obrazovkyTelefon word a změňte název na Telefon word:

   

9. Přetáhněte tlačítko ze sady nástrojů a umístěte ho pod tlačítko Hovoru. Přetažením úchytů nastavíte nové tlačítko na stejnou šířku jako tlačítko Volání:

   

10. Na panelu Vlastnosti změňte název tlačítka na CallHistoryButton a změňte název na Historii volání:

    

11. Vytvořte obrazovku Historie hovorů. Z panelu nástrojů přetáhněte kontroler zobrazení tabulky na návrhovou plochu:

    

12. Potom vyberte kontroler zobrazení tabulky kliknutím na černý pruh v dolní části scény. Na panelu Vlastností změňte třídu kontroleru zobrazení tabulky na CallHistoryController a stiskněte Enter:

    

    IOS Designer vygeneruje vlastní třídu backingu volanou CallHistoryController pro správu hierarchie zobrazení obsahu této obrazovky. Soubor CallHistoryController.cs se zobrazí v oblasti řešení:

    

13. Poklikáním otevřete soubor CallHistoryController.cs a nahraďte jeho obsah následujícím kódem:

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

    Uložte aplikaci (⌘ + s) a sestavte ji (⌘ + b), abyste zajistili, že nedojde k žádným chybám.

14. Vytvořtegue (přechod) mezi scénou Telefon word a scénou Historie volání. Ve scéně Telefon word vyberte tlačítko Historie volání a podržte stisknutou klávesu Ctrl z tlačítka na scénu Historie volání:

    

    V místní nabídce Akce Segue vyberte Zobrazit.

    V iOS Designeru se mezi těmito dvěma scénami přidá segue:

    

15. Přidejte do kontroleru zobrazení tabulky název tak, že v dolní části scény vyberete černý pruh a změníte název kontroleru zobrazení na Historii volání v oblasti Vlastností:

    

16. Když se aplikace spustí, tlačítko Historie volání otevře obrazovku Historie volání, ale zobrazení tabulky bude prázdné, protože neexistuje žádný kód pro sledování a zobrazení telefonních čísel.

    Tato aplikace uloží telefonní čísla jako seznam řetězců.

    Přidejte direktivu using pro System.Collections.Generic horní část ViewControlleru:

    using System.Collections.Generic;
    

17. ViewController Upravte třídu následujícím kódem:

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

    Tady se děje několik věcí:

    • Proměnná translatedNumber přesunutá z ViewDidLoad metody do proměnné na úrovni třídy.
    • Kód CallButton byl upraven tak, aby se čísla vytočit do seznamu telefonních čísel voláním PhoneNumbers.Add(translatedNumber).
    • Byla přidána PrepareForSegue metoda.

    Uložte a sestavte aplikaci, abyste měli jistotu, že nedošlo k žádným chybám.

18. Stisknutím tlačítka Start spusťte aplikaci v simulátoru iOS:

    

Blahopřejeme k dokončení první víceobrazovkové aplikace Xamarin.iOS!

Návod ve Windows

Tento názorný postup přidá do naší aplikace Telefon word obrazovku Historie volání.

1. Otevřete aplikaci Telefon word v sadě Visual Studio. Vzpomeňte si, že je nutné se připojit k Macu , aby bylo možné používat simulátor iOS Designeru a iOS.

2. Začněte úpravou uživatelského rozhraní. Otevřete soubor Main.storyboard z Průzkumník řešení a ujistěte se, že zobrazení jako je nastavené na i Telefon 6:

   

3. Přetáhněte navigační kontroler ze sady nástrojů na návrhovou plochu:

   

4. Přetáhněte ze scény Telefon Telefon word ze scény Telefon word do navigačního kontroleru šedou šipku (je to šedá šipka) a změňte tak výchozí bod aplikace:

   

5. Vyberte řadič kořenového zobrazení kliknutím na černý pruh a stisknutím klávesy Delete ho odeberte z návrhové plochy. Potom přesuňte scénu Telefon word vedle navigačního kontroleru:

   

6. Nastavte ViewController jako řadič kořenového zobrazení navigačního kontroleru. Stiskněte klávesu Ctrl a klikněte do navigačního kontroleru. Měla by se zobrazit modrá čára. Potom podržte stisknutou klávesu Ctrl a přetáhněte z navigačního ovladače na scénu Telefon word a uvolněte ji. Říká se tomu přetahování ctrl:

   

7. V automaticky otevírané nabídce nastavte relaci na Root:

   

   ViewController je nyní řadič kořenového zobrazení našeho navigačního kontroleru.

8. Poklikejte na záhlaví obrazovkyTelefon word a změňte název na Telefon word:

   

9. Přetáhněte tlačítko ze sady nástrojů a umístěte ho pod tlačítko Hovoru. Přetažením úchytů nastavíte nové tlačítko na stejnou šířku jako tlačítko Volání:

   

10. V Průzkumníku vlastností změňte název tlačítka na CallHistoryButton a změňte název na historii volání:

    

11. Vytvořte obrazovku Historie hovorů. Z panelu nástrojů přetáhněte kontroler zobrazení tabulky na návrhovou plochu:

    

12. Vyberte kontroler zobrazení tabulky kliknutím na černý pruh v dolní části scény. V Průzkumníku vlastností změňte třídu kontroleru zobrazení tabulky na CallHistoryController a stiskněte Enter:

    

    IOS Designer vygeneruje vlastní třídu backingu volanou CallHistoryController pro správu hierarchie zobrazení obsahu této obrazovky. Soubor CallHistoryController.cs se zobrazí v Průzkumník řešení:

    

13. Poklikáním otevřete soubor CallHistoryController.cs a nahraďte jeho obsah následujícím kódem:

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

    Uložte aplikaci a sestavte ji, abyste měli jistotu, že nedošlo k žádným chybám. Prozatím můžete ignorovat všechna upozornění sestavení.

14. Vytvořtegue (přechod) mezi scénou Telefon word a scénou Historie volání. Ve scéně Telefon word vyberte tlačítko Historie volání a podržte stisknutou klávesuCtrl z tlačítka na scénu Historie volání:

    

    V místní nabídce Akce Segue vyberte Zobrazit:

    

    V iOS Designeru se mezi těmito dvěma scénami přidágue:

    

15. Přidejte do kontroleru zobrazení tabulky název výběrem černého pruhu v dolní části scény a změnou názvu kontroleru > zobrazení na historii volání v Průzkumníku vlastností:

    

16. Když se aplikace spustí, tlačítko Historie volání otevře obrazovku Historie volání, ale zobrazení tabulky bude prázdné, protože neexistuje žádný kód pro sledování a zobrazení telefonních čísel.

    Tato aplikace uloží telefonní čísla jako seznam řetězců.

    Přidejte direktivu using pro System.Collections.Generic horní část ViewControlleru:

    using System.Collections.Generic;
    

17. ViewController Upravte třídu následujícím kódem:

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

    Tady se děje několik věcí.

    • Proměnná translatedNumber byla přesunuta z ViewDidLoad metody do proměnné na úrovni třídy.
    • Kód CallButton byl upraven tak, aby se čísla vytočit do seznamu telefonních čísel volánímPhoneNumbers.Add(translatedNumber)
    • Metoda PrepareForSegue byla přidána.

    Uložte a sestavte aplikaci, abyste měli jistotu, že nedošlo k žádným chybám.

    Uložte a sestavte aplikaci, abyste měli jistotu, že nedošlo k žádným chybám.

18. Stisknutím tlačítka Start spusťte naši aplikaci v simulátoru iOS:

    

Blahopřejeme k dokončení první víceobrazovkové aplikace Xamarin.iOS!

Aplikace teď dokáže zpracovat navigaci pomocí scénářů segues i v kódu. Teď je čas rozeseknout nástroje a dovednosti, které jsme se právě naučili v prostředí Hello, iOS MultiScreen Deep Dive.

Související odkazy

• Pokyny pro lidské rozhraní pro iOS