Automatyczne układ przy użyciu Projektant platformy Xamarin dla systemu iOS

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.

Układ automatyczny (nazywany również "układem adaptacyjnym") to elastyczne podejście projektowe. W przeciwieństwie do systemu układów przejściowych, w którym lokalizacja każdego elementu jest zakodowana do punktu na ekranie, układ automatyczny dotyczy relacji — położenia elementów względem innych elementów na powierzchni projektowej. Głównym elementem układu automatycznego jest idea ograniczeń lub reguł, które definiują umieszczanie elementu lub zestawu elementów w kontekście innych elementów na ekranie. Ponieważ elementy nie są powiązane z określoną pozycją na ekranie, ograniczenia pomagają utworzyć układ adaptacyjny, który wygląda dobrze na różnych rozmiarach ekranu i orientacjach urządzenia.

W tym przewodniku wprowadzamy ograniczenia i sposób pracy z nimi w Projektant platformy Xamarin dla systemu iOS. Ten przewodnik nie obejmuje pracy z ograniczeniami programowo. Aby uzyskać informacje na temat programowego używania automatycznego układu, zapoznaj się z dokumentacją firmy Apple.

Wymagania

Program Xamarin Projektant dla systemu iOS jest dostępny w Visual Studio dla komputerów Mac w programie Visual Studio 2017 i nowszych wersjach systemu Windows.

W tym przewodniku przyjęto założenie, że znajomość składników Projektant z przewodnika Wprowadzenie do systemu iOS Projektant.

Wprowadzenie do ograniczeń

Ograniczenie to matematyczna reprezentacja relacji między dwoma elementami na ekranie. Reprezentowanie pozycji elementu interfejsu użytkownika jako relacji matematycznej rozwiązuje kilka problemów związanych z twardym kodowaniem lokalizacji elementu interfejsu użytkownika. Jeśli na przykład umieścimy przycisk 20 pikseli w dolnej części ekranu w trybie pionowym, pozycja przycisku będzie wyłączona z ekranu w trybie poziomym. Aby tego uniknąć, możemy ustawić ograniczenie, które umieszcza dolną krawędź przycisku 20px w dolnej części widoku. Położenie krawędzi przycisku zostanie wtedy obliczone jako button.bottom = view.bottom - 20px, co spowoduje umieszczenie przycisku 20px w dolnej części widoku zarówno w trybie pionowym, jak i poziomym. Możliwość obliczania umieszczania na podstawie relacji matematycznej jest tym, co sprawia, że ograniczenia są tak przydatne w projekcie interfejsu użytkownika.

Po ustawieniu ograniczenia tworzymy NSLayoutConstraint obiekt, który przyjmuje jako argumenty, które mają być ograniczone, a właściwości lub atrybuty, na które będzie działać ograniczenie. W projektancie systemu iOS atrybuty obejmują krawędzie, takie jak lewa, prawa, górna i dolna część elementu. Obejmują one również atrybuty rozmiaru, takie jak wysokość i szerokość, oraz lokalizację punktu środkowego, środekX i środekY. Jeśli na przykład dodamy ograniczenie na pozycji lewej granicy dwóch przycisków, Projektant generuje następujący kod pod okładkami:

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

W następnej sekcji opisano pracę z ograniczeniami przy użyciu Projektant systemu iOS, w tym włączanie i wyłączanie automatycznego układu oraz korzystanie z paska narzędzi ograniczeń.

Włącz układ automatyczny

Domyślna konfiguracja Projektant systemu iOS ma włączony tryb ograniczenia. Jeśli jednak musisz ją włączyć lub wyłączyć ręcznie, możesz to zrobić w dwóch krokach:

1. Kliknij puste miejsce na powierzchni projektowej. Spowoduje to usunięcie zaznaczenia wszystkich elementów i wyświetlenie właściwości dokumentu Scenorysu.

2. Zaznacz lub usuń zaznaczenie pola wyboru Użyj autoukładki w panelu właściwości:

   

Domyślnie żadne ograniczenia nie są tworzone ani widoczne na powierzchni. Zamiast tego są one automatycznie wnioskowane z informacji ramek w czasie kompilacji. Aby dodać ograniczenia, musimy wybrać element na powierzchni projektowej i dodać do niego ograniczenia. Możemy to zrobić przy użyciu paska narzędzi ograniczeń.

Pasek narzędzi ograniczeń

Pasek narzędzi ograniczeń został zaktualizowany i teraz składa się z dwóch głównych części:

