Udostępnij za pośrednictwem

Widoki stosu w środowisku Xamarin.iOS

  • Artykuł

W tym artykule opisano używanie nowej kontrolki UIStackView w aplikacji platformy Xamarin.iOS do zarządzania zestawem widoków podrzędnych w stosie poziomym lub pionowo rozmieszczonym.

Ważne

Należy pamiętać, że gdy element StackView jest obsługiwany w Projektant systemu iOS, podczas korzystania z kanału Stable mogą wystąpić błędy użyteczności. Przełączenie kanałów Beta lub Alpha powinno złagodzić ten problem. Postanowiliśmy przedstawić ten przewodnik przy użyciu środowiska Xcode do momentu zaimplementowania wymaganych poprawek w kanale Stable.

Kontrolka Widok stosu (UIStackView) wykorzystuje możliwości klas automatycznego układu i rozmiaru do zarządzania stosem widoków podrzędnych w poziomie lub w pionie, który dynamicznie reaguje na orientację i rozmiar ekranu urządzenia z systemem iOS.

Układ wszystkich widoków podrzędnych dołączonych do widoku stosu jest zarządzany przez niego na podstawie właściwości zdefiniowanych przez dewelopera, takich jak oś, dystrybucja, wyrównanie i odstępy:

Diagram układu widoku stosu

W przypadku korzystania z elementu UIStackView w aplikacji platformy Xamarin.iOS deweloper może zdefiniować podglądy wewnątrz scenorysu w Projektant systemu iOS lub dodając i usuwając podglądy w kodzie języka C#.

Ten dokument składa się z dwóch części: szybkiego startu ułatwiającego zaimplementowanie pierwszego widoku stosu, a następnie bardziej szczegółowe informacje techniczne na temat jego działania.

Wideo interfejsu użytkownikaStackView

Przewodnik Szybki start dotyczący interfejsu użytkownikaStackView

W ramach szybkiego wprowadzenia do kontrolki UIStackView utworzymy prosty interfejs, który umożliwia użytkownikowi wprowadzenie oceny z zakresu od 1 do 5. Użyjemy dwóch widoków stosu: jeden, aby rozmieścić interfejs pionowo na ekranie urządzenia i jeden, aby rozmieścić ikony klasyfikacji 1–5 w poziomie na ekranie.

Definiowanie interfejsu użytkownika

Uruchom nowy projekt Xamarin.iOS i edytuj plik Main.storyboard w narzędziu Xcode Interface Builder. Najpierw przeciągnij pojedynczy pionowy widok stosu na kontroler widoku:

Przeciągnij pojedynczy pionowy widok stosu na kontroler widoku

W Inspektorze atrybutów ustaw następujące opcje:

Ustawianie opcji Widoku stosu

Gdzie:

  • Oś — określa, czy widok stosu rozmieści podpoglądy w poziomie lub w pionie.
  • Wyrównanie — określa sposób wyrównania widoków podrzędnych w widoku stosu.
  • Dystrybucja — określa rozmiar podpoglądów w widoku stosu.
  • Odstępy — steruje minimalnym odstępem między każdym widokiem podrzędnym w widoku stosu.
  • Względny punkt odniesienia — jeśli jest zaznaczone, odstępy w pionie dla każdego widoku podrzędnego będą pochodzić z punktu odniesienia.
  • Marginesy układu Względne — umieszcza podpoglądy względem standardowych marginesów układu.

Podczas pracy z widokiem stosu można traktować wyrównanie jako lokalizację X i Y widoku podrzędnego oraz Rozkład jako Wysokość i Szerokość.

Ważne

UIStackView jest projektowany jako widok kontenera bez renderowania i w związku z tym nie jest rysowany na kanwie, podobnie jak inne podklasy UIView. Dlatego ustawienie właściwości, takich jak BackgroundColor lub przesłanianie DrawRect , nie będzie miało żadnego efektu wizualnego.

Kontynuuj układ interfejsu aplikacji, dodając etykietę, element ImageView, dwa przyciski i widok stosu poziomego, aby był podobny do następującego:

Układanie interfejsu użytkownika widoku stosu

Skonfiguruj widok stosu poziomego przy użyciu następujących opcji:

Konfigurowanie opcji widoku stosu poziomego

