Hello, iOS Multiscreen – Rychlý start

Upozornění

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

Tato část návodu přidá druhou obrazovku do aplikace Phoneword, 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:

The final application will have a second screen that displays the call history, as illustrated by this screenshot

Doprovodné podrobné informace si prohlédnou 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. Stáhněte si dokončenou verzi aplikace Phoneword z ukázky Hello, iOS.

Návod k macOS

Tento názorný postup přidá do aplikace Phoneword obrazovku Historie hovorů.

  1. Otevřete aplikaci Phoneword v Visual Studio pro Mac. V případě potřeby můžete dokončenou aplikaci Phoneword z příručky Hello, návod k iOSustáhnout odtud.

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

    The Main.storyboard in the iOS Designer

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

    Drag a navigation controller from the Toolbox onto the design surface

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

    Drag the Sourceless Segue to the navigation controller to change the starting point of the application

  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. Pak přesuňte scénu Phoneword vedle navigačního ovladače:

    Move the Phoneword scene next to the navigation controller

  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 Phoneword a uvolněte ji. Toto se nazývá ctrl-dragging:

    Drag from the navigation controller to the Phoneword scene and release

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

    Setting the relationship to Root

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

    The ViewController is now the navigation controllers Root view controller

  8. Poklikejte na záhlaví obrazovkyPhoneword a změňte název na Phoneword:

    Change the Title to Phoneword

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

    Make the new Button the same width as the Call Button

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

    Change the Name of the Button to CallHistoryButton and change the Title to Call History

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

    Drag a table view controller onto the design surface

  12. V dalším kroku 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:

    Change the table view controllers class to CallHistoryController

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

    The CallHistoryController.cs file in the Solution Pad

  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ří segue (přechod) mezi scénou Phoneword a scénou Historie hovorů . Ve scéně Phoneword vyberte tlačítko Historie hovorů a stiskněte klávesu Ctrl z tlačítka na scénu Historie hovorů :

    Ctrl-drag from the Button to the Call History scene

    V automaticky otevírané nabídce Akce Segue vyberte Zobrazit.

    IOS Designer přidá mezi obě scény segue:

    The Segue between the two scenes

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

    Change the view controller title to Call History in the Properties Pad

  16. Když je aplikace spuštěná, tlačítko Historie hovorů otevře obrazovku Historie hovorů , ale zobrazení tabulky bude prázdné, protože neexistuje žádný kód pro sledování a zobrazení telefonních čísel.

    Tato aplikace bude ukládat 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 se přesunula z ViewDidLoad metody na proměnnou 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 PrepareForSegue přidána 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:

    Press the Start button to launch the application inside the iOS Simulator

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

Návod k Windows

Tento názorný postup přidá do aplikace Phoneword obrazovku Historie hovorů.

  1. Otevřete aplikaci Phoneword v Visual Studio. V případě potřeby si stáhněte dokončenou aplikaci Phoneword z návodu Hello, iOS . Vzpomeňte si, že je nutné se připojit k Macu , abyste mohli 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 je možnost Zobrazit jako nastavená na iPhone 6:

    The Main.storyboard in the iOS Designer

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

    Drag a navigation controller from the Toolbox onto the design surface

  4. Přetáhněte ze scény Phoneword (sourceless Segue) (to je šedá šipka vlevo od scény Phoneword) do navigačního ovladače a změňte výchozí bod aplikace:

    Drag the Sourceless Segue to the navigation controller to change the starting point of the application

  5. Vyberte kontroler kořenového zobrazení kliknutím na černý pruh a stisknutím klávesy Delete ho odeberte z návrhové plochy. Pak přesuňte scénu Phoneword vedle navigačního ovladače:

    Move the Phoneword scene next to the navigation controller

  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. Pak podržte stisknutou klávesu Ctrl a přetáhněte z navigačního ovladače na scénu Phoneword a uvolněte ji. Toto se nazývá ctrl-dragging:

    Drag from the navigation controller to the Phoneword scene and release

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

    Set the relationship to Root

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

  8. Poklikejte na záhlaví obrazovkyPhoneword a změňte název na Phoneword:

    Change the Title to Phoneword

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

    Make the new Button the same width as the Call Button

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

    Change the Name of the Button to CallHistoryButton and the Title to Call History

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

    Drag a table view controller onto the design surface

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

    Change the table view controllers class to CallHistoryController

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

    The CallHistoryController.cs file in the Solution Explorer

  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 je v pořádku ignorovat všechna upozornění sestavení.

  14. Vytvoří segue (přechod) mezi scénou Phoneword a scénou Historie hovorů . Ve scéně Phoneword vyberte tlačítko Historie hovorů a stiskněte klávesu Ctrl z tlačítka na scénu Historie hovorů :

    Ctrl-drag from the Button to the Call History scene

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

    Select Show as the segue type

    IOS Designer přidá mezi obě scény segue:

    The Segue between the two scenes

  15. Přidejte názevkontroleru zobrazení tabulky tak, že v Průzkumníku vlastností vyberete černý pruh v dolní části scény a změníte název kontroleru > zobrazení na historii volání:

    Change the view controller Title to Call History

  16. Když je aplikace spuštěná, tlačítko Historie hovorů otevře obrazovku Historie hovorů , ale zobrazení tabulky bude prázdné, protože neexistuje žádný kód pro sledování a zobrazení telefonních čísel.

    Tato aplikace bude ukládat 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 změněn tak, aby se čísla vytočit do seznamu telefonních čísel voláním PhoneNumbers.Add(translatedNumber)
    • Metoda byla přidána.PrepareForSegue

    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 aplikaci v simulátoru iOS:

    The first screen of the sample app

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

Aplikace teď může zpracovávat navigaci pomocí segues scénáře i kódu. Teď je čas rozeseknout nástroje a dovednosti, které jsme se právě naučili v hloubkovém podrobném sadě Hello, iOS s více obrazovkami.