Material Design wzbogaca elementy interfejsu o wysokości. Wzniesienie pomaga użytkownikom zrozumieć względne znaczenie każdego elementu i skupić się na bieżącym zadaniu.
Wysokość widoku, określona przy użyciu właściwości Z, określa wygląd jego cienia. Widoki z wyższymi wartościami Z rzucają większe, delikatnie cienie i zasłaniają widoki o niższych wartościach Z. Wartość Z widoku nie ma jednak wpływu na jego rozmiar.
Cienie są rysowane przez element nadrzędny widoku podwyższonego. Podlegają one przycinaniu standardowego widoku i są domyślnie przycinane przez element nadrzędny.
Funkcja Wzniesienie przydaje się również do tworzenia animacji, w których podczas wykonywania działań widżety tymczasowo wznoszą się nad płaszczyzną widoku.
Więcej informacji znajdziesz w artykule Elevation in Material Design.
Przypisz wysokość do widoków
Wartość Z widoku ma 2 komponenty:
- 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 widoków. Więcej informacji znajdziesz w dokumentacji interfejsu API ViewPropertyAnimator
oraz w 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 sytuacjach, gdy zmiany stanu wywołują animacje, np. gdy użytkownik klika przycisk.
Więcej informacji znajdziesz w artykule na temat animowania zmian stanu widoku za pomocą StateListAnimator.
Dostosowywanie cieni i kontur widoku
Granice elementu, który można rysować w tle widoku, określają domyślny kształt tego cienia. Kontury reprezentują zewnętrzny kształt obiektu graficznego i określają obszar fali w przypadku reakcji na dotyk.
Rozważmy ten widok, który zawiera elementy rysowalne w tle:
<TextView android:id="@+id/myview" ... android:elevation="2dp" android:background="@drawable/myrect" />
Tło, które można rysować, jest zdefiniowane jako prostokąt z zaokrąglonymi narożnikami:
<!-- 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>
Widok rzuca cień z zaokrąglonymi narożnikami, ponieważ kontury widoku jest rysowane tło. Niestandardowy konspekt zastępuje domyślny kształt cienia widoku.
Aby zdefiniować własny kontur 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()
.
Za pomocą metod dostępnych w klasie Outline
możesz tworzyć owalne i prostokątne kontury z zaokrąglonymi narożnikami. Domyślny dostawca konturu dla widoków pobiera kontur z tła widoku. Aby uniemożliwić rzucanie cienia w widok, ustaw jego dostawcę konturu na null
.
Wyświetlenia klipu
Przycinanie widoków umożliwia zmianę kształtu widoku. Możesz przycinać wyświetlenia, aby uzyskać spójność z innymi elementami projektu lub zmienić kształt widoku w odpowiedzi na dane wejściowe użytkownika. Widok możesz przyciąć do jego konturu, korzystając z 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 metodą Outline.canClip()
).
Aby przyciąć widok do kształtu elementu do rysowania, ustaw taki element jako tło widoku (jak pokazano w poprzednim przykładzie) i wywołaj metodę View.setClipToOutline()
.
Przycinanie widoków jest kosztowne, dlatego nie animuj kształtu, którego używasz do obcinania widoku. Aby osiągnąć ten efekt, użyj animacji Reveal.