Ponieważ nie chcemy, aby ikona reprezentująca każdy "punkt" w klasyfikacji była rozciągnięta po dodaniu do widoku stosu poziomego, ustawiliśmy wyrównanie na Środek i Rozkład na Wypełnienie równe.

Na koniec podłącz następujące placówki i akcje:

Punkty i akcje widoku stosu

Wypełnianie elementu UIStackView z poziomu kodu

Wróć do Visual Studio dla komputerów Mac i edytuj plik ViewController.cs i dodaj następujący kod:

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

Przyjrzyjmy się szczegółowo kilku fragmentom tego kodu. Najpierw użyjemy if instrukcji , aby sprawdzić, czy nie ma więcej niż pięciu "gwiazdek" lub mniej niż zero.

Aby dodać nowy "gwiazda", załadujemy jego obraz i ustawimy jego tryb zawartości na Wartość Skaluj dopasowanie aspektu:

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

Spowoduje to zniekształcenie ikony "gwiazdki" po dodaniu jej do widoku stosu.

Następnie dodamy nową ikonę "gwiazdka" do kolekcji widoków stosu dla widoków podrzędnych:

RatingView.AddArrangedSubview(icon);

Zauważysz, że dodaliśmy element UIImageView do UIStackViewwłaściwości "s ArrangedSubviews ", a nie do SubViewobiektu . Każdy widok, który chcesz, aby widok stosu ArrangedSubviews mógł kontrolować jego układ, musi zostać dodany do właściwości .

Aby usunąć widok podrzędny z widoku stosu, najpierw pobierzemy widok podrzędny do usunięcia:

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

Następnie musimy usunąć go zarówno z ArrangedSubviews kolekcji, jak i z widoku super:

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

Usunięcie widoku podrzędnego ArrangedSubviews tylko z kolekcji powoduje usunięcie jej z kontrolki Widok stosu, ale nie powoduje usunięcia go z ekranu.

Testowanie interfejsu użytkownika

Po zainstalowaniu wszystkich wymaganych elementów interfejsu użytkownika i kodu można teraz uruchomić i przetestować interfejs. Po wyświetleniu interfejsu użytkownika wszystkie elementy w widoku stosu pionowego będą równomiernie rozmieszczone od góry do dołu.

Gdy użytkownik naciągnie przycisk Zwiększ ocenę , do ekranu zostanie dodana kolejna gwiazdka (maksymalnie 5):

Uruchamianie przykładowej aplikacji

Gwiazdki będą automatycznie wyśrodkowane i równomiernie rozłożone w widoku stosu poziomego. Gdy użytkownik naciągnie przycisk Zmniejsz ocenę , "gwiazdka" zostanie usunięta (dopóki żaden nie zostanie pozostawiony).

Szczegóły widoku stosu

Teraz, gdy mamy ogólne pojęcie o tym, czym jest kontrolka UIStackView i jak działa, przyjrzyjmy się bliżej niektórym jej funkcjom i szczegółom.

Klasy automatycznego układu i rozmiaru

Jak pokazano powyżej, gdy widok podrzędny jest dodawany do widoku stosu, jego układ jest całkowicie kontrolowany przez ten widok stosu przy użyciu klas automatycznego układu i rozmiaru w celu położenia i rozmiaru ułożone widoki.

Widok stosu przypnie pierwszy i ostatni widok podrzędny w swojej kolekcji do krawędzi pierwszych i dolnych widoków stosu pionowego lub lewy i prawy dla widoków stosu poziomego. Jeśli ustawisz LayoutMarginsRelativeArrangement właściwość na true, widok przypina podglądy do odpowiednich marginesów zamiast krawędzi.

Widok stosu używa właściwości widoku podrzędnego IntrinsicContentSize podczas obliczania rozmiaru widoków podrzędnych wzdłuż zdefiniowanej Axis wartości (z wyjątkiem elementu FillEqually Distribution). Zmienia FillEqually Distribution rozmiar wszystkich widoków podrzędnych tak, aby były takie same rozmiary, wypełniając widok stosu Axiswzdłuż obiektu .

Z wyjątkiem obiektu Fill Alignmentwidok stosu używa właściwości widoku IntrinsicContentSize podrzędnego do obliczania rozmiaru widoku prostopadłego do danego Axisobiektu . W przypadku elementu Fill Alignmentwszystkie podglądy mają rozmiar, tak aby wypełniały prostopadły widok stosu do danego Axisobiektu .