• Przełącznik trybu ograniczeń: wcześniej wprowadzono tryb ograniczeń, klikając ponownie wybrany widok na powierzchni projektowej. Teraz należy użyć tego przycisku przełącznika na pasku ograniczeń:

  

• Przycisk "Aktualizuj ograniczenia": należy pamiętać, że zmiany są zmieniane w zależności od tego, czy w trybie edycji ograniczeń.

  • W trybie edycji ograniczeń ten przycisk dostosowuje ograniczenia, aby pasować do ramki elementu.
  • W trybie edycji ramki ten przycisk dostosowuje ramkę elementu, aby dopasować położenie, w których są definiowane ograniczenia.

Edytowanie ograniczeń — menu podręczne

Okno podręczne edytora ograniczeń umożliwia dodawanie i aktualizowanie wielu ograniczeń jednocześnie dla widoku wyboru. Możemy utworzyć wiele ograniczeń odstępów, proporcji i wyrównania, takich jak wyrównanie widoku do lewej krawędzi dwóch widoków.

Aby edytować ograniczenia dotyczące wybranego widoku, kliknij wielokropek, aby wyświetlić okno podręczne:

Po otwarciu okna podręcznego ograniczeń zostaną wyświetlone wszelkie wstępne ograniczenia w widoku. Możemy ustawić wszystkie ograniczenia odstępów, wybierając pozycję Wszystkie strony w polu kombi w prawym górnym rogu, a następnie wybrać pozycję Wyczyść wszystko , aby je usunąć.

W ustawi szerokość, a H ustawi ograniczenie wysokości. Po sprawdzeniu współczynnika proporcji wysokość i szerokość widoków będą kontrolowane na różnych rozmiarach ekranu, szerokość widoku jest używana jako licznik dla racji, a wysokość jako mianownik.

Cztery pola kombi dotyczące ograniczeń odstępów zawierają listę sąsiednich widoków w celu zakotwiczenia ograniczenia

Edytowanie ograniczeń opartych na powierzchni

Aby uzyskać bardziej precyzyjne ograniczenie edycji, możemy wchodzić w interakcje z ograniczeniami bezpośrednio na powierzchni projektowej. W tej sekcji przedstawiono podstawy edytowania ograniczeń opartych na powierzchni, w tym kontrolki odstępów pin, obszary upuszczania i pracę z różnymi typami ograniczeń.

Tworzenie ograniczeń

Narzędzie Projektant systemu iOS oferuje dwa typy kontrolek do manipulowania elementami na powierzchni projektowej. Przeciąganie kontrolek i kontrolek odstępów pin, jak pokazano na poniższej ilustracji:

Są one przełączane, wybierając przycisk tryb ograniczeń na pasku ograniczeń.

4 Uchwyty w kształcie T po każdej stronie elementu definiują górne, prawe, dolne i lewe krawędzie elementu dla ograniczenia. Dwa uchwyty w kształcie we/wy po prawej i dolnej części elementu definiują odpowiednio ograniczenie wysokości i szerokości . Środkowy kwadrat obsługuje ograniczenia centerX i centerY .

Aby utworzyć ograniczenie, wybierz uchwyt i przeciągnij go gdzieś na powierzchni projektowej. Po rozpoczęciu przeciągania na powierzchni zostanie wyświetlona seria zielonych linii/pól z informacją o tym, co można ograniczyć. Na przykład na poniższym zrzucie ekranu ograniczamy górną stronę środkowego przycisku:

Zwróć uwagę na trzy kreskowane zielone linie na pozostałych dwóch przyciskach. Zielone linie wskazują obszary upuszczania lub atrybuty innych elementów, do których możemy ograniczyć. Na powyższym zrzucie ekranu pozostałe dwa przyciski oferują 3 pionowe obszary upuszczania ( dolne, środkowe, górne), aby ograniczyć nasz przycisk. Kreskowana zielona linia w górnej części widoku oznacza, że kontroler widoku oferuje ograniczenie w górnej części widoku, a stałe zielone pole oznacza, że kontroler widoku oferuje ograniczenie poniżej górnego przewodnika układu.

Ważne

