Twórz cienie i wyświetlaj klipy

Wypróbuj metodę Compose

Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak pracować z motywami w Compose.

Modifier.shadow() →

Material Design wprowadza podniesienie elementów interfejsu. Wysokość pomaga użytkownikom zrozumieć względne znaczenie poszczególnych elementów i skupić uwagę na bieżącym zadaniu.

Uwaga: ta strona zawiera opis cieni uzyskanych za pomocą wysokości. Material3 wprowadza podejście do określania wysokości na podstawie koloru powierzchni. Więcej informacji o łatwości utrzymania i podejściu do wrażeń użytkownika znajdziesz w artykule Material Elevation. Rozważ też przeniesienie projektu na Jetpack Compose.

Wysokość widoku, reprezentowana przez właściwość Z, określa wygląd cienia. Widoki o wyższych wartościach Z rzucają większe, bardziej rozmyte cienie i zasłaniają widoki o niższych wartościach Z. Wartość Z widoku nie wpływa jednak na jego rozmiar.

Rysunek 1. Wysokość na osi Z i powstały cień.

Cienie są rysowane przez element nadrzędny widoku podniesionego. Podlegają one przycinaniu w widoku standardowym i są domyślnie przycinane przez element nadrzędny.

Wysokość jest też przydatna do tworzenia animacji, w których widżety tymczasowo unoszą się ponad płaszczyznę widoku podczas wykonywania działań.

Więcej informacji znajdziesz w artykule Elevation in Material Design (Wzniesienie w Material Design).

Przypisywanie wysokości do widoków

Wartość Z w przypadku widoku ma 2 komponenty:

• Wzniesienie: komponent statyczny
• Tłumaczenie: komponent dynamiczny używany do animacji

Z = elevation + translationZ

Wartości Z są mierzone w pikselach niezależnych od gęstości (dp).

Rysunek 2. Różne cienie dla różnych poziomów w dp.

Aby ustawić domyślny (spoczynkowy) poziom 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 API dotyczącej ViewPropertyAnimator i w przewodniku dla deweloperów na temat animacji właściwości.

Możesz też użyć elementu StateListAnimator , aby określić te animacje w sposób deklaratywny. Jest to szczególnie przydatne w przypadku, gdy zmiany stanu wywołują animacje, np. gdy użytkownik kliknie przycisk. Więcej informacji znajdziesz w artykule Animowanie zmian stanu widoku za pomocą klasy StateListAnimator.

Dostosowywanie cieni i konturów widoku

Granice obiektu rysowalnego tła widoku określają domyślny kształt jego cienia. Kontury reprezentują zewnętrzny kształt obiektu graficznego i określają obszar efektu falowania w przypadku reakcji na dotyk.

Rozważ następujący widok, który jest zdefiniowany za pomocą obiektu rysowalnego w tle:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Obiekt rysowalny tła jest zdefiniowany jako prostokąt 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>

Widok rzuca cień o zaokrąglonych rogach, ponieważ obiekt rysowalny tła określa kontur widoku. Podanie niestandardowego konturu zastępuje domyślny kształt cienia widoku.

Aby zdefiniować niestandardowy kontur widoku w kodzie:

1. Wydłuż zajęcia ViewOutlineProvider.
2. Zastąp metodę getOutline().
3. Przypisz nowego dostawcę konturów do widoku za pomocą metody View.setOutlineProvider().

Za pomocą metod w klasie Outline możesz tworzyć owalne i prostokątne kontury z zaokrąglonymi rogami. Domyślny dostawca konturów dla widoków pobiera kontur z tła widoku. Aby zapobiec rzucaniu cienia przez widok, ustaw jego dostawcę konturu na null.

Wyświetlenia klipu

Przycinanie widoków umożliwia 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. Widok możesz przyciąć do obszaru jego konturu za pomocą metody View.setClipToOutline(). Przycinanie jest obsługiwane tylko w przypadku konturów w kształcie prostokąta, okręgu i zaokrąglonego prostokąta, co jest określane przez metodę Outline.canClip().

Aby przyciąć widok do kształtu obiektu rysowalnego, ustaw go jako tło widoku (jak pokazano w poprzednim przykładzie) i wywołaj metodę View.setClipToOutline().

Przycinanie widoków jest kosztowną operacją, więc nie animuj kształtu, którego używasz do przycinania widoku. Aby uzyskać ten efekt, użyj animacji ujawniania.