Pozycjonowanie i ustalanie rozmiaru widoku stosu

Widok stosu ma całkowitą kontrolę nad układem dowolnego widoku podrzędnego (na podstawie właściwości takich jak Axis i Distribution), ale nadal trzeba ustawić widok stosu (UIStackView) w widoku nadrzędnym przy użyciu klas automatycznego układu i rozmiaru.

Ogólnie rzecz biorąc, oznacza to przypinanie co najmniej dwóch krawędzi widoku stosu w celu rozwinięcia i zakontraktowania, co spowoduje zdefiniowanie jego położenia. Bez żadnych dodatkowych ograniczeń rozmiar widoku stosu zostanie automatycznie zmieniony tak, aby pasował do wszystkich jego widoków podrzędnych w następujący sposób:

  • Rozmiar wzdłuż tego Axis widoku będzie sumą wszystkich rozmiarów widoku podrzędnego oraz dowolnego miejsca zdefiniowanego między poszczególnymi widokami podrzędnymi.
  • LayoutMarginsRelativeArrangement Jeśli właściwość to true, rozmiar widoków stosu będzie również zawierać miejsce dla marginesów.
  • Rozmiar prostopadły do Axis obiektu zostanie ustawiony na największy podpogląd w kolekcji.

Ponadto można określić ograniczenia dotyczące wysokości i szerokości widoku stosu. W takim przypadku widoki podrzędne zostaną ułożone (rozmiar), aby wypełnić miejsce określone przez widok stosu zgodnie z właściwościami Distribution i Alignment .

BaselineRelativeArrangement Jeśli właściwość ma truewartość , podpoglądy zostaną ułożone na podstawie punktu odniesienia pierwszego lub ostatniego widoku podrzędnego, zamiast używać pozycji Górna, Dolna lub Środkowa- Y. Są one obliczane na zawartości widoku stosu w następujący sposób:

  • Widok stosu pionowego zwróci pierwszy widok podrzędny dla pierwszego punktu odniesienia i ostatni dla ostatniego. Jeśli jeden z tych widoków podrzędnych są widokami stosu, zostanie użyty pierwszy lub ostatni punkt odniesienia.
  • Widok stosu poziomego będzie używać najwyższego widoku podrzędnego zarówno dla pierwszego, jak i ostatniego punktu odniesienia. Jeśli najwyższy widok jest również widokiem stosu, będzie on używać najwyższego widoku podrzędnego jako punktu odniesienia.

Ważne

Wyrównanie wg planu bazowego nie działa w przypadku rozciągniętych lub skompresowanych rozmiarów podpoglądu, ponieważ punkt odniesienia zostanie obliczony na niewłaściwą pozycję. W przypadku wyrównania linii bazowej upewnij się, że wysokość widoku podrzędnego jest zgodna z wysokością wewnętrznego widoku zawartości.

Typowe zastosowania widoku stosu

Istnieje kilka typów układów, które działają dobrze z kontrolkami Widok stosu. Według Apple, oto kilka z bardziej typowych zastosowań:

  • Zdefiniuj rozmiar wzdłuż osi — przypinając obie krawędzie wzdłuż widoków Axis stosu i jedną z sąsiednich krawędzi, aby ustawić tę pozycję, widok stosu będzie rosnąć wzdłuż osi, aby dopasować przestrzeń zdefiniowaną przez jego podglądy.
  • Zdefiniuj położenie widoku podrzędnego — przypinając do sąsiednich krawędzi widoku stosu do widoku nadrzędnego, widok stosu będzie rosnąć w obu wymiarach, aby dopasować go do widoków podrzędnych.
  • Zdefiniuj rozmiar i położenie stosu — przypinając wszystkie cztery krawędzie widoku stosu do widoku nadrzędnego, widok stosu rozmieszcza podglądy na podstawie przestrzeni zdefiniowanej w widoku stosu.
  • Zdefiniuj oś Rozmiar prostopadły — przypinając obie krawędzie prostopadłe do widoków Axis stosu i jedną z krawędzi wzdłuż osi, aby ustawić położenie, widok stosu będzie rosnąć prostopadle do osi, aby dopasować przestrzeń zdefiniowaną przez jego podglądy.

