Opcje układu na platformie Xamarin.iOS
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:
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:
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:
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:
Te zrzuty ekranu pokazują, jak kontrolki zmieniają rozmiar lub położenie siebie po obróceniu ekranu:
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).