Material Design wprowadza podwyższenie wysokości elementów interfejsu. Wysokość względna pomaga użytkownikom zrozumieć względne znaczenie każdego elementu i skupić uwagę na bieżącym zadaniu.
Wysokość widoku reprezentowana przez właściwość Z określa wygląd cienia. W widokach o wyższych wartościach Z cienie są większe i mniej rzucające się w oczy oraz zasłaniają widoki o niższych wartościach Z. Jednak wartość Z widoku nie wpływa na jego rozmiar.
Cienie są rysowane przez element nadrzędny widoku podwyższonego. Podlegają standardowym przycinaniu i domyślnie są przycinane przez wydawcę nadrzędnego.
Wysokość przydaje się też do tworzenia animacji, w których widżety tymczasowo wyświetlają się nad płaszczyzną widoku podczas wykonywania czynności.
Więcej informacji znajdziesz w artykule o wzroście wysokości w interfejsie Material Design.
Przypisz wysokość do widoków
Wartość Z widoku składa się z 2 komponentów:
- Wzniesienie: komponent statyczny
- Tłumaczenie: komponent dynamiczny używany w animacjach.
Z = elevation + translationZ
Wartości Z są mierzone w dp (pikselach niezależnych od gęstości).
Aby ustawić domyślną (spoczynkową) wysokość widoku, użyj atrybutu android:elevation w układzie XML. Aby ustawić wysokość widoku w kodzie aktywności, użyj metody View.setElevation().
Aby ustawić tłumaczenie widoku, użyj metody View.setTranslationZ().
Metody
ViewPropertyAnimator.z()
i
ViewPropertyAnimator.translationZ()
umożliwiają animowanie wysokości wyświetleń. Więcej informacji znajdziesz w dokumentacji interfejsu API ViewPropertyAnimator i przewodniku dla programistów dotyczącym animacji właściwości.
Możesz też użyć właściwości StateListAnimator, aby określić te animacje w sposób deklaratywny. Jest to szczególnie przydatne w przypadkach, gdy zmiana stanu powoduje uruchomienie animacji, np. kliknięcie przycisku przez użytkownika.
Więcej informacji znajdziesz w artykule o animowaniu zmian stanu widoku za pomocą StateListAnimator.
Dostosowywanie cieni i konturów
Granice obiektu rysowanego tła widoku określają domyślny kształt jego cienia. Kontury odzwierciedlają zewnętrzny kształt obiektu graficznego i określają obszar fali sygnalizowania po dotknięciu.
Weźmy na przykład widok z tłem, który można rysować:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
Tło, które można rysować, ma postać prostokąta z zaokrąglonymi rogami:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
W widoku rzucany jest cień z zaokrąglonymi narożnikami, ponieważ rysowane tło określa kontur widoku. Zastosowanie niestandardowego konturu zastępuje domyślny kształt cienia widoku.
Aby zdefiniować niestandardowy konspekt widoku w kodzie, wykonaj te czynności:
- Rozszerz klasę
ViewOutlineProvider. - Zastąp metodę
getOutline(). - Przypisz nowego dostawcę konspektu do widoku za pomocą metody
View.setOutlineProvider().
Korzystając z metod z klasy Outline, możesz utworzyć owalne i prostokątne kontury z zaokrąglonymi narożnikami. Domyślny dostawca konspektów widoków pobiera kontur z tła widoku. Aby nie dopuścić do rzucania cienia na widok, ustaw dostawcę konturu na null.
Wyświetlenia klipu
Widoki przycinania umożliwiają zmianę kształtu widoku. Możesz przycinać widoki, aby zachować spójność z innymi elementami projektu lub zmienić kształt widoku w odpowiedzi na dane wejściowe użytkownika. Możesz przyciąć widok do jego obrysu za pomocą metody View.setClipToOutline(). Przycinanie jest możliwe tylko w przypadku prostokątów, okręgów i okrągłych prostokątów, zgodnie z zastosowaniem metody Outline.canClip().
Aby przyciąć widok do kształtu obiektu rysowalnego, ustaw ten element jako tło widoku (jak pokazano w poprzednim przykładzie) i wywołaj metodę View.setClipToOutline().
Wyświetlenia klipów to kosztowna operacja, więc nie animuj kształtu, którego używasz do ich przycinania. Aby uzyskać taki efekt, użyj animacji odsłon.