Paski kart i kontrolery pasków kart w środowisku Xamarin.iOS

Aplikacje z kartami są używane w systemie iOS do obsługi interfejsów użytkownika, w których można uzyskać dostęp do wielu ekranów w określonej kolejności. UITabBarController Dzięki klasie aplikacje mogą łatwo uwzględniać obsługę takich scenariuszy wieloekranowych. UITabBarController Dba o zarządzanie wieloma ekranami, dzięki czemu deweloper aplikacji może skupić się na szczegółach każdego ekranu.

Zazwyczaj aplikacje z kartami są kompilowane z elementem UITabBarControllerRootViewController głównym okna. Jednak przy użyciu nieco dodatkowego kodu aplikacje z kartami mogą być również używane z kolei do innego ekranu początkowego, takiego jak scenariusz, w którym aplikacja po raz pierwszy przedstawia ekran logowania, a następnie interfejs z kartami.

Na tej stronie omówiono oba scenariusze: gdy karty znajdują się w katalogu głównym hierarchii widoku aplikacji, a także w scenariuszu,RootViewController który nie występuje.

Wprowadzenie do interfejsu użytkownikaTabBarController

Aplikacja UITabBarController obsługuje tworzenie aplikacji z kartami, wykonując następujące czynności:

• Zezwalanie na dodawanie do niego wielu kontrolerów.
• Udostępnianie interfejsu użytkownika z kartami za pośrednictwem UITabBar klasy, aby umożliwić użytkownikowi przełączanie się między kontrolerami i ich widokami.

Kontrolery są dodawane do UITabBarController właściwości za pośrednictwem jej ViewControllers właściwości, która jest tablicą UIViewController . Sam UITabBarController obiekt obsługuje ładowanie odpowiedniego kontrolera i prezentowanie jego widoku na podstawie wybranej karty.

Karty to wystąpienia UITabBarItem klasy, które znajdują się w wystąpieniu UITabBar . Każde UITabBar wystąpienie jest dostępne za pośrednictwem TabBarItem właściwości kontrolera na każdej karcie.

Aby dowiedzieć się, jak pracować z usługą UITabBarController, przejdźmy przez proces tworzenia prostej aplikacji, która używa tej aplikacji.

Przewodnik po aplikacji z kartami

W tym przewodniku utworzymy następującą aplikację:

Chociaż w Visual Studio dla komputerów Mac jest już dostępny szablon aplikacji z kartami, w tym przykładzie te instrukcje działają z pustego projektu, aby lepiej zrozumieć sposób konstruowania aplikacji.

Tworzenie aplikacji

Zacznij od utworzenia nowej aplikacji.

Wybierz element menu Plik > nowe > rozwiązanie w Visual Studio dla komputerów Mac i wybierz szablon Pusty projekt aplikacji > systemu iOS>, Nadaj projektowi TabbedApplicationnazwę , jak pokazano poniżej:

Dodawanie kontrolki UITabBarController

Następnie dodaj pustą klasę, wybierając pozycję Plik > nowy plik i wybierając szablon Ogólne : Pusta klasa . Nadaj plikowi TabController nazwę, jak pokazano poniżej:

Klasa TabController będzie zawierać implementację UITabBarController klasy , która będzie zarządzać tablicą UIViewControllers. Gdy użytkownik wybierze kartę, UITabBarController zajmie się prezentowaniem widoku odpowiedniego kontrolera widoku.

Aby zaimplementować te UITabBarController czynności, należy wykonać następujące czynności:

1. Ustaw klasę bazową na TabControllerUITabBarController .
2. Utwórz UIViewController wystąpienia, aby dodać do elementu TabController .
3. UIViewController Dodaj wystąpienia do tablicy przypisanej ViewControllers do właściwości TabController .

Dodaj następujący kod do klasy, TabController aby wykonać następujące kroki:

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

