Share via

Hello, iOS Multiscreen — szczegółowe omówienie

  • Artykuł

Ostrzeżenie

Projektant systemu iOS zostały wycofane w programie Visual Studio 2019 w wersji 16.8 i Visual Studio 2019 dla komputerów Mac w wersji 8.8 i usunięte w programie Visual Studio 2019 w wersji 16.9 i Visual Studio dla komputerów Mac w wersji 8.9. Zalecanym sposobem kompilowania interfejsów użytkownika systemu iOS jest bezpośrednie na komputerze Mac z uruchomionym narzędziem Xcode Interface Builder. Aby uzyskać więcej informacji, zobacz Projektowanie interfejsów użytkownika za pomocą programu Xcode.

W przewodniku Szybki start utworzyliśmy i uruchomiliśmy pierwszą wieloekranową aplikację platformy Xamarin.iOS. Teraz nadszedł czas, aby lepiej zrozumieć nawigację i architekturę systemu iOS.

W tym przewodniku przedstawiono wzorzec model, widok, kontroler (MVC) i jego rolę w architekturze i nawigacji systemu iOS. Następnie zapoznamy się z kontrolerem nawigacji i nauczymy się go używać w celu zapewnienia znanego środowiska nawigacji w systemie iOS.

Model-View-Controller (MVC)

W samouczku Hello, iOS dowiedzieliśmy się, że aplikacje systemu iOS mają tylko jedno okno , które wyświetla kontrolery są odpowiedzialne za ładowanie hierarchii widoku zawartości do okna. W drugim przewodniku Telefon word dodaliśmy drugi ekran do naszej aplikacji i przekazaliśmy pewne dane — listę numerów telefonów — między dwoma ekranami, jak pokazano na poniższym diagramie:

Na tym diagramie przedstawiono przekazywanie danych między dwoma ekranami

W naszym przykładzie dane zostały zebrane na pierwszym ekranie, przekazane z pierwszego kontrolera widoku do drugiego i wyświetlane przez drugi ekran. Ta separacja ekranów, kontrolerów widoków i danych jest zgodna ze wzorcem Model, View, Controller (MVC). W kilku następnych sekcjach omówiono zalety wzorca, jego składników i sposób jej używania w naszej aplikacji Telefon word.

Zalety wzorca MVC

Model-View-Controller to wzorzec projektowy — rozwiązanie architektury wielokrotnego użytku do typowego problemu lub przypadku użycia w kodzie. MVC to architektura aplikacji z graficznym interfejsem użytkownika (GUI). Przypisuje obiekty w aplikacji jedną z trzech ról — Model (dane lub logika aplikacji), Widok (interfejs użytkownika) i Kontroler (kod za nim). Na poniższym diagramie przedstawiono relacje między trzema elementami wzorca MVC a użytkownikiem:

Ten diagram ilustruje relacje między trzema elementami wzorca MVC a użytkownikiem

Wzorzec MVC jest przydatny, ponieważ zapewnia logiczne rozdzielenie między różnymi częściami aplikacji graficznego interfejsu użytkownika i ułatwia ponowne używanie kodu i widoków. Przyjrzyjmy się dokładniej każdej z trzech ról.

Uwaga

Wzorzec MVC jest luźno analogiczny do struktury stron ASP.NET lub aplikacji WPF. W tych przykładach widok jest składnikiem, który jest w rzeczywistości odpowiedzialny za opisywanie interfejsu użytkownika i odpowiada stronie ASPX (HTML) w ASP.NET lub XAML w aplikacji WPF. Kontroler jest składnikiem odpowiedzialnym za zarządzanie widokiem, który odpowiada kodowi w ASP.NET lub WPF.

Model

Obiekt Model to zazwyczaj specyficzna dla aplikacji reprezentacja danych, które mają być wyświetlane lub wprowadzane do widoku. Model jest często luźno zdefiniowany — na przykład w naszej aplikacji Telefon word_iOS lista numerów telefonów (reprezentowana jako lista ciągów) jest modelem. Jeśli tworzysz aplikację międzyplatformową, możemy zdecydować się na udostępnienie kodu Telefon wordTranslator między aplikacjami systemu iOS i Android. Możemy również myśleć o tym udostępnionym kodzie, jak również modelu.

