Scenorysy w środowisku Xamarin.iOS
W tym przewodniku wyjaśnimy, czym jest scenorys i zbadamy niektóre kluczowe składniki, takie jak Segues. Przyjrzymy się sposobom tworzenia i użycia scenorysów oraz korzyści, jakie mają dla dewelopera.
Zanim format pliku Storyboard został wprowadzony przez firmę Apple jako wizualna reprezentacja interfejsu użytkownika aplikacji systemu iOS, deweloperzy utworzyli pliki XIB dla każdego kontrolera widoku i zaprogramowali nawigację między każdym widokiem ręcznie. Użycie scenorysu umożliwia deweloperowi definiowanie zarówno kontrolerów widoku, jak i nawigację między nimi na powierzchni projektowej i oferuje edycję interfejsu użytkownika aplikacji WYSIWYG.
Scenorys można utworzyć i otworzyć za pomocą Visual Studio dla komputerów Mac. W tym przewodniku przedstawiono również sposób używania narzędzia Xcode Interface Builder do tworzenia scenorysów podczas programowania nawigacji przy użyciu języka C#.
Wymagania
Scenorysy mogą być używane z programem Xcode i uruchamiane z poziomu projektu Xamarin.iOS w Visual Studio dla komputerów Mac.
Co to jest scenorys?
Scenorys to wizualna reprezentacja wszystkich ekranów w aplikacji. Zawiera sekwencję scen z każdą sceną reprezentującą kontroler widoku i jego widoki. Te widoki mogą zawierać obiekty i kontrolki , które umożliwiają użytkownikowi interakcję z aplikacją. Ta kolekcja widoków i kontrolek (lub widoków podrzędnych) jest znana jako hierarchia widoku zawartości. Sceny są połączone przez obiekty segue, które reprezentują przejście między kontrolerami widoku. Jest to zwykle osiągane przez utworzenie segi między obiektem w widoku początkowym i widoku łączenia. Relacje na powierzchni projektowej przedstawiono na poniższej ilustracji:
Jak pokazano, scenorys przedstawia każdą scenę z zawartością już renderowaną i ilustruje połączenia między nimi. Kiedy mówimy o scenach na urządzeniu i Telefon, można bezpiecznie założyć, że jedna scena na scenie jest równa jednemu ekranowi zawartości na urządzeniu. Jednak w przypadku tabletu iPad można jednocześnie wyświetlić wiele scen, na przykład za pomocą kontrolera widoku Popover.
Istnieje wiele zalet używania scenorysów do tworzenia interfejsu użytkownika aplikacji, zwłaszcza w przypadku korzystania z platformy Xamarin. Po pierwsze, jest to wizualna reprezentacja interfejsu użytkownika, ponieważ wszystkie obiekty — w tym kontrolki niestandardowe — są renderowane w czasie projektowania. Oznacza to, że przed utworzeniem lub wdrożeniem aplikacji można zwizualizować jej wygląd i przepływ. Weź na przykład poprzedni obraz. Możemy powiedzieć z krótkiego spojrzenia na powierzchnię projektową, ile jest scen, układ każdego widoku i jak wszystko jest powiązane. To właśnie sprawia, że Scenorysy są tak potężne.
Zdarzenia można również zarządzać za pomocą scenorysów. Większość kontrolek interfejsu użytkownika zawiera listę możliwych zdarzeń w okienku właściwości. Procedurę obsługi zdarzeń można dodać tutaj i ukończyć w częściowej metodzie w klasie Kontrolery widoku.
Zawartość scenorysu jest przechowywana jako plik XML. W czasie kompilacji wszystkie .storyboard pliki są kompilowane w pliki binarne znane jako karty sieciowe. W czasie wykonywania te karty sieciowe są inicjowane i tworzone w celu utworzenia nowych widoków.
Segues
Segue lub Segue Object jest używany w programach dla systemu iOS do reprezentowania przejścia między scenami. Aby utworzyć segue, przytrzymaj naciśnięty klawisz Ctrl i kliknij przycisk przeciągnij z jednej sceny do innej. Podczas przeciągania myszy pojawia się niebieski łącznik, który wskazuje, gdzie będzie prowadzić segue. Przedstawiono to na poniższej ilustracji:
Po kliknięciu myszy zostanie wyświetlone menu, które umożliwia wybranie akcji dla segue. Może to wyglądać podobnie do następujących obrazów:
Klasy rozmiarów systemu iOS 8 i przed systemem iOS:
W przypadku korzystania z klas rozmiarów i segues adaptacyjnych:
Ważne
Jeśli używasz programu VMWare dla maszyny wirtualnej z systemem Windows, kliknięcie klawisza Ctrl jest domyślnie mapowane jako przycisk myszy prawym przyciskiem myszy. Aby utworzyć segue, zmodyfikuj preferencje klawiatury i myszy Skróty> myszy>i zamapuj ponownie przycisk pomocniczy, jak pokazano poniżej:
Teraz powinno być możliwe dodanie segi między kontrolerami widoku w zwykły sposób.
Istnieją różne typy przejść, z których każdy daje kontrolę nad sposobem prezentowania użytkownikowi nowego kontrolera widoku i interakcji z innymi kontrolerami widoków w scenorysie. Omówiono je poniżej. Istnieje również możliwość podklasowania obiektu segue w celu zaimplementowania przejścia niestandardowego:
Pokaż/Wypychanie — segue wypychania dodaje kontroler widoku do stosu nawigacji. Przyjęto założenie, że kontroler widoku pochodzący z wypychania jest częścią tego samego kontrolera nawigacji co kontroler widoku, który jest dodawany do stosu. To robi to samo, co
pushViewController, i jest zwykle używane, gdy istnieje pewna relacja między danymi na ekranach. Użycie segue wypychania zapewnia luksus posiadania paska nawigacyjnego z przyciskiem wstecz i tytułem dodanym do każdego widoku na stosie, co umożliwia przechodzenie do szczegółów nawigacji za pośrednictwem hierarchii widoków.Modalny — modalny segue tworzy relację między dowolnymi dwoma kontrolerami widoku w projekcie z opcją pokazywania animowanego przejścia. Kontroler widoku podrzędnego całkowicie zasłania kontroler widoku nadrzędnego po włączeniu do widoku. W przeciwieństwie do segue wypychania, który dodaje dla nas przycisk wstecz, należy użyć
DismissViewControllerelementu w przypadku korzystania z modalnego segue w celu powrotu do poprzedniego kontrolera widoku.Niestandardowy — dowolny niestandardowy segue można utworzyć jako podklasę .
UIStoryboardSegueUnwind — unwind segue może służyć do przechodzenia z powrotem przez wypychanie lub modalne segue, na przykład poprzez odrzucenie modalnie prezentowanego kontrolera widoku. Oprócz tego można cofnąć się nie tylko przez jeden, ale serię segues wypychania i modalnych i wrócić wiele kroków w hierarchii nawigacji z jedną akcją odwijania. Aby dowiedzieć się, jak używać odwijanego segue w systemie iOS, przeczytaj przepis Creating Unwind Segues (Tworzenie systemu Segues w systemie iOS).
Bez źródła — segue bez źródła wskazuje scenę zawierającą początkowy kontroler widoku i dlatego widok, który użytkownik zobaczy jako pierwszy. Jest on reprezentowany przez segue pokazany tutaj:
Typy segue adaptacyjnego
System iOS 8 wprowadził klasy rozmiarów, aby umożliwić korzystanie z pliku scenorysu systemu iOS ze wszystkimi dostępnymi rozmiarami ekranu, umożliwiając deweloperom tworzenie jednego interfejsu użytkownika dla wszystkich urządzeń z systemem iOS. Domyślnie wszystkie nowe aplikacje platformy Xamarin.iOS używają klas rozmiarów. Aby użyć klas rozmiarów ze starszego projektu, zapoznaj się z przewodnikiem Wprowadzenie do ujednoliconych scenorysów .
Każda aplikacja korzystająca z klas rozmiarów będzie również używać nowych segues adaptacyjnych. Podczas korzystania z klas rozmiarów pamiętaj, że nie określasz bezpośrednio, czy używasz tabletu i Telefon czy iPad. Innymi słowy, tworzysz jeden interfejs użytkownika, który zawsze będzie wyglądać tak samo, niezależnie od tego, z jaką ilością nieruchomości musi współpracować. Adaptacyjna segues działa, oceniając środowisko i określając, jak najlepiej prezentować zawartość. Poniżej przedstawiono funkcje Segues adaptacyjne:
| Segue | opis |
|---|---|
| Pokaż | Jest to bardzo podobne do segue push, ale bierze pod uwagę zawartość ekranu. |
| Pokaż szczegóły | Jeśli aplikacja wyświetli widok główny i szczegółowy (na przykład w kontrolerze widoku podzielonego na urządzeniu iPad), zawartość zastąpi widok szczegółów. Jeśli aplikacja wyświetla tylko wzorzec lub szczegóły, zawartość zastąpi górną część stosu kontrolera widoku. |
| Prezentacja | Jest to podobne do modalnego segue i umożliwia wybór stylów prezentacji i przejścia. |
| Prezentacja popover | Spowoduje to wyświetlenie zawartości jako wyskakującego okienka. |
Transferowanie danych przy użyciu segues
Korzyści z segue nie kończą się przejściami. Mogą również służyć do zarządzania transferem danych między kontrolerami widoku. Jest to osiągane przez zastąpienie PrepareForSegue metody na początkowym kontrolerze widoku i samodzielne obsługiwanie danych. Po wyzwoleniu segue — na przykład naciśnięciem przycisku — aplikacja wywoła tę metodę, zapewniając możliwość przygotowania nowego kontrolera widoku przed rozpoczęciem nawigacji. Poniższy kod przedstawia następujący kod:
public override void PrepareForSegue (UIStoryboardSegue segue,
NSObject sender)
{
base.PrepareForSegue (segue, sender);
var callHistoryController = segue.DestinationViewController
as CallHistoryController;
if (callHistoryController != null) {
callHistoryController.PhoneNumbers = PhoneNumbers;
}
}
W tym przykładzie PrepareForSegue metoda zostanie wywołana, gdy segue zostanie wyzwolony przez użytkownika. Najpierw należy utworzyć wystąpienie kontrolera widoku "odbierania" i ustawić je jako docelowy kontroler widoku segue. Odbywa się to w poniższym wierszu kodu:
var callHistoryController = segue.DestinationViewController as CallHistoryController;
Metoda ma teraz możliwość ustawiania właściwości w obiekcie DestinationViewController. Ten przykład wykorzystuje tę możliwość, przekazując listę o nazwie PhoneNumbers do obiektu i przypisując ją do CallHistoryController obiektu o tej samej nazwie:
if (callHistoryController != null) {
callHistoryController.PhoneNumbers = PhoneNumbers;
}
Po zakończeniu przejścia użytkownik zobaczy CallHistoryController obiekt z wypełniona listą.
Dodawanie scenorysu do projektu niezwiązanego z scenorysem
Czasami może być konieczne dodanie scenorysu do wcześniej niezwiązanego z scenorysem pliku. Proces można usprawnić w Visual Studio dla komputerów Mac, wykonując następujące kroki:
Utwórz nowy plik Scenorysu, przechodząc do strony File New File (Nowy plik) iOS Storyboard (Scenorys systemu iOS>).>>
Dodaj nazwę scenorysu do sekcji Interfejs główny pliku Info.plist.
Odpowiada to utworzeniu wystąpienia początkowego kontrolera widoku w metodzie w delegatu
FinishedLaunchingaplikacji. Po ustawieniu tej opcji aplikacja tworzy wystąpienie okna (zobacz następny krok), ładuje główny scenorys i przypisuje wystąpienie początkowego kontrolera widoku scenorysu (obok bez źródła Segue) jakoRootViewControllerwłaściwość okna. Spowoduje to, że okno będzie widoczne na ekranie.W pliku
AppDelegatezastąpij metodę domyślnąWindownastępującym kodem, aby zaimplementować właściwość okna:public override UIWindow Window { get; set; }
Tworzenie scenorysu za pomocą programu Xcode
Scenorys można utworzyć i zmodyfikować przy użyciu programu Xcode do użycia w aplikacjach systemu iOS opracowanych za pomocą Visual Studio dla komputerów Mac.
Scenorysy całkowicie zastępują poszczególne pliki XIB w projekcie, jednak poszczególne kontrolery widoku w scenorysie nadal mogą być tworzone przy użyciu funkcji Storyboard.InstantiateViewController.
Czasami aplikacje mają specjalne wymagania, których nie można obsłużyć za pomocą wbudowanych przejść scenorysów dostarczonych przez Projektant. Jeśli na przykład chcesz utworzyć aplikację uruchamiającą różne ekrany z tego samego przycisku, w zależności od bieżącego stanu aplikacji, możesz ręcznie utworzyć wystąpienie kontrolerów widoku i zaprogramować przejście samodzielnie.
Poniższy zrzut ekranu przedstawia dwa kontrolery widoku na powierzchni projektowej bez segue między nimi. W następnej sekcji opisano sposób konfigurowania tego przejścia w kodzie.
Dodaj pusty scenorys i Telefon do istniejącego projektu:
Kliknij dwukrotnie plik Scenorysu lub kliknij prawym przyciskiem myszy i wybierz polecenie Otwórz za pomocą > narzędzia Xcode Interface Builder, aby otworzyć go w narzędziu Interface Builder programu Xcode.
W programie Xcode otwórz bibliotekę (za pomocą pozycji Wyświetl > bibliotekę pokaż lubShift + Command + L), aby wyświetlić listę obiektów, które można dodać do scenorysu. Dodaj element
Navigation Controllerdo scenorysu, przeciągając obiekt z listy do scenorysu. Domyślnie będąNavigation Controllerdostępne dwa ekrany. Ekran po prawej stronie toTableViewControllerelement, który zastąpisz prostszym widokiem, aby można go było usunąć, klikając widok i naciskając klawisz Usuń.
Ten kontroler widoku będzie miał własną klasę niestandardową, a także potrzebuje własnego identyfikatora scenorysu. Po kliknięciu pola powyżej tego nowo dodanego widoku znajdują się trzy ikony, z których najdalej po lewej stronie reprezentuje kontroler widoku dla widoku. Po wybraniu tej ikony możesz ustawić wartości klas i identyfikatorów na karcie tożsamości okienka po prawej stronie. Ustaw te wartości na
MainViewControlleri upewnij się, że chcesz sprawdzićUse Storyboard IDwartość .
Ponownie za pomocą biblioteki przeciągnij kontrolkę Kontroler widoku na ekran. Zostanie to ustawione jako kontroler widoku głównego. Trzymając klawisz Control, kliknij i przeciągnij z kontrolera nawigacji po lewej stronie do nowo dodanego kontrolera widoku po prawej stronie, a następnie wybierz kontroler widoku głównego w menu.
Ta aplikacja przejdzie do innego widoku, więc dodaj jeszcze jeden widok do scenorysu, tak jak poprzednio. Wywołaj ją
PinkViewControlleri ustaw te wartości w taki sam sposób, jak w przypadku elementuMainViewController.
Ponieważ kontroler widoku będzie miał różowe tło, ustaw właściwość na panelu atrybutów przy użyciu listy rozwijanej obok
Background.
Ze względu na to, że chcemy
MainViewControllerprzejść doPinkViewControllerobiektu , pierwszy będzie potrzebował przycisku do interakcji. Użyj biblioteki, aby dodać przycisk do elementuMainViewController.
Scenorys został ukończony, ale po wdrożeniu projektu zostanie wyświetlony pusty ekran. Dzieje się tak dlatego, że nadal musisz poinformować środowisko IDE o używaniu scenorysu i skonfigurować kontroler widoku głównego, który będzie służył jako pierwszy widok. Zwykle można to zrobić za pomocą opcji projektu, jak pokazano wcześniej. Jednak w tym przykładzie dodamy następujący kod do aplikacji AppDelegate , aby osiągnąć ten sam wynik:
public partial class AppDelegate : UIApplicationDelegate
{
UIWindow window;
public static UIStoryboard Storyboard = UIStoryboard.FromName ("MainStoryboard", null);
public static UIViewController initialViewController;
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
window = new UIWindow (UIScreen.MainScreen.Bounds);
initialViewController = Storyboard.InstantiateInitialViewController () as UIViewController;
window.RootViewController = initialViewController;
window.AddSubview(initialViewController.View);
window.MakeKeyAndVisible ();
return true;
}
}
To dużo kodu, ale tylko kilka wierszy jest nieznanych. Najpierw należy zarejestrować scenorys w aplikacji AppDelegate , przekazując nazwę scenorysu MainStoryboard. Następnie należy poinformować aplikację o utworzeniu wystąpienia początkowego kontrolera widoku z scenorysu przez wywołanie InstantiateInitialViewController w scenorysie i ustawić ten kontroler widoku jako kontroler widoku głównego aplikacji. Ta metoda określa pierwszy ekran, który użytkownik widzi i tworzy nowe wystąpienie tego kontrolera widoku.
Zwróć uwagę, że w okienku rozwiązania środowisko IDE utworzyło klasę MainViewcontroller.cs i odpowiedni *.designer.cs plik po dodaniu nazwy klasy do okienka właściwości w kroku 4. Ta klasa utworzyła specjalny konstruktor zawierający klasę bazową:
public MainViewController (IntPtr handle) : base (handle)
{
}
Podczas tworzenia scenorysu przy użyciu środowiska Xcode środowisko IDE automatycznie doda atrybut [Register] w górnej części *.designer.cs klasy i przekaże identyfikator ciągu, który jest identyczny z identyfikatorem scenorysu określonym w poprzednim kroku. Spowoduje to połączenie języka C# z odpowiednią sceną w scenie w scenorysie.
[Register ("MainViewController")]
public partial class MainViewController : UIViewController
{
public MainViewController (IntPtr handle) : base (handle)
{
}
//...
}
Aby uzyskać więcej informacji na temat rejestrowania klas i metod, zobacz Typ Registrar.
Ostatnim krokiem w tej klasie jest połączenie przycisku i przejście do różowego kontrolera widoku. Utworzysz wystąpienie PinkViewController z scenorysu, a następnie zaprogramujesz segue wypychania za pomocą PushViewControllerpolecenia , jak pokazano w poniższym przykładowym kodzie:
public partial class MainViewController : UIViewController
{
UIViewController pinkViewController;
public MainViewController (IntPtr handle) : base (handle)
{
}
public override void AwakeFromNib ()
{
// Called when loaded from xib or storyboard.
this.Initialize ();
}
public void Initialize()
{
//Instantiating View Controller with Storyboard ID 'PinkViewController'
pinkViewController = Storyboard.InstantiateViewController ("PinkViewController") as PinkViewController;
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
//When we push the button, we will push the pinkViewController onto our current Navigation Stack
PinkButton.TouchUpInside += (o, e) =>
{
this.NavigationController.PushViewController (pinkViewController, true);
};
}
}
Uruchomienie aplikacji tworzy aplikację 2-ekranową:
Segues warunkowe
Często przejście z jednego kontrolera widoku do następnego zależy od określonego warunku. Jeśli na przykład zrobiliśmy prosty ekran logowania, chcemy przejść do następnego ekranu tylko wtedy, gdy zweryfikowano nazwę użytkownika i hasło.
W następnym przykładzie dodamy pole hasła do poprzedniego przykładu. Użytkownik będzie mógł uzyskać dostęp tylko do kontrolki PinkViewController , jeśli wprowadzi poprawne hasło. W przeciwnym razie zostanie wyświetlony błąd.
Przed rozpoczęciem wykonaj poprzednie kroki 1–8. W tych krokach utworzymy nasz scenorys, zacznij tworzyć interfejs użytkownika i informujemy delegata aplikacji, który kontroler widoku ma być używany jako element RootViewController.
Teraz skompilujmy nasz interfejs użytkownika i dodajmy do niego dodatkowe widoki
MainViewController, aby wyglądały tak na poniższym zrzucie ekranu:- UITextField
- Nazwa: PasswordTextField
- Symbol zastępczy: "Wprowadź hasło tajne"
- UILabel
- Tekst: "Błąd: nieprawidłowe hasło. Nie przejdziesz!"
- Kolor: czerwony
- Wyrównanie: wyśrodkowanie
- Linie: 2
- Pole wyboru "Ukryte" zostało zaznaczone
- UITextField
Utwórz segue między przyciskiem Przejdź do różowego i kontrolerem widoku, przeciągając kontrolkę z PinkButton do kontrolki PinkViewController, a następnie wybierając pozycję Wypchnij na mysz w górę.
Kliknij pozycję Segue i nadaj mu identyfikator
SegueToPink:
Na koniec dodaj następującą
ShouldPerformSeguemetodę doMainViewControllerklasy:public override bool ShouldPerformSegue (string segueIdentifier, NSObject sender) { if(segueIdentifier == "SegueToPink"){ if (PasswordTextField.Text == "password") { PasswordTextField.ResignFirstResponder (); return true; } else{ ErrorLabel.Hidden = false; return false; } } return base.ShouldPerformSegue (segueIdentifier, sender); }
W tym kodzie dopasowaliśmy segueIdentifier do naszego SegueToPink segue, więc możemy przetestować warunek. W tym przypadku prawidłowe hasło. Jeśli nasz warunek zwróci truewartość , segue wykona i przedstawi element PinkViewController. Jeśli falsenowy kontroler widoku nie zostanie wyświetlony.
Możemy zastosować to podejście do dowolnego segue na tym kontrolerze widoku, sprawdzając argument segueIdentifier do metody ShouldPerformSegue. W tym przypadku mamy tylko jeden identyfikator Segue — SegueToPink.
Podsumowanie
W tym artykule przedstawiono koncepcję scenorysów i sposób ich korzyści w tworzeniu aplikacji systemu iOS. W tym artykule omówiono sceny, kontrolery widoku, widoki i hierarchie widoku oraz sposób łączenia scen z różnymi typami segues. Eksploruje również ręczne tworzenie wystąpień kontrolerów widoku z poziomu scenorysu i tworzenie warunkowych seguesów.