Zwróć uwagę, że dla każdego UIViewController wystąpienia ustawiamy Title właściwość UIViewController. Po dodaniu kontrolerów do UITabBarControllerUITabBarController obiektu element będzie odczytywał Title dla każdego kontrolera i wyświetlał go na etykiecie skojarzonej karty, jak pokazano poniżej:

Ustawianie elementu TabController jako kontrolki RootViewController

Kolejność umieszczania kontrolerów na kartach odpowiada kolejności, w której są dodawane do tablicy ViewControllers .

Aby załadować UITabController element jako pierwszy ekran, musimy ustawić go jako okno RootViewController, jak pokazano w poniższym kodzie dla elementu AppDelegate:

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

Jeśli teraz uruchomimy aplikację, UITabBarController zostanie załadowana pierwsza karta wybrana domyślnie. Wybranie dowolnej innej karty powoduje wyświetlenie UITabBarController, widoku skojarzonego kontrolera w sposób pokazany poniżej, w którym użytkownik końcowy wybrał drugą kartę:

Modyfikowanie elementów TabBarItem

Teraz, gdy mamy uruchomioną aplikację karty, zmodyfikujmy TabBarItem element , aby zmienić wyświetlany obraz i tekst, a także dodać wskaźnik do jednej z kart.

Ustawianie elementu systemowego

Najpierw ustawmy pierwszą kartę, aby użyć elementu systemowego. W konstruktorze TabControllerobiektu usuń wiersz, który ustawia kontroler Title dla tab1 wystąpienia i zastąp go następującym kodem, aby ustawić właściwość kontrolera TabBarItem :

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

Podczas tworzenia UITabBarItem obiektu przy użyciu UITabBarSystemItemelementu tytuł i obraz są automatycznie udostępniane przez system iOS, jak pokazano na poniższym zrzucie ekranu przedstawiający ikonę Ulubione i tytuł na pierwszej karcie:

Ustawianie obrazu

Oprócz używania elementu systemowego tytuł i obraz obiektu UITabBarItem można ustawić na wartości niestandardowe. Na przykład zmień kod, który ustawia TabBarItem właściwość kontrolera o nazwie tab2 w następujący sposób:

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

Powyższy kod zakłada, że obraz o nazwie second.png został dodany do katalogu głównego projektu (lub katalogu Resources ). Aby obsługiwać wszystkie gęstości ekranu, potrzebne są trzy obrazy, jak pokazano poniżej:

Zalecany rozmiar różni się w zależności od stylu obrazu (okrągły, kwadratowy, szeroki lub wysoki).

Właściwość musi być ustawiona tylko na nazwę pliku second.png. W Image razie potrzeby system iOS automatycznie załaduje pliki o wyższej rozdzielczości. Więcej informacji na ten temat można przeczytać w przewodnikach Praca z obrazami . Domyślnie elementy paska kart są szare, z niebieskim odcieniem po wybraniu.

Zastępowanie tytułu

Title Gdy właściwość jest ustawiana bezpośrednio na TabBarItemobiekcie , zastąpi ona dowolną wartość ustawioną Title na samym kontrolerze.

Druga (środkowa) karta na tym zrzucie ekranu przedstawia niestandardowy tytuł i obraz:

Ustawianie wartości wskaźnika

Karta może również wyświetlać wskaźnik. Dodaj na przykład następujący wiersz kodu, aby ustawić wskaźnik na trzeciej karcie:

tab3.TabBarItem.BadgeValue = "Hi";

Uruchomienie tej opcji powoduje wyświetlenie czerwonej etykiety z ciągiem "Hi" w lewym górnym rogu karty, jak pokazano poniżej:

Znaczek jest często używany do wyświetlania nieczytelnych, nowych elementów wskazujących liczbę. Aby usunąć znaczek, ustaw BadgeValue wartość null, jak pokazano poniżej:

tab3.TabBarItem.BadgeValue = null;

Karty w scenariuszach innych niż RootViewController

