Udostępnij za pośrednictwem


Podsumowanie rozdziału 14. Układ bezwzględny

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

Podobnie jak StackLayoutelement AbsoluteLayout , pochodzi z Layout<View> właściwości i dziedziczy Children jej właściwość. AbsoluteLayout implementuje system układu, który wymaga od programisty określenia pozycji jego elementów podrzędnych i, opcjonalnie, ich rozmiaru. Pozycja jest określana przez lewy górny róg elementu podrzędnego względem lewego górnego rogu AbsoluteLayout elementu w jednostkach niezależnych od urządzenia. AbsoluteLayout Implementuje również funkcję pozycjonowania proporcjonalnego i określania rozmiaru.

AbsoluteLayout należy traktować jako system układu specjalnego, który ma być używany tylko wtedy, gdy programista może nałożyć rozmiar na elementy podrzędne (na przykład BoxView elementy) lub gdy rozmiar elementu nie ma wpływu na pozycjonowanie innych elementów podrzędnych. Właściwości HorizontalOptions i VerticalOptions nie mają wpływu na elementy podrzędne elementu AbsoluteLayout.

W tym rozdziale przedstawiono również ważną funkcję dołączonych właściwości, które umożliwiają dołączanie właściwości zdefiniowanych w jednej klasie (w tym przypadku AbsoluteLayout) do innej klasy (element podrzędny klasy AbsoluteLayout).

AbsoluteLayout w kodzie

Można dodać element podrzędny do Children kolekcji AbsoluteLayout przy użyciu standardowej Add metody, ale AbsoluteLayout także udostępnia rozszerzoną Add metodę, która umożliwia określenie Rectangleelementu . Inna Add metoda wymaga tylko Pointelementu , w którym przypadku element podrzędny nie jest ograniczony i sam rozmiar.

Można utworzyć Rectangle wartość za pomocą konstruktora , który wymaga czterech wartości — pierwszych dwóch wskazujących położenie lewego górnego rogu elementu podrzędnego względem elementu nadrzędnego, a drugie dwa wskazujące rozmiar elementu podrzędnego. Możesz też użyć konstruktora, który wymaga wartości Point i Size .

Metody te Add przedstawiono w pliku AbsoluteDemo, który umieszcza BoxView elementy przy użyciu Rectangle wartości i Label element używający Point tylko wartości.

Przykład ChessboardFixed używa 32 BoxView elementów do utworzenia deseń szachownicy. Program nadaje elementom BoxView zakodowany na sztywno rozmiar 35 jednostek kwadratowych. Parametr AbsoluteLayout ma wartość HorizontalOptions i VerticalOptions ustawioną na LayoutOptions.Center, co powoduje AbsoluteLayout , że całkowity rozmiar wynosi 280 jednostek kwadratowych.

Dołączone właściwości możliwe do powiązania

Można również ustawić położenie i opcjonalnie rozmiar elementu podrzędnego elementu AbsoluteLayout podrzędnego po dodaniu go do Children kolekcji przy użyciu metody AbsoluteLayout.SetLayoutBoundsstatycznej . Pierwszym argumentem jest element podrzędny; drugi jest obiektem Rectangle . Można określić, że rozmiary podrzędne są same w poziomie i/lub w pionie, ustawiając wartości szerokości i wysokości na stałą AbsoluteLayout.AutoSize .

Przykład ChessboardDynamic umieszcza AbsoluteLayout element w ContentView programie obsługi, SizeChanged aby wywołać AbsoluteLayout.SetLayoutBounds wszystkie elementy podrzędne, aby były tak duże, jak to możliwe.

Dołączona właściwość powiązana, która AbsoluteLayout definiuje, jest statycznym polem typu BindableProperty tylko do odczytu o nazwie AbsoluteLayout.LayoutBoundsProperty. Metoda statyczna AbsoluteLayout.SetLayoutBounds jest implementowana przez wywołanie SetValue elementu podrzędnego za pomocą metody AbsoluteLayout.LayoutBoundsProperty. Element podrzędny zawiera słownik, w którym jest przechowywana dołączona właściwość powiązana i jego wartość. W układzie wartość można uzyskać, AbsoluteLayout wywołując AbsoluteLayout.GetLayoutBoundsmetodę , która jest implementowana za pomocą wywołania GetValue .

Ustalanie rozmiaru proporcjonalnego i pozycjonowanie