MVC jest całkowicie niezależny od trwałości danych i dostępu do modelu. Innymi słowy, MVC nie dba o to, jak wyglądają nasze dane lub jak są przechowywane, tylko w jaki sposób są reprezentowane dane. Na przykład możemy zdecydować się na przechowywanie danych w bazie danych SQL lub utrwalanie ich w mechanizmie magazynu w chmurze lub po prostu użyć elementu List<string>. W celach MVC tylko sama reprezentacja danych jest uwzględniona we wzorcu.

W niektórych przypadkach część modelu wzorca MVC może być pusta. Na przykład możemy dodać kilka statycznych stron do naszej aplikacji, wyjaśniając, jak działa translator telefonu, dlaczego ją skompilowaliśmy i jak skontaktować się z nami w celu zgłaszania usterek. Te ekrany aplikacji nadal będą tworzone przy użyciu widoków i kontrolerów, ale nie będą miały żadnych rzeczywistych danych modelu.

Uwaga

W niektórych literaturze część modelu wzorca MVC może odwoływać się do całego zaplecza aplikacji, a nie tylko danych wyświetlanych w interfejsie użytkownika. W tym przewodniku używamy nowoczesnej interpretacji modelu, ale rozróżnienie nie jest szczególnie ważne.

Widok

Widok to składnik odpowiedzialny za renderowanie interfejsu użytkownika. W prawie wszystkich platformach korzystających ze wzorca MVC interfejs użytkownika składa się z hierarchii widoków. Widok w mvC można traktować jako hierarchię widoków z jednym widokiem — znanym jako widok główny — w górnej części hierarchii i dowolną liczbą widoków podrzędnych (nazywanych widokami podrzędnymi lub podrzędnymi). W systemie iOS hierarchia widoku zawartości ekranu odpowiada składnikowi View w mvC.

Kontroler

Obiekt Kontroler jest składnikiem, który łączy wszystkie elementy razem i jest reprezentowany w systemie iOS przez UIViewController. Kontroler może traktować jako kod zapasowy ekranu lub zestawu widoków. Kontroler jest odpowiedzialny za nasłuchiwanie żądań od użytkownika i zwracanie odpowiedniej hierarchii widoków. Nasłuchuje żądań z widoku (kliknięcie przycisku, wprowadzanie tekstu itp.) i wykonuje odpowiednie przetwarzanie, Wyświetlanie modyfikacji i ponowne ładowanie widoku. Kontroler jest również odpowiedzialny za tworzenie lub pobieranie modelu z dowolnego magazynu danych zapasowego w aplikacji i wypełnianie widoku danymi.

Kontrolery mogą również zarządzać innymi kontrolerami. Na przykład jeden kontroler może załadować inny kontroler, jeśli musi wyświetlić inny ekran lub zarządzać stosem kontrolerów, aby monitorować ich kolejność i przejścia między nimi. W następnej sekcji zobaczymy przykład kontrolera, który zarządza innymi kontrolerami, wprowadzając specjalny typ kontrolera widoku systemu iOS nazywany kontrolerem nawigacji.

W aplikacji Telefon word użyliśmy kontrolera nawigacji, aby ułatwić zarządzanie nawigacją między wieloma ekranami. Kontroler nawigacji jest wyspecjalizowanym UIViewController elementem reprezentowanym przez klasę UINavigationController . Zamiast zarządzać pojedynczą hierarchią widoku zawartości, kontroler nawigacji zarządza innymi kontrolerami widoków, a także własną specjalną hierarchią widoku zawartości w formie paska narzędzi nawigacji, który zawiera tytuł, przycisk Wstecz i inne funkcje opcjonalne.

Kontroler nawigacji jest typowy w aplikacjach systemu iOS i zapewnia nawigację dla podstawowych aplikacji systemu iOS, takich jak aplikacja Ustawienia, jak pokazano na poniższym zrzucie ekranu:

Kontroler nawigacji zapewnia nawigację dla aplikacji systemu iOS, takich jak aplikacja Ustawienia pokazana tutaj

