Udostępnij za pośrednictwem

Ograniczenia układu programowego w środowisku Xamarin.iOS

  • Artykuł

Ten przewodnik przedstawia pracę z ograniczeniami automatycznego układu systemu iOS w kodzie języka C# zamiast tworzenia ich w projektancie systemu iOS.

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.

Zazwyczaj podczas pracy z automatycznym układem w systemie iOS użyjesz konstruktora interfejsu Xcode do graficznego umieszczenia ograniczeń układu na elementach interfejsu użytkownika. Może jednak wystąpić potrzeba utworzenia i zastosowania ograniczeń w kodzie języka C#. Na przykład w przypadku używania dynamicznie utworzonych elementów interfejsu użytkownika dodanych do elementu UIView.

W tym przewodniku pokazano, jak utworzyć i pracować z ograniczeniami przy użyciu kodu języka C# zamiast tworzyć je graficznie w narzędziu Interface Builder programu Xcode.

Programowe tworzenie ograniczeń

Jak wspomniano powyżej, zazwyczaj będziesz pracować z ograniczeniami automatycznego układu w projektancie systemu iOS. W tych czasach musisz programowo utworzyć ograniczenia, masz trzy opcje do wyboru:

  • Kotwice układu — ten interfejs API zapewnia dostęp do właściwości kotwicy (takich jak TopAnchor, BottomAnchor lub HeightAnchor) ograniczonych elementów interfejsu użytkownika.
  • Ograniczenia układu — ograniczenia można tworzyć bezpośrednio przy użyciu NSLayoutConstraint klasy .
  • Język formatowania wizualnego — udostępnia grafikę ASCII, na przykład metodę definiowania ograniczeń.

W poniższych sekcjach szczegółowo omówimy każdą opcję.

Kotwice układu

Korzystając z NSLayoutAnchor klasy, masz płynny interfejs do tworzenia ograniczeń na podstawie właściwości kotwicy elementów interfejsu użytkownika, które są ograniczone. Na przykład prowadnice układu górnego i dolnego kontrolera widoku uwidacznia TopAnchorwłaściwości , BottomAnchor i HeightAnchor kotwicy, gdy widok uwidacznia właściwości krawędzi, środka, rozmiaru i punktu odniesienia.

Ważne

Oprócz standardowego zestawu właściwości kotwicy widoki systemu iOS zawierają LayoutMarginsGuides również właściwości i ReadableContentGuide . Te właściwości uwidaczniają UILayoutGuide obiekty do pracy z marginesami widoku i czytelnymi przewodnikami zawartości odpowiednio.

Zakotwiczenia układu zapewniają kilka metod tworzenia ograniczeń w łatwym do odczytania, kompaktowym formacie:

  • ConstraintEqualTo — definiuje relację, w której first attribute = second attribute + [constant] opcjonalnie podano constant wartość przesunięcia.
  • ConstraintGreaterThanOrEqualTo — definiuje relację z first attribute >= second attribute + [constant] opcjonalną podaną constant wartością przesunięcia.
  • ConstraintLessThanOrEqualTo — definiuje relację z first attribute <= second attribute + [constant] opcjonalną wartością constant przesunięcia.

Na przykład:

// Get the parent view's layout
var margins = View.LayoutMarginsGuide;

// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;

// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;

// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);

Typowe ograniczenie układu można wyrazić po prostu jako wyrażenie liniowe. Spójrz na następujący przykład:

Ograniczenie układu wyrażone jako wyrażenie liniowe

Które byłyby konwertowane na następujący wiersz kodu języka C# przy użyciu kotwic układu:

PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;

Gdzie części kodu języka C# odpowiadają danym częściom równania w następujący sposób:

Równanie Kod
Element 1 PurpleView
Atrybut 1 LeadingAnchor
Relacja ConstraintEqualTo
Mnożnik Wartość domyślna to 1.0, więc nie została określona
Element 2 OrangeView
Atrybut 2 TrailingAnchor
Stała 10,0

Oprócz podawania tylko parametrów wymaganych do rozwiązania danego równania ograniczenia układu każda z metod zakotwiczenia układu wymusza bezpieczeństwo typu przekazanych do nich parametrów. Dlatego zakotwiczenia ograniczeń poziomych, takich jak LeadingAnchor lub TrailingAnchor mogą być używane tylko z innymi typami kotwic poziomych i mnożnikami, są udostępniane tylko do ograniczeń rozmiaru.

Ograniczenia układu