Prowadnice układu to specjalne typy elementów docelowych ograniczeń, które umożliwiają tworzenie ograniczeń górnych i dolnych, które uwzględniają obecność pasków systemowych, takich jak paski stanu lub paski narzędzi. Jednym z głównych zastosowań jest posiadanie aplikacji zgodnej z systemem iOS 6 i iOS 7, ponieważ najnowsza wersja ma widok kontenera rozszerzający się poniżej paska stanu. Aby uzyskać więcej informacji na temat górnego przewodnika po układzie, zapoznaj się z dokumentacją firmy Apple.

W następnych trzech sekcjach przedstawiono pracę z różnymi typami ograniczeń.

Ograniczenia rozmiaru

Z ograniczeniami rozmiaru — wysokość i szerokość — masz dwie opcje. Pierwszą opcją jest przeciągnięcie uchwytu w celu ograniczenia do rozmiaru elementu sąsiada, jak pokazano w powyższym przykładzie. Drugą opcją jest dwukrotne kliknięcie uchwytu w celu utworzenia ograniczenia samodzielnego. Dzięki temu możemy określić stałą wartość rozmiaru, jak pokazano na poniższym zrzucie ekranu:

Ograniczenia centrum

Uchwyt kwadratowy utworzy ograniczenie centerX lub centerY , w zależności od kontekstu. Przeciągnięcie uchwytu kwadratowego spowoduje rozświetlenie innych elementów w celu zaoferowania zarówno pionowych, jak i poziomych obszarów upuszczania, jak pokazano na poniższym zrzucie ekranu:

Jeśli wybierzesz pionowy obszar upuszczania, zostanie utworzone ograniczenie centerY . W przypadku wybrania poziomego obszaru upuszczania ograniczenie będzie oparte na środkuX.

Ograniczenia złożone

Aby utworzyć ograniczenia równości wyrównania i rozmiaru między dwoma elementami, możesz wybrać elementy z górnego paska narzędzi, aby określić — w kolejności — wyrównanie w poziomie, wyrównanie w pionie i wyrównanie rozmiaru, jak pokazano na poniższym zrzucie ekranu:

Wizualizacja i edytowanie ograniczeń

Po dodaniu ograniczenia zostanie on wyświetlony na powierzchni projektowej jako niebieska linia po wybraniu elementu:

Ograniczenie można wybrać, klikając niebieską linię i edytując wartości ograniczeń bezpośrednio w panelu właściwości. Alternatywnie dwukrotne kliknięcie niebieskiej linii spowoduje wyświetlenie wyskakującego okienka umożliwiającego edytowanie wartości bezpośrednio na powierzchni projektowej:

Problemy z ograniczeniem

W przypadku korzystania z ograniczeń może wystąpić kilka typów problemów:

• Ograniczenia powodujące konflikt — dzieje się tak, gdy wiele ograniczeń wymusza, aby element miał wartości powodujące konflikt dla atrybutu, a aparat ograniczeń nie może ich uzgodnić.
• Elementy ograniczone — właściwości elementu (lokalizacja i rozmiar) muszą być całkowicie objęte zestawem ograniczeń i rozmiarów wewnętrznych, aby ograniczenia zostały prawidłowe. Jeśli te wartości są niejednoznaczne, mówi się, że element jest niedociągnięty.
• Błąd ramki — dzieje się tak, gdy ramka elementu i jego zestaw ograniczeń definiują dwa różne wynikowe prostokąty.

W tej sekcji opisano trzy problemy wymienione powyżej i przedstawiono szczegółowe informacje na temat sposobu ich obsługi.

Ograniczenia powodujące konflikt

Ograniczenia powodujące konflikty są oznaczone kolorem czerwonym i mają symbol ostrzeżenia. Umieszczenie kursora na symbolach ostrzegawczych powoduje wyświetlenie wyskakującego okienka z informacjami o konflikcie:

Elementy niedociągniętych

Elementy niedociągnione są wyświetlane w kolorze pomarańczowym i wyzwalają wygląd pomarańczowej ikony znacznika na pasku obiektu kontrolera widoku:

Jeśli klikniesz ikonę tego znacznika, możesz uzyskać informacje o niedociągniętych elementach w scenie i rozwiązać problemy przez ich całkowite ograniczenie lub usunięcie ich ograniczeń, jak pokazano na poniższym zrzucie ekranu:

Zagubionie ramki

Błąd ramki używa tego samego kodu koloru co niedociągniętych elementów. Element będzie zawsze renderowany na powierzchni przy użyciu jego natywnej ramki, ale w przypadku ramki zagnieżania czerwonego prostokąta będzie oznaczać, gdzie element skończy się po uruchomieniu aplikacji, jak pokazano na poniższym zrzucie ekranu:

Aby rozwiązać błędy ramki, wybierz przycisk Aktualizuj ramki na podstawie ograniczeń na pasku narzędzi ograniczeń (skrajnie po prawej stronie):

Spowoduje to automatyczne dostosowanie ramki elementu w celu dopasowania pozycji zdefiniowanych przez kontrolki.

Modyfikowanie ograniczeń w kodzie

Na podstawie wymagań aplikacji mogą wystąpić czasy, kiedy trzeba zmodyfikować ograniczenie w kodzie. Na przykład aby zmienić rozmiar lub zmienić położenie widoku ograniczenia, aby zmienić priorytet ograniczenia lub całkowicie dezaktywować ograniczenie.

Aby uzyskać dostęp do ograniczenia w kodzie, najpierw musisz go uwidocznić w Projektant systemu iOS, wykonując następujące czynności:

1. Utwórz ograniczenie jako normalne (przy użyciu dowolnej z metod wymienionych powyżej).

2. W Eksploratorze konspektu dokumentu znajdź odpowiednie ograniczenie i wybierz go:

   

3. Następnie przypisz nazwę do ograniczenia na karcie Widżet Eksploratora właściwości:

   

4. Zapisz zmiany.

Po wprowadzeniu powyższych zmian możesz uzyskać dostęp do ograniczenia w kodzie i zmodyfikować jego właściwości. Na przykład możesz użyć następującego polecenia, aby ustawić wysokość dołączonego widoku na zero:

ViewInfoHeight.Constant = 0;

Biorąc pod uwagę następujące ustawienie ograniczenia w Projektant systemu iOS:

Przekazywanie układu odroczonego

Zamiast natychmiast aktualizować dołączony widok w odpowiedzi na zmiany ograniczeń, aparat automatycznego układu planuje przekazywanie układu odroczonego dla najbliższej przyszłości. Podczas tego odroczonego przekazywania nie tylko dany ograniczenie widoku jest aktualizowany, ograniczenia dla każdego widoku w hierarchii są ponownie obliczane i aktualizowane w celu dostosowania dla nowego układu.

W dowolnym momencie możesz zaplanować własne przekazywanie układu odroczonego, wywołując SetNeedsLayout metody lub SetNeedsUpdateConstraints widoku nadrzędnego.

Przekazywanie układu odroczonego składa się z dwóch unikatowych przejść przez hierarchię widoku:

• Pass aktualizacji — w tym przekazaniu aparat automatycznego układu przechodzi przez hierarchię widoku i wywołuje metodę UpdateViewConstraints na wszystkich kontrolerach widoku i UpdateConstraints metodzie we wszystkich widokach.
• Przekazywanie układu — ponownie aparat automatycznego układu przechodzi przez hierarchię widoku, ale tym razem wywołuje ViewWillLayoutSubviews metodę na wszystkich kontrolerach widoku i LayoutSubviews metodzie we wszystkich widokach. Metoda LayoutSubviews aktualizuje Frame właściwość każdego widoku podrzędnego z prostokątem obliczanym przez aparat automatycznego układu.

Animowanie zmian ograniczeń

Oprócz modyfikowania właściwości ograniczeń można użyć animacji podstawowej, aby animować zmiany w ograniczeniach widoku. Na przykład:

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

Kluczem w tym miejscu jest wywoływanie LayoutIfNeeded metody widoku nadrzędnego wewnątrz bloku animacji. Dzięki temu widok ma narysować każdą "ramkę" animowanej lokalizacji lub zmiany rozmiaru. Bez tego wiersza widok po prostu przyciągnie do ostatecznej wersji bez animowania.

Podsumowanie

W tym przewodniku wprowadzono układ automatyczny systemu iOS (lub "adaptacyjny") oraz pojęcie ograniczeń jako matematyczne reprezentacje relacji między elementami na powierzchni projektowej. Opisano w nim sposób włączania automatycznego układu w projektancie systemu iOS, pracy z paskiem narzędzi Ograniczenia i edytowaniem ograniczeń indywidualnie na powierzchni projektowej. Następnie wyjaśniono, jak rozwiązywać trzy typowe problemy z ograniczeniami. Na koniec pokazano, jak modyfikować ograniczenia w kodzie.

Linki powiązane

• Wprowadzenie do scenorysów
• Przewodnik po kontrolkach z możliwością projektowania systemu iOS
• Omówienie Projektant systemu Android
• Ograniczenia programowe