Kontroler nawigacji obsługuje trzy podstawowe funkcje:

  • Zapewnia haki do nawigacji do przodu — kontroler nawigacji używa metafory nawigacji hierarchicznej, w której hierarchie widoku zawartości są wypychane do stosu nawigacji. Stos nawigacyjny można traktować jako stos kart odtwarzania, w którym widoczna jest tylko górna większość kart, jak pokazano na poniższym diagramie:

    Ten diagram ilustruje nawigację jako stos kart

  • Opcjonalnie udostępnia przycisk Wstecz — gdy wypychamy nowy element do stosu nawigacji, pasek tytułu może automatycznie wyświetlać przycisk Wstecz, który umożliwia użytkownikowi przechodzenie do tyłu. Naciśnięcie przycisku Wstecz powoduje wyłączenie bieżącego kontrolera widoku ze stosu nawigacji i załadowanie poprzedniej hierarchii widoku zawartości do okna:

    Ten diagram ilustruje wyświetlanie karty poza stosem

  • Zawiera pasek tytułu — górna część kontrolera nawigacji jest nazywana paskiem tytułu . Jest on odpowiedzialny za wyświetlanie tytułu kontrolera widoku, jak pokazano na poniższym diagramie:

    Pasek tytułu jest odpowiedzialny za wyświetlanie tytułu kontrolera widoku

Kontroler widoku głównego

Kontroler nawigacji nie zarządza hierarchią widoku zawartości, dlatego nie ma niczego do wyświetlenia samodzielnie. Zamiast tego kontroler nawigacji jest sparowany z kontrolerem widoku głównego:

Kontroler nawigacji jest sparowany z kontrolerem widoku głównego

Kontroler widoku głównego reprezentuje pierwszy kontroler widoku w stosie kontrolera nawigacji, a hierarchia Widok zawartości kontrolera głównego jest pierwszą hierarchią widoku zawartości, która ma zostać załadowana do okna. Jeśli chcemy umieścić całą aplikację na stosie kontrolera nawigacji, możemy przenieść sourceless Segue do kontrolera nawigacji i ustawić kontroler widoku pierwszego ekranu jako kontroler widoku głównego, tak jak w aplikacji Telefon word:

Tryb segue bez źródła ustawia kontroler widoku pierwszego ekranu jako kontroler widoku głównego

Dodatkowe opcje nawigacji

Kontroler nawigacji jest typowym sposobem obsługi nawigacji w systemie iOS, ale nie jest jedyną opcją. Na przykład kontroler paska kart może podzielić aplikację na różne obszary funkcjonalne, a kontroler widoku podzielonego może służyć do tworzenia widoków wzorca/szczegółów. Łączenie kontrolerów nawigacji z tymi innymi paradygmatami nawigacji umożliwia korzystanie z wielu elastycznych sposobów prezentowania i nawigowania po zawartości w systemie iOS.

Obsługa przejść

W przewodniku Telefon word obsłużyliśmy przejście między dwoma kontrolerami widoku na dwa różne sposoby — najpierw z scenorysem Segue, a następnie programowo. Przyjrzyjmy się dokładniej obu tym opcjom.

PrepareForSegue

Po dodaniu akcji Segue z akcją Pokaż do scenorysu nakazujemy systemowi iOS wypchnięcie drugiego kontrolera widoku do stosu kontrolera nawigacji:

Ustawianie typu segue z listy rozwijanej

Dodanie segue do scenorysu wystarczy, aby utworzyć proste przejście między ekranami. Jeśli chcemy przekazywać dane między kontrolerami widoku, musimy zastąpić metodę PrepareForSegue i obsłużyć same dane:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);
    ...
}

Wywołania PrepareForSegue systemu iOS bezpośrednio przed przejściem i przekazuje segue utworzone w scenorysie do metody . W tym momencie musimy ręcznie ustawić kontroler widoku docelowego Segue. Poniższy kod pobiera do kontrolera widoku docelowego dojście i rzutuje go do odpowiedniej klasy — CallHistoryController, w tym przypadku:

CallHistoryController callHistoryController = segue.DestinationViewController as CallHistoryController;

Na koniec przekazujemy listę numerów telefonów (model) z ViewController do CallHistoryController obiektu , ustawiając PhoneHistory właściwość CallHistoryController na listę numerów telefonów wybranych:

callHistoryController.PhoneNumbers = PhoneNumbers;

Kompletny kod przekazywania danych przy użyciu programu Segue jest następujący:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    var callHistoryController = segue.DestinationViewController as CallHistoryController;

    if (callHistoryController != null) {
         callHistoryController.PhoneNumbers = PhoneNumbers;
    }
 }