Ograniczenia automatycznego układu można dodać ręcznie, tworząc NSLayoutConstraint bezpośrednio element w kodzie języka C#. W przeciwieństwie do używania kotwic układu należy określić wartość dla każdego parametru, nawet jeśli nie będzie mieć wpływu na definiowane ograniczenie. W rezultacie będziesz produkować znaczną ilość trudnych do odczytania, standardowy kod. Na przykład:

//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;

//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;

//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;

NSLayoutAttribute Gdzie wyliczenie definiuje wartość marginesów widoku i odpowiada LayoutMarginsGuide właściwościom takim jak Left, RightTop i, a NSLayoutRelation Bottom wyliczenie definiuje relację, która zostanie utworzona między danym atrybutem jako Equal, LessThanOrEqual lub GreaterThanOrEqual.

W przeciwieństwie do interfejsu API NSLayoutConstraint zakotwiczenia układu metody tworzenia nie podkreślają ważnych aspektów określonego ograniczenia i nie ma żadnych testów czasu kompilacji wykonywanych w ograniczeniu. W związku z tym łatwo jest skonstruować nieprawidłowe ograniczenie, które zgłosi wyjątek w czasie wykonywania.

Język formatowania wizualizacji

Język formatu wizualnego umożliwia definiowanie ograniczeń przy użyciu grafiki ASCII, takich jak ciągi, które zapewniają wizualną reprezentację tworzonego ograniczenia. Ma to następujące zalety i wady:

  • Język formatu wizualnego wymusza tworzenie tylko prawidłowych ograniczeń.
  • Automatyczne układy wyjściowe ograniczeń do konsoli przy użyciu języka visual format, dzięki czemu komunikaty debugowania będą przypominać kod użyty do utworzenia ograniczenia.
  • Język formatu wizualnego umożliwia tworzenie wielu ograniczeń jednocześnie przy użyciu bardzo kompaktowego wyrażenia.
  • Ponieważ nie ma walidacji ciągów języka formatu wizualnego po stronie kompilacji, problemy można odnaleźć tylko w czasie wykonywania.
  • Ponieważ język formatu wizualnego podkreśla wizualizację nad kompletnością niektórych typów ograniczeń, nie można ich utworzyć (na przykład współczynników).

Aby utworzyć ograniczenie, należy wykonać następujące kroki w przypadku używania języka formatowania wizualnego:

  1. Utwórz obiekt NSDictionary zawierający obiekty Widok i prowadnice układu oraz klucz ciągu, który będzie używany podczas definiowania formatów.
  2. Opcjonalnie utwórz element NSDictionary definiujący zestaw kluczy i wartości (NSNumber) używany jako wartość stała dla ograniczenia.
  3. Utwórz ciąg formatu w celu układu pojedynczej kolumny lub wiersza elementów.
  4. Wywołaj metodę FromVisualFormat klasy, NSLayoutConstraint aby wygenerować ograniczenia.
  5. Wywołaj metodę ActivateConstraints NSLayoutConstraint klasy , aby aktywować i zastosować ograniczenia.

Aby na przykład utworzyć ograniczenie wiodące i końcowe w języku Visual Format Language, można użyć następujących elementów:

// Get views being constrained
var views = new NSMutableDictionary (); 
views.Add (new NSString ("orangeView"), OrangeView);

// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);

// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);

Ponieważ język formatu wizualnego zawsze tworzy ograniczenia zerowe punktów dołączone do marginesów widoku nadrzędnego podczas korzystania z domyślnego odstępu, ten kod generuje identyczne wyniki do przedstawionych powyżej przykładów.

W przypadku bardziej złożonych projektów interfejsu użytkownika, takich jak wiele widoków podrzędnych w jednym wierszu, język formatu wizualnego określa zarówno odstępy poziome, jak i wyrównanie w pionie. Tak jak w powyższym przykładzie, w którym określa AlignAllTop NSLayoutFormatOptions on wyrównanie wszystkich widoków w wierszu lub kolumnie do ich gór.

Zobacz Dodatek języka Visual Format firmy Apple, aby zapoznać się z przykładami określania typowych ograniczeń i gramatyki ciągów formatu wizualnego.

Podsumowanie

W tym przewodniku przedstawiono tworzenie i pracę z ograniczeniami automatycznego układu w języku C# w przeciwieństwie do tworzenia ich graficznie w projektancie systemu iOS. Najpierw przyjrzeliśmy się używaniu kotwic układu (NSLayoutAnchor) do obsługi automatycznego układu. Następnie pokazano, jak pracować z ograniczeniami układu (NSLayoutConstraint). Na koniec przedstawiono go przy użyciu języka formatu wizualnego dla automatycznego układu.