W powyższym przykładzie pokazano, jak pracować z elementem UITabBarController , gdy jest RootViewController to okno. W tym przykładzie sprawdzimy, jak używać , UITabBarController gdy nie RootViewController jest to element , i pokażemy, jak to jest tworzone przy użyciu scenorysów.

Przykład ekranu początkowego

W tym scenariuszu początkowy ekran jest ładowany z kontrolera, który nie jest .UITabBarController Gdy użytkownik wchodzi w interakcję z ekranem, naciskając przycisk, ten sam kontroler widoku zostanie załadowany do UITabBarControllerelementu , który następnie zostanie wyświetlony użytkownikowi. Poniższy zrzut ekranu przedstawia przepływ aplikacji:

W tym przykładzie uruchomimy nową aplikację. Ponownie użyjemy szablonu i Telefon > App > Empty Project (C#), tym razem nazewnictwa projektu InitialScreenDemo.

W tym przykładzie scenorys służy do układania kontrolerów widoku. Aby dodać scenorys:

• Kliknij prawym przyciskiem myszy nazwę projektu, a następnie wybierz polecenie Dodaj > nowy plik.

• Po wyświetleniu okna dialogowego Nowy plik przejdź do pozycji Pusty system iOS > i Telefon Scenorys.

Nazwijmy tę nową tablicę Storyboard MainStoryboard , jak pokazano poniżej:

Podczas dodawania scenorysu do wcześniej innego pliku scenorysu należy pamiętać kilka ważnych kroków, które zostały omówione w przewodniku Wprowadzenie do scenorysów . Są to:

1. Dodaj nazwę scenorysu do sekcji Interfejs główny w pliku Info.plist:

   

2. W pliku App Delegatezastąpij metodę Window następującym kodem:

   public override UIWindow Window {
       get;
       set;
   }
   

W tym przykładzie będziemy potrzebować trzech kontrolerów widoku. Jeden o nazwie ViewController1będzie używany jako kontroler widoku początkowego i na pierwszej karcie. Pozostałe dwa, nazwane ViewController2 i ViewController3, które będą używane odpowiednio na drugiej i trzeciej karcie.

Otwórz Projektant, klikając dwukrotnie plik MainStoryboard.storyboard i przeciągnij trzy kontrolery widoku na powierzchni projektowej. Chcemy, aby każdy z tych kontrolerów widoku miał własną klasę odpowiadającą powyższej nazwie, więc w obszarze Klasa tożsamości > wpisz jego nazwę, jak pokazano na poniższym zrzucie ekranu:

Visual Studio dla komputerów Mac automatycznie wygeneruje potrzebne klasy i pliki projektanta. Można to zobaczyć w okienku rozwiązania, jak pokazano poniżej:

Tworzenie interfejsu użytkownika

Następnie utworzymy prosty interfejs użytkownika dla każdego z widoków ViewController przy użyciu Projektant platformy Xamarin dla systemu iOS.

Chcemy przeciągnąć kontrolkę Label i Button na kontrolkę ViewController1 z kontrolki ToolBox po prawej stronie. Następnie użyjemy okienka właściwości, aby edytować nazwę i tekst kontrolek w następujący sposób:

• Etykieta : Text = jedna
• Przycisk : Title = Użytkownik wykonuje jakąś akcję początkową

Będziemy kontrolować widoczność naszego przycisku w zdarzeniu TouchUpInside i musimy odwołać się do niego w kodzie. Zidentyfikujmy ją z nazwąaButton w okienku właściwości, jak pokazano na poniższym zrzucie ekranu:

Urządzenie Design Surface powinno teraz wyglądać podobnie jak na poniższym zrzucie ekranu:

Dodajmy nieco więcej szczegółów do ViewController2 i ViewController3, dodając etykietę do każdej z nich i zmieniając odpowiednio tekst na "Dwa" i "Trzy". To wyróżnia użytkownika, którego karty/widoku patrzymy.

Podłączanie przycisku

Po pierwszym uruchomieniu aplikacji zostanie załadowana ViewController1 . Gdy użytkownik naciągnie przycisk, ukryjemy przycisk i załadujemy UITabBarController element z wystąpieniem ViewController1 na pierwszej karcie.

Gdy użytkownik wyda zdarzenie aButton, chcemy, aby zdarzenie TouchUpInside zostało wyzwolone. Wybierzmy przycisk, a następnie na karcie Zdarzenia w okienku Właściwości zadeklaruj procedurę obsługi zdarzeń — InitialActionCompleted aby można było odwoływać się do niej w kodzie. Przedstawiono to na poniższym zrzucie ekranu:

Teraz musimy poinformować kontroler widoku, aby ukryć przycisk po uruchomieniu InitialActionCompletedzdarzenia . W ViewController1pliku dodaj następującą metodę częściową:

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

Zapisz plik i uruchom aplikację. Powinien pojawić się jeden ekran, a przycisk zniknął na ekranie Touch Up.

Dodawanie kontrolera paska kart

Mamy teraz nasz widok Początkowy działa zgodnie z oczekiwaniami. Następnie chcemy dodać go do elementu UITabBarControllerwraz z widokami 2 i 3. Otwórzmy scenorys w Projektant.

W przyborniku wyszukaj kontroler paska kart w obszarze Kontrolery i obiekty i przeciągnij je na powierzchnię projektową. Jak widać na poniższym zrzucie ekranu, kontroler paska kart jest bez interfejsu użytkownika i dlatego domyślnie udostępnia dwa kontrolery widoku:

Usuń te nowe kontrolery widoku, wybierając czarny pasek u dołu i naciskając klawisz Delete.

W naszym scenorysie możemy użyć segues do obsługi przejść między TabBarController i naszymi kontrolerami widoków. Po interakcji z widokiem początkowym chcemy załadować go do kontrolki TabBarController wyświetlonej użytkownikowi. Skonfigurujmy to w projektancie.

Ctrl-Click i Przeciągnij z przycisku do TabBarController. Po kliknięciu myszy zostanie wyświetlone menu kontekstowe. Chcemy użyć modalnego segi.

Aby skonfigurować każdą z naszych kart, naciśnij klawisze Ctrl-Click z tabBarController do każdego z naszych kontrolerów widoku w kolejności od jednej do trzech, a następnie wybierz kartę Relacja z menu kontekstowego, jak pokazano poniżej:

Scenorys powinien przypominać poniższy zrzut ekranu:

Jeśli klikniemy jeden z elementów paska karty i eksplorujemy panel właściwości, zobaczysz kilka różnych opcji, jak pokazano poniżej:

Możemy go użyć do edytowania niektórych atrybutów, takich jak znaczek, tytuł i identyfikator systemu iOS, między innymi.

Jeśli teraz zapiszemy i uruchomimy aplikację, zobaczymy, że przycisk pojawi się ponownie po załadowaniu wystąpienia ViewController1 do elementu TabBarController. Naprawmy to, sprawdzając, czy bieżący widok ma nadrzędny kontroler widoku. Jeśli tak się stanie, wiemy, że znajdujemy się wewnątrz kontrolki TabBarController, dlatego przycisk powinien być ukryty. Dodajmy poniższy kod do klasy ViewController1:

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

Gdy aplikacja zostanie uruchomiona, a użytkownik naciśnie przycisk na pierwszym ekranie, zostanie załadowany interfejs UITabBarController z widokiem z pierwszego ekranu umieszczonego na pierwszej karcie, jak pokazano poniżej:

Podsumowanie

W tym artykule opisano sposób używania elementu UITabBarController w aplikacji. Omówiliśmy sposób ładowania kontrolerów do każdej karty oraz sposobu ustawiania właściwości na kartach, takich jak tytuł, obraz i znaczek. Następnie zbadaliśmy, używając scenorysów, jak załadować element UITabBarController w czasie wykonywania, gdy nie RootViewController jest to okno.

Pokrewne łącza

• Images.zip
• Dokumentacja klasy UITabBarController