Udostępnij za pośrednictwem

Podstawy Projektant systemu iOS

  • Artykuł

W tym przewodniku przedstawiono Projektant platformy Xamarin dla systemu iOS. Pokazuje, jak używać Projektant systemu iOS do wizualnego określania kontrolek, sposobu uzyskiwania dostępu do tych kontrolek w kodzie oraz sposobu edytowania właściwości.

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średnio na komputerze Mac z uruchomionym programem Xcode. Aby uzyskać więcej informacji, zobacz Projektowanie interfejsów użytkownika za pomocą programu Xcode.

Projektant platformy Xamarin dla systemu iOS to projektant interfejsu wizualnego podobny do konstruktora interfejsu Xcode i Projektant systemu Android. Niektóre z jego wielu funkcji obejmują bezproblemową integrację z programem Visual Studio dla systemów Windows i Mac, edycją przeciągania i upuszczania, interfejsem do konfigurowania procedur obsługi zdarzeń oraz możliwością renderowania kontrolek niestandardowych.

Wymagania

Projektant systemu iOS są dostępne w systemach Visual Studio dla komputerów Mac i Visual Studio 2017 i nowszych w systemie Windows. W programie Visual Studio dla systemu Windows Projektant systemu iOS wymaga połączenia z prawidłowo skonfigurowanym hostem kompilacji dla komputerów Mac, ale program Xcode nie musi być uruchomiony.

W tym przewodniku założono, że znajomość zawartości omówionej w przewodnikach Wprowadzenie.

Jak działa Projektant systemu iOS

W tej sekcji opisano, jak system iOS Projektant ułatwia tworzenie interfejsu użytkownika i łączenie go z kodem.

Projektant systemu iOS umożliwia deweloperom wizualne projektowanie interfejsu użytkownika aplikacji. Jak opisano w przewodniku Wprowadzenie do scenorysów , scenorys opisuje ekrany (kontrolery widoków), które tworzą aplikację, elementy interfejsu (widoki) umieszczone na tych kontrolerach widoków i ogólny przepływ nawigacji aplikacji.

Kontroler widoku ma dwie części: wizualną reprezentację w Projektant systemu iOS i skojarzona klasa C#:

W stanie domyślnym kontroler widoku nie udostępnia żadnych funkcji; musi zostać wypełniony kontrolkami. Te kontrolki są umieszczane w widoku kontrolera widoku— prostokątnym obszarze zawierającym całą zawartość ekranu. Większość kontrolerów widoku zawiera typowe kontrolki, takie jak przyciski, etykiety i pola tekstowe, jak pokazano na poniższym zrzucie ekranu, który pokazuje kontroler widoku zawierający przycisk:

Niektóre kontrolki, takie jak etykiety zawierające tekst statyczny, można dodać do kontrolera widoku i pozostawić je samodzielnie. Jednak częściej niż nie, kontrolki muszą być dostosowywane programowo. Na przykład dodany powyżej przycisk powinien wykonać coś po naciśnięciu, więc należy dodać procedurę obsługi zdarzeń w kodzie.

Aby uzyskać dostęp do przycisku i manipulować nim w kodzie, musi mieć unikatowy identyfikator. Podaj unikatowy identyfikator, wybierając przycisk, otwierając okienko właściwości i ustawiając jego pole Nazwa na wartość taką jak "SubmitButton":

Setting a button's name in the Properties Pad

Teraz, gdy przycisk ma nazwę, można uzyskać do niego dostęp w kodzie. Ale jak to działa?

W okienku rozwiązania przejdź do ViewController.cs i kliknięcie wskaźnika ujawnienia pokazuje, że definicja klasy kontrolera ViewController widoku obejmuje dwa pliki, z których każda zawiera częściową definicję klasy:

The two files that make up the ViewController class: ViewController.cs and ViewController.designer.cs

  • ViewController.cs należy wypełnić kodem niestandardowym powiązanym z klasąViewController. W tym pliku ViewController klasa może reagować na różne metody cyklu życia kontrolera widoku systemu iOS, dostosowywać interfejs użytkownika i reagować na dane wejściowe użytkownika, takie jak naciśnięcia przycisku.

  • ViewController.designer.cs jest wygenerowanym plikiem utworzonym przez Projektant systemu iOS w celu mapowania wizualnie skonstruowanego interfejsu na kod. Ponieważ zmiany w tym pliku zostaną zastąpione, nie należy go modyfikować. Deklaracje właściwości w tym pliku umożliwiają kodowi w ViewController klasie uzyskiwania dostępu według nazwy kontrolki skonfigurowane w Projektant systemu iOS. Otwarcie ViewController.designer.cs ujawnia następujący kod:

namespace Designer
{
    [Register ("ViewController")]
    partial class ViewController
    {
        [Outlet]
        [GeneratedCode ("iOS Designer", "1.0")]
        UIKit.UIButton SubmitButton { get; set; }

        void ReleaseDesignerOutlets ()
        {
            if (SubmitButton != null) {
                SubmitButton.Dispose ();
                SubmitButton = null;
            }
        }
    }
}

Deklaracja SubmitButton właściwości łączy całą ViewController klasę — nie tylko plik ViewController.designer.cs — z przyciskiem zdefiniowanym w scenorysie. Ponieważ ViewController.cs definiuje część ViewController klasy, ma dostęp do SubmitButtonelementu .

Poniższy zrzut ekranu ilustruje, że funkcja IntelliSense rozpoznaje SubmitButton teraz odwołanie w ViewController.cs:

W tej sekcji pokazano, jak utworzyć przycisk w systemie iOS Projektant i uzyskać dostęp do tego przycisku w kodzie.

Pozostała część tego dokumentu zawiera dalsze omówienie Projektant systemu iOS.

Podstawy Projektant systemu iOS

W tej sekcji przedstawiono części Projektant systemu iOS i przedstawiono jej funkcje.

Uruchamianie Projektant systemu iOS

Projekty platformy Xamarin.iOS utworzone za pomocą Visual Studio dla komputerów Mac zawierają scenorys. Aby wyświetlić zawartość scenorysu, kliknij dwukrotnie plik scenorysu w okienku rozwiązania:

A storyboard open in the iOS Designer

Funkcje Projektant systemu iOS

Projektant systemu iOS ma sześć podstawowych sekcji:

Sections of the iOS Designer

  1. Powierzchnia projektowa — podstawowy obszar roboczy Projektant systemu iOS. Pokazany w obszarze dokumentu umożliwia wizualną konstrukcję interfejsów użytkownika.
  2. Pasek narzędzi ograniczeń — umożliwia przełączanie między trybem edycji ramek a trybem edycji ograniczeń, dwoma różnymi sposobami umieszczania elementów w interfejsie użytkownika.
  3. Przybornik — wyświetla listę kontrolerów, obiektów, kontrolek, widoków danych, rozpoznawania gestów, okien i pasków, które można przeciągnąć na powierzchnię projektową i dodać do interfejsu użytkownika.
  4. Okienko właściwości — wyświetla właściwości wybranej kontrolki, w tym tożsamość, style wizualizacji, ułatwienia dostępu, układ i zachowanie.
  5. Konspekt dokumentu — przedstawia drzewo kontrolek tworzących układ edytowanego interfejsu. Kliknięcie elementu w drzewie spowoduje wybranie go w Projektant systemu iOS i wyświetlenie jego właściwości w okienku właściwości. Jest to przydatne do wybierania konkretnej kontrolki w głęboko zagnieżdżonym interfejsie użytkownika.
  6. Dolny pasek narzędzi — zawiera opcje zmiany sposobu wyświetlania pliku scenorysu lub xib dla systemu iOS Projektant, w tym urządzenia, orientacji i powiększenia.

Projektowanie przepływu pracy

Dodawanie kontrolki do interfejsu

Aby dodać kontrolkę do interfejsu, przeciągnij ją z przybornika i upuść na powierzchni projektowej. Podczas dodawania lub pozycjonowania kontrolki, wytyczne pionowe i poziome podkreślają często używane pozycje układu, takie jak środek pionowy, środek poziomy i marginesy:

Niebieska linia kropkowana w powyższym przykładzie zawiera wyrównywanie wizualizacji w poziomie, aby ułatwić umieszczanie przycisku.

Polecenia menu kontekstowego

Menu kontekstowe jest dostępne zarówno na powierzchni projektowej, jak i w konspekcie dokumentu. To menu zawiera polecenia dla wybranej kontrolki i jej elementu nadrzędnego, co jest przydatne podczas pracy z widokami w hierarchii zagnieżdżonej:

The context menu on the design surface

Pasek narzędzi ograniczeń

Pasek narzędzi ograniczeń został zaktualizowany, a teraz składa się z dwóch kontrolek: tryb edycji ramki / tryb edycji ograniczeń i przycisk ograniczeń aktualizacji / aktualizacji ramek.

