Opcje układu na platformie Xamarin.iOS

  • Artykuł

Istnieją dwa różne mechanizmy kontrolowania układu w przypadku zmiany rozmiaru lub rotacji widoku:

  • Autoskalowanie — inspektor automatycznego określania rozmiaru AutoresizingMask w projektancie umożliwia ustawienie właściwości. Pozwoli to zakotwiczyć kontrolkę na krawędziach kontenera i/lub poprawić ich rozmiar. Autoskalowanie działa we wszystkich wersjach systemu iOS. Opisano to bardziej szczegółowo poniżej
  • Układ automatyczny — funkcja wprowadzona w systemie iOS 6, która umożliwia precyzyjną kontrolę nad relacjami kontrolek interfejsu użytkownika. Umożliwi to sterowanie położeniami elementów względem innych elementów na powierzchni projektowej. Ten temat został szczegółowo omówiony w przewodniku Auto Layout with the Xamarin iOS Projektant guide (Układ automatyczny za pomocą Projektant platformy Xamarin dla systemu iOS).

Autodopasowanie rozmiaru

Gdy użytkownik zmieni rozmiar okna, na przykład gdy urządzenie zostanie obrócone, a orientacja zmieni się, system automatycznie zmieni rozmiar widoków w tym oknie zgodnie z regułami automatycznego określania rozmiaru. Te reguły można ustawić w języku C# przy użyciu AutoresizingMask właściwości UIView lub w okienku właściwości systemu iOS Projektant, jak pokazano poniżej:

Screenshot shows the Properties Pad of the I O S designer.

Po wybraniu kontrolki można ręcznie określić lokalizację i wymiary kontrolki, a także wybrać zachowanie autoskalowania . Jak pokazano na poniższym zrzucie ekranu, możemy użyć sprężyn i struts w kontrolce autoskalowania, aby zdefiniować relację wybranego widoku z elementem nadrzędnym:

Screenshot shows the Autosizing control in the Properties Pad of the I O S designer.

Dostosowanie sprężyny spowoduje zmianę rozmiaru widoku na podstawie szerokości lub wysokości widoku nadrzędnego. Dostosowanie strut sprawi, że widok będzie utrzymywać stałą odległość między samym widokiem a widokiem nadrzędnym, na tej konkretnej krawędzi.

Te ustawienia można również ustawić w kodzie:

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

Aby przetestować ustawienia automatycznego określania rozmiaru, włącz różne obsługiwane orientacje urządzeń w opcjach projektu:

Autosizing Settings

W kodzie za pomocą poniższego kodu możemy użyć następującego kodu, co powoduje zmianę rozmiaru dwóch kontrolek tekstu w poziomie:

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

Możemy również dostosować kontrolki przy użyciu Projektant. Wybranie strutów, jak pokazano poniżej, spowoduje, że obraz pozostanie wyrównany do prawej, bez przycinania dolnej części widoku:

Screenshot shows the Autosizing control with left and bottom selected.

Te zrzuty ekranu pokazują, jak kontrolki zmieniają rozmiar lub położenie siebie po obróceniu ekranu:

Screenshot show a mobile device display in portrait and landscape with text and graphic adjusted.

Zwróć uwagę, że zarówno widok tekstu, jak i pole tekstowe rozciągają się, aby zachować te same lewe i prawe marginesy ze względu na FlexibleWidth ustawienie. Obraz ma elastyczny górny i lewy margines, co oznacza, że zachowuje dolne i prawe marginesy — zachowując obraz w widoku po obróceniu ekranu. Złożone układy zwykle wymagają kombinacji tych ustawień dla każdej widocznej kontrolki, aby zachować spójność interfejsu użytkownika i zapobiec nakładaniu się kontrolek podczas zmiany granic widoku (ze względu na rotację lub inne zdarzenie zmiany rozmiaru).