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.