Skocz do zawartości
Coders Lab

Constraint Layoutu - podstawowe informacje

    Rekomendowane odpowiedzi

    Słów kilka na temat Constraint Layoutu…

    Dziś pokażę Wam dlaczego Constraint Layout jest cudowny ;) Nie jest to zdecydowanie “lekki” layout, jednak daje potężne możliwości. Bez zbędnego przedłużania przejdźmy do rzeczy.

    Jak pozycjonujemy elementy?

    Layout ten wprowadza zupełnie nowe podejście do pozycjonowania elementów. Dostajemy możliwość podczepienia każdej z krawędzi naszego widoku to jednej z dwóch krawędzi drugiego dowolnego widoku, np. “layout_constraintTop_toBottomOf“ oznacza ustaw moją górną krawędź do dolnej krawędzi tego widoku. Do dyspozycji mamy 8 formuł z tym związanych:

    • layout_constraintTop_toBottomOf
    • layout_constraintBottom_toBottomOf
    • layout_constraintBottom_toTopOf
    • layout_constraintTop_toTopOf
    • layout_constraintStart_toStartOf
    • layout_constraintStart_toEndOf
    • layout_constraintEnd_toEndOf
    • layout_constraintEnd_toStartOf

    Kolejnym, nowym i zarazem bardzo ciekawym elementem jest guideline. Funkcjonalność ta pozwala na ustawienie linii odniesienia do pozycjonowania pozostałych widoków. Może zostać ustawiona procentowo lub na konkretną wartość.

    W layoucie tym nie zalecane jest używanie match_parent, zamiast tego powinniśmy ustawiać wielkość na 0dp, ponieważ wtedy zaczynają dopiero poprawnie pracować nasze połączenia.

    A co jeśli chcę aby elementy zajmowały tyle samo miejsca?

    Możemy to bardzo prosto osiągnąć dzięki mechanice “chain”. To jest właśnie to za co ja kocham ten layout. Poniżej wklejam obrazek, który pokazuje jakie mamy możliwości.

    constraint-chain-styles_2x.png

    Spread - to domyślna opcja, aby ją osiągnąć wystarczy ustawić, że skrajne widoki są podpięte do rodzica (layout_constraintStart_toStartOf=”parent” i layout_constraintEnd_toEndOf=”parent”, analogicznie postępujemy w pionie), a widoczki pomiędzy są podpięte ze sobą wzajemnie (czyli każdy z każdym).

    Spread inside - aby to osiągnąć musimy połączyć ze sobą elementy jak we wcześniejszym przypadku, dodatkowo jednak musimy dodać app:layout_constraintHorizontal_chainStyle="spread_inside" (lub app:layout_constraintVertical_chainStyle="spread_inside" jeśli chodzi nam o pion)

    Weighted - aby to osiągnąć musisz ustawić wielkości Twoich widoków na 0dp, dodatkowo możesz manipulować wielkością po przez parametry layout_constraintHorizontal_weight oraz layout_constraintVertical_weight

    Packed - aby to osiągnąć ustaw app:layout_constraintHorizontal_chainStyle="packed" (lub app:layout_constraintVertical_chainStyle="packed" jeśli chodzi nam o pion)

    Coś jeszcze?

    Tak! Bariery, czyli blokady jakie możesz ustawiać dla swoich widoków - nie znalazłem jeszcze dla tego praktycznego użycia, jeśli Ty takie masz zaskocz mnie i napisz to pod tym artykułem.

    Przestrzenie (Space), czyli sposób na dodanie wolnej przestrzeni między widokami bez robienia hacka z przeźroczystym widokiem.

    To wszystko na dzisiaj! Dajcie znać czy Wam się podobało i czy chcecie więcej tego typu artykułów. Jeśli macie jakieś konkretne tematy na myśli to koniecznie zapiszcie je pod tym artykułem, a postaram się je zrealizować w pierwszej kolejności.

    Specjalnie dla Android.com.pl

    Łukasz Bednarczyk

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

    Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

    Zarejestruj nowe konto

    Załóż nowe konto. To bardzo proste!

    Zarejestruj się

    Zaloguj się

    Posiadasz już konto? Zaloguj się poniżej.

    Zaloguj się

    • Przeglądający   0 użytkowników

      Brak zarejestrowanych użytkowników przeglądających tę stronę.