Przejście z pierwszego kontrolera widoku do drugiego w kodzie jest tym samym procesem co w przypadku programu Segue, ale należy wykonać kilka kroków ręcznie. Najpierw użyjemy this.NavigationController polecenia , aby uzyskać odwołanie do kontrolera nawigacji, którego stos obecnie używamy. Następnie użyjemy metody kontrolera PushViewController nawigacji, aby ręcznie wypchnąć następny kontroler widoku do stosu, przekazując kontroler widoku i opcję animowania przejścia (ustawiliśmy to na truewartość ).

Poniższy kod obsługuje przejście z ekranu Telefon word do ekranu Historia wywołań:

this.NavigationController.PushViewController (callHistory, true);

Zanim przejdziemy do następnego kontrolera widoku, musimy utworzyć wystąpienie ręcznie z poziomu scenorysu przez wywołanie this.Storyboard.InstantiateViewController i przekazanie identyfikatora scenorysu elementu CallHistoryController:

CallHistoryController callHistory =
this.Storyboard.InstantiateViewController
("CallHistoryController") as CallHistoryController;

Na koniec przekazujemy listę numerów telefonów (model) z ViewController do CallHistoryController , ustawiając PhoneHistory właściwość CallHistoryController na listę numerów telefonów wybranych, podobnie jak w przypadku przejścia z segue:

callHistory.PhoneNumbers = PhoneNumbers;

Kompletny kod przejścia programowego jest następujący:

CallHistoryButton.TouchUpInside += (object sender, EventArgs e) => {
    // Launches a new instance of CallHistoryController
    CallHistoryController callHistory = this.Storyboard.InstantiateViewController ("CallHistoryController") as CallHistoryController;
    if (callHistory != null) {
     callHistory.PhoneNumbers = PhoneNumbers;
     this.NavigationController.PushViewController (callHistory, true);
    }
};

Dodatkowe pojęcia wprowadzone w Telefon word

Aplikacja Telefon word wprowadziła kilka pojęć, które nie zostały omówione w tym przewodniku. Te pojęcia obejmują:

  • Automatyczne tworzenie kontrolerów widoku — po wprowadzeniu nazwy klasy dla kontrolera widoku w okienku właściwości projektant systemu iOS sprawdza, czy ta klasa istnieje, a następnie generuje dla nas klasę kopii zapasowej kontrolera widoku. Aby uzyskać więcej informacji na temat tych i innych funkcji projektanta systemu iOS, zapoznaj się z przewodnikiem Wprowadzenie do Projektant systemu iOS.
  • Kontroler widoku tabeli — CallHistoryController jest kontrolerem widoku tabeli. Kontroler widoku tabeli zawiera widok tabeli, najbardziej typowe narzędzie do wyświetlania układu i danych w systemie iOS. Tabele wykraczają poza zakres tego przewodnika. Aby uzyskać więcej informacji na temat kontrolerów widoku tabeli, zapoznaj się z przewodnikiem Praca z tabelami i komórkami .
  • Identyfikator scenorysu — ustawienie identyfikatora scenorysu powoduje utworzenie klasy kontrolera widoku zawierającego Objective-C kod dla kontrolera widoku w scenorysie. Użyjemy identyfikatora scenorysu, aby znaleźć klasę Objective-C i utworzyć wystąpienie kontrolera widoku w scenorysie. Aby uzyskać więcej informacji na temat identyfikatorów scenorysów, zapoznaj się z przewodnikiem Wprowadzenie do scenorysów .

Podsumowanie

Gratulacje, udało Ci się ukończyć pierwszą wieloekranową aplikację dla systemu iOS!

W tym przewodniku wprowadziliśmy wzorzec MVC i użyliśmy go do utworzenia aplikacji wieloekranowej. Zapoznaliśmy się również z kontrolerami nawigacji i ich rolą w zakresie zasilania nawigacji systemu iOS. Masz teraz solidną podstawę, którą musisz rozpocząć tworzenie własnych aplikacji platformy Xamarin.iOS.

Następnie dowiesz się, jak tworzyć aplikacje międzyplatformowe za pomocą platformy Xamarin, korzystając z przewodników Wprowadzenie do tworzenia aplikacji mobilnych i tworzenia aplikacji międzyplatformowych .