Zarządzanie wyglądem

Element UIStackView jest zaprojektowany jako widok kontenera bez renderowania i w związku z tym nie jest rysowany na kanwie, podobnie jak inne podklasy UIView. Ustawienie właściwości, takich jak BackgroundColor lub zastąpienie DrawRect , nie będzie miało żadnego efektu wizualnego.

Istnieje kilka właściwości kontrolujących sposób rozmieszczania kolekcji widoków podrzędnych w widoku stosu:

  • Oś — określa, czy widok stosu rozmieści podpoglądy w poziomie lub w pionie.
  • Wyrównanie — określa sposób wyrównania widoków podrzędnych w widoku stosu.
  • Dystrybucja — określa rozmiar podpoglądów w widoku stosu.
  • Odstępy — steruje minimalnym odstępem między każdym widokiem podrzędnym w widoku stosu.
  • Względny punkt odniesienia — jeśli trueodstęp pionowy dla każdego widoku podrzędnego będzie pochodzić z punktu odniesienia.
  • Marginesy układu Względne — umieszcza podpoglądy względem standardowych marginesów układu.

Zazwyczaj użyjesz widoku stosu, aby rozmieścić niewielką liczbę widoków podrzędnych. Bardziej złożone interfejsy użytkownika można tworzyć, zagnieżdżając jeden lub więcej widoków stosu wewnątrz siebie (tak jak w powyższym przewodniku Szybki start UIStackView).

Możesz dodatkowo dostosować wygląd interfejsów użytkownika, dodając dodatkowe ograniczenia do widoków podrzędnych (na przykład w celu kontrolowania wysokości lub szerokości). Należy jednak pamiętać, aby nie uwzględniać ograniczeń powodujących konflikt do tych, które zostały wprowadzone przez sam widok stosu.

Utrzymywanie uporządkowanych widoków i spójności widoków podrzędnych

Widok stosu zapewni, że jego ArrangedSubviews właściwość jest zawsze podzbiorem jego Subviews właściwości przy użyciu następujących reguł:

  • Jeśli do kolekcji zostanie dodany ArrangedSubviews widok podrzędny, zostanie on automatycznie dodany do Subviews kolekcji (chyba że jest już częścią tej kolekcji).
  • Jeśli widok podrzędny zostanie usunięty z Subviews kolekcji (usunięty z wyświetlania), zostanie również usunięty z kolekcji ArrangedSubviews .
  • Usunięcie widoku podrzędnego ArrangedSubviews z kolekcji nie powoduje usunięcia go z kolekcji Subviews . Tak więc nie będzie już układany przez widok stosu, ale nadal będzie widoczny na ekranie.

Kolekcja ArrangedSubviews jest zawsze podzbiorem Subview kolekcji, jednak kolejność poszczególnych widoków podrzędnych w każdej kolekcji jest oddzielna i kontrolowana przez następujące elementy:

  • Kolejność widoków podrzędnych w ArrangedSubviews kolekcji określa ich kolejność wyświetlania w stosie.
  • Kolejność widoków podrzędnych w Subview kolekcji określa ich kolejność Z (lub warstwy) w widoku z powrotem do przodu.

Dynamiczne zmienianie zawartości

Widok stosu automatycznie dostosuje układ widoków podrzędnych za każdym razem, gdy widok podrzędny zostanie dodany, usunięty lub ukryty. Układ zostanie również dostosowany, jeśli dowolna właściwość widoku stosu zostanie dopasowana (na przykład Axis).

Zmiany układu można animować, umieszczając je w bloku animacji, na przykład:

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

Wiele właściwości widoku stosu można określić przy użyciu klas rozmiarów w scenorysie. Te właściwości będą automatycznie animowane w odpowiedzi na zmiany rozmiaru lub orientacji.

Podsumowanie

W tym artykule omówiono nową UIStackView kontrolkę (dla systemu iOS 9) do zarządzania zestawem widoków podrzędnych w stosie poziomym lub pionowo rozmieszczonym w aplikacji platformy Xamarin.iOS. Zaczęło się od prostego przykładu użycia widoków stosu do utworzenia interfejsu użytkownika i zakończyło się bardziej szczegółowym spojrzeniem na widoki stosu i ich właściwości i funkcje.