Tryb edycji ramki/przełącznik trybu edycji ograniczeń

W poprzednich wersjach Projektant systemu iOS kliknięcie już wybranego widoku na powierzchni projektowej przełączone między trybem edycji ramek i trybem edycji ograniczeń. Teraz przełącznik kontrolki na pasku narzędzi ograniczeń przełącza się między tymi trybami edycji.

  • Tryb edycji ramek:
  • Tryb edycji ograniczeń:

Aktualizowanie ograniczeń/przycisk aktualizacji ramek

Przycisk ograniczeń aktualizacji / aktualizacji ramek znajduje się po prawej stronie trybu edycji ramki / przełącznika trybu edycji ograniczeń.

  • W trybie edycji ramek kliknięcie tego przycisku dostosowuje ramki wszystkich wybranych elementów, aby pasowały do ich ograniczeń.
  • W trybie edycji ograniczeń kliknięcie tego przycisku dostosowuje ograniczenia wszystkich wybranych elementów w celu dopasowania ich ramek.

Dolny pasek narzędzi

Dolny pasek narzędzi umożliwia wybranie urządzenia, orientacji i powiększenia używanego do wyświetlania pliku scenorysu lub xib w Projektant systemu iOS:

Urządzenie i orientacja

Po rozwinięciu dolny pasek narzędzi wyświetla wszystkie urządzenia, orientacje i/lub adaptacje dotyczące bieżącego dokumentu. Kliknięcie ich zmienia widok wyświetlany na powierzchni projektowej.

Należy pamiętać, że wybranie urządzenia i orientacji zmienia się tylko w sposób, w jaki system iOS Projektant podgląd projektu. Niezależnie od bieżącego zaznaczenia, nowo dodane ograniczenia są stosowane we wszystkich urządzeniach i orientacjach, chyba że przycisk Edytuj cechy został użyty do określenia inaczej.

Po włączeniu klas rozmiarów na rozwiniętym dolnym pasku narzędzi pojawi się przycisk Edytuj cechy. Kliknięcie przycisku Edytuj cechy powoduje wyświetlenie opcji tworzenia odmiany interfejsu na podstawie klasy rozmiaru reprezentowanej przez wybrane urządzenie i orientację. Rozważ następujące przykłady:

  • Jeśli wybrano opcję i Telefon SE / Portrait, popover zapewni opcje tworzenia odmiany interfejsu dla klasy rozmiaru kompaktowego, regularnego rozmiaru wysokości.
  • Jeśli wybrano pozycję iPad Pro 9.7" / Poziomy / pełny ekran, w oknie podręcznym zostaną wyświetlone opcje tworzenia odmiany interfejsu dla zwykłej klasy szerokości, regularnego rozmiaru wysokości.

Kontrolki powiększenia

Powierzchnia projektowa obsługuje powiększanie za pomocą kilku kontrolek:

Kontrolki obejmują następujące elementy:

  1. Powiększenie, aby dopasować
  2. Pomniejsz
  3. Powiększ
  4. Rozmiar rzeczywisty (rozmiar 1:1 pikseli)

Te kontrolki dopasowują powiększenie powierzchni projektowej. Nie wpływają one na interfejs użytkownika aplikacji w czasie wykonywania.

Okienko właściwości

Użyj okienka właściwości, aby edytować tożsamość, style wizualne, ułatwienia dostępu i zachowanie kontrolki. Poniższy zrzut ekranu przedstawia opcje okienka właściwości dla przycisku:

The Properties Pad for a button

Sekcje okienka właściwości

Okienko właściwości zawiera trzy sekcje:

  1. Widget — główne właściwości kontrolki, takie jak nazwa, klasa, właściwości stylu itp. Właściwości do zarządzania zawartością kontrolki są zwykle umieszczane tutaj.
  2. Layout — właściwości, które śledzą położenie i rozmiar kontrolki, w tym ograniczenia i ramki, są wymienione tutaj.
  3. Zdarzenia — w tym miejscu określono zdarzenia i programy obsługi zdarzeń. Przydatne do obsługi zdarzeń, takich jak dotyk, naciśnięcie, przeciąganie itp. Zdarzenia mogą być również obsługiwane bezpośrednio w kodzie.

Edytowanie właściwości w okienku właściwości

Oprócz edycji wizualnej na powierzchni projektowej system iOS Projektant obsługuje edytowanie właściwości w okienku właściwości. Dostępne właściwości zmieniają się na podstawie wybranej kontrolki, jak pokazano na poniższych zrzutach ekranu:

Button properties

View controller properties

Ważne

Sekcja Tożsamość okienka właściwości zawiera teraz pole Moduł . Należy wypełnić tę sekcję tylko w przypadku współdziałania z klasami Swift. Służy do wprowadzania nazwy modułu dla klas Swift, które są przestrzenią nazw.

Wartości domyślne

Wiele właściwości w okienku właściwości nie pokazuje wartości ani wartości domyślnej. Jednak kod aplikacji może nadal modyfikować te wartości. Okienko właściwości nie wyświetla wartości ustawionych w kodzie.

Procedury obsługi zdarzeń

Aby określić niestandardowe programy obsługi zdarzeń dla różnych zdarzeń, użyj karty Zdarzenia w okienku właściwości. Na przykład na poniższym HandleClick zrzucie ekranu metoda obsługuje zdarzenie Touch Up Inside przycisku:

The Properties Pad, with an event handler set for a button

Po określeniu procedury obsługi zdarzeń należy dodać metodę o tej samej nazwie do odpowiedniej klasy kontrolera widoku. unrecognized selector W przeciwnym razie po naciśnięciu przycisku wystąpi wyjątek:

An unrecognized selector exception

Należy pamiętać, że po określeniu programu obsługi zdarzeń w okienku właściwości system iOS Projektant natychmiast otworzy odpowiedni plik kodu i zaoferuje wstawienie deklaracji metody.

Przykład użycia niestandardowych procedur obsługi zdarzeń można znaleźć w przewodniku Wprowadzenie do funkcji Hello, iOS.

Widok konspektu

Projektant systemu iOS mogą również wyświetlać hierarchię kontrolek interfejsu jako konspekt. Konspekt jest dostępny, wybierając kartę Konspekt dokumentu, jak pokazano poniżej:

Wybrana kontrolka w widoku konspektu pozostaje zsynchronizowana z wybraną kontrolką na powierzchni projektowej. Ta funkcja jest przydatna do wybierania elementu z głęboko zagnieżdżonej hierarchii interfejsu.

Przywróć kod Xcode

Zamiennie można używać Projektant systemu iOS i narzędzia Xcode Interface Builder. Aby otworzyć scenorys lub plik xib w narzędziu Xcode Interface Builder, kliknij go prawym przyciskiem myszy i wybierz polecenie Otwórz za pomocą > narzędzia Xcode Interface Builder, jak pokazano na poniższym zrzucie ekranu:

Opening a storyboard in Xcode Interface Builder

Po wprowadzeniu zmian w narzędziu Xcode Interface Builder zapisz plik i wróć do Visual Studio dla komputerów Mac. Zmiany zostaną zsynchronizowane z projektem platformy Xamarin.iOS.

Obsługa pliku xib

Projektant systemu iOS obsługuje tworzenie, edytowanie i zarządzanie plikami xib. Są to pliki XML, które ponownie wyświetlają pojedyncze widoki niestandardowe, które można dodać do hierarchii widoków aplikacji. Plik .xib zazwyczaj reprezentuje interfejs dla pojedynczego widoku lub ekranu w aplikacji, natomiast scenorys reprezentuje wiele ekranów i przejścia między nimi.

Istnieje wiele opinii na temat tego, które rozwiązanie — pliki xib, scenorysy lub kod — najlepiej sprawdza się w przypadku tworzenia i obsługi interfejsu użytkownika. W rzeczywistości nie ma idealnego rozwiązania i zawsze warto rozważyć najlepsze narzędzie do pracy pod ręką. Oznacza to, że pliki .xib są na ogół najbardziej zaawansowane, gdy są używane do reprezentowania widoku niestandardowego potrzebnego w wielu miejscach w aplikacji, takich jak niestandardowa komórka widoku tabeli.

Więcej dokumentacji na temat używania plików xib można znaleźć w następujących przepisach:

Aby uzyskać więcej informacji na temat korzystania z scenorysów, zobacz Wprowadzenie do scenorysów.

Te i inne przewodniki związane z systemem iOS Projektant odnoszą się do używania scenorysów jako standardowego podejścia do tworzenia interfejsów użytkownika, ponieważ większość nowych szablonów projektów platformy Xamarin.iOS domyślnie udostępnia scenorys.

Podsumowanie

Ten przewodnik zawiera wprowadzenie do Projektant systemu iOS, opisujący jego funkcje i przedstawiające narzędzia, które oferuje do projektowania pięknych interfejsów użytkownika.