Hello, iOS Multiscreen – Rychlý start

Článek
03/05/2024

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. Stáhněte si dokončenou verzi aplikace Telefon word z ukázky Hello, iOS.

Návod v systému macOS

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

Otevřete aplikaci Telefon word v Visual Studio pro Mac. V případě potřeby je možné dokončenou Telefon word aplikaci z příručky Hello, návod pro iOS stáhnout odtud.
Otevřete soubor Main.storyboard z panelu řešení:
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!):
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:
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:
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:
V automaticky otevírané nabídce nastavte relaci na Root:

ViewController je teď kontroler kořenového zobrazení navigačního kontroleru:
Poklikejte na záhlaví obrazovkyTelefon word a změňte název na Telefon word:
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í:
Na panelu Vlastnosti změňte název tlačítka na CallHistoryButton a změňte název na Historii volání:
Vytvořte obrazovku Historie hovorů. Z panelu nástrojů přetáhněte kontroler zobrazení tabulky na návrhovou plochu:
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í:

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.

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:
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í:
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;
```

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.

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í.

Otevřete aplikaci Telefon word v sadě Visual Studio. V případě potřeby stáhněte dokončenou Telefon word aplikaci z příručky Hello, iOS návodu. Vzpomeňte si, že je nutné se připojit k Macu , aby bylo možné používat simulátor iOS Designeru a iOS.
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:
Přetáhněte navigační kontroler ze sady nástrojů na návrhovou plochu:
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:
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:
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:
V automaticky otevírané nabídce nastavte relaci na Root:

ViewController je nyní řadič kořenového zobrazení našeho navigačního kontroleru.
Poklikejte na záhlaví obrazovkyTelefon word a změňte název na Telefon word:
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í:
V Průzkumníku vlastností změňte název tlačítka na CallHistoryButton a změňte název na historii volání:
Vytvořte obrazovku Historie hovorů. Z panelu nástrojů přetáhněte kontroler zobrazení tabulky na návrhovou plochu:
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í:

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í.

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:
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í:
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;
```

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.

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.

Hello, iOS Multiscreen – Rychlý start

Požadavky

Návod v systému macOS

Návod ve Windows

Související odkazy

Další materiály