AbsoluteLayout implementuje funkcję proporcjonalnego określania rozmiaru i pozycjonowania. Klasa definiuje drugą dołączoną właściwość powiązaną, LayoutFlagsProperty, z powiązanymi metodami AbsoluteLayout.SetLayoutFlags statycznymi i AbsoluteLayout.GetLayoutFlags.

Argument to AbsoluteLayout.SetLayoutFlags i zwracana wartość elementu to wartość AbsoluteLayout.GetLayoutFlags typu AbsoluteLayoutFlags, wyliczenie z następującymi elementami członkowskimi:

Można je połączyć z operatorem OR bitowym języka C#.

Po ustawieniu tych flag niektóre właściwości Rectangle struktury granic układu używanej do pozycjonowania i rozmiaru elementu podrzędnego są interpretowane proporcjonalnie.

Po ustawieniu WidthProportional flagi wartość 1 oznacza, Width że element podrzędny ma taką samą szerokość jak .AbsoluteLayout Podobne podejście jest stosowane dla wysokości.

Rozmieszczenie proporcjonalne bierze pod uwagę rozmiar. Po ustawieniu XProportional X flagi właściwość Rectangle granic układu jest proporcjonalna. Wartość 0 oznacza, że lewa krawędź elementu podrzędnego jest umieszczona na lewej krawędzi AbsoluteLayoutobiektu , ale pozycja 1 oznacza, że prawa krawędź elementu podrzędnego jest umieszczona na prawej krawędzi obiektu , a nie poza prawą krawędzią AbsoluteLayoutobiektu AbsoluteLayout , jak można się spodziewać. Właściwość X 0,5 wyśrodkuje element podrzędny w poziomie w obiekcie AbsoluteLayout.

W przykładzie ChessboardProportional pokazano użycie proporcjonalnego określania rozmiaru i pozycjonowania.

Praca ze współrzędnymi proporcjonalnymi

Czasami łatwiej jest myśleć o proporcjonalnym pozycjonowaniu inaczej niż o tym, jak jest zaimplementowany w elemecie AbsoluteLayout. Wolisz pracować ze współrzędnymi proporcjonalnymi, gdzie X właściwość 1 umieszcza lewą krawędź elementu podrzędnego (a nie prawą krawędź) względem prawej krawędzi AbsoluteLayoutobiektu .

Ten alternatywny schemat pozycjonowania może być nazywany "współrzędnymi podrzędnymi ułamkowych". Współrzędnych ułamkowych podrzędnych można przekonwertować na granice układu wymagane do AbsoluteLayout użycia następujących formuł:

layoutBounds.X = (fractionalChildCoordinate.X / (1 — layoutBounds.Width))

layoutBounds.Y = (fractionalChildCoordinate.Y / (1 — layoutBounds.Height))

W przykładzie ProportionalCoordinateCalc pokazano to.

AbsoluteLayout i XAML

Można użyć elementu AbsoluteLayout w języku XAML i ustawić dołączone właściwości możliwe do powiązania dla elementów podrzędnych AbsoluteLayout przy użyciu wartości atrybutów AbsoluteLayout.LayoutBounds i AbsoluteLayout.LayoutFlags. Przedstawiono to w próbkach AbsoluteXamlDemo i ChessboardXaml. Ten ostatni program zawiera 32 BoxView elementy, ale używa niejawnego Style , który zawiera AbsoluteLayout.LayoutFlags właściwość , aby zachować znaczniki w dół do minimum.

Atrybut w języku XAML, który składa się z nazwy klasy, kropki i nazwy właściwości jest zawsze dołączoną powiązaną właściwością.

Nakładki

Możesz użyć AbsoluteLayout polecenia , aby utworzyć nakładkę, która obejmuje stronę z innymi kontrolkami, na przykład w celu ochrony użytkownika przed interakcją z normalnymi kontrolkami na stronie.

Przykład SimpleOverlay demonstruje tę technikę, a także demonstruje ProgressBarelement , który wyświetla zakres, w jakim program wykonał zadanie.

Trochę zabawy

Przykład DotMatrixClock wyświetla bieżący czas z symulowanym wyświetlaczem macierzy kropkowej 5x7. Każda kropka BoxView to (z nich jest 228) rozmiar i umieszczony na .AbsoluteLayout

Potrójny zrzut ekranu przedstawiający zegar macierzy kropkowej

Program BouncingText animuje dwa Label obiekty, aby odbijać się w poziomie i pionowo na ekranie.