Twórz cienie i wyświetlaj klipy

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z motywów w funkcji Utwórz
Modifier.shadow() → .

Material Design wprowadza podwyższenie wysokości elementów interfejsu. Wysokość pomaga użytkownikom zrozumieć względne znaczenie każdego z nich i skupić jego uwagę na bieżące zadanie.

Wysokość widoku reprezentowana przez właściwość Z, określa swojego cienia. Widoki, w których wartości Z są większe, cienie i zasłaniają widoki o niższych wartościach Z. Jednak Wartość Z widoku nie wpływa na jego rozmiar.

Ilustracja pokazująca, jak wysokość widoku tworzy cień.
Rysunek 1. Wysokość na osi Z i wynikowy cień.

Cienie są rysowane przez element nadrzędny widoku podwyższonego. Podlegają one to standardowe przycinanie, które są domyślnie przycinane przez wydawcę nadrzędnego.

Wzniesienie jest również przydatne do tworzenia animacji, w których widżety tymczasowo się rozwijają. nad płaszczyzną widoku podczas wykonywania działań.

Więcej informacji: Wysokość w 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).

Ilustracja pokazująca różne cienie dla różnych wzniesień w dp
Rysunek 2. Różne cienie przy różnych wysokościach w dp.

Aby ustawić domyślną (spoczynkową) wysokość widoku, użyj funkcji android:elevation w układzie XML. Ustawianie wysokości widoku w kodzie aktywności, użyj funkcji View.setElevation() .

Aby ustawić tłumaczenie widoku, użyj funkcji View.setTranslationZ() .

ViewPropertyAnimator.z() oraz ViewPropertyAnimator.translationZ() umożliwiają animowanie wysokości ukształtowania widoku. Więcej informacji: Dokumentacja API dla ViewPropertyAnimator oraz właściwości animacji.

Możesz też użyć StateListAnimator aby określać je w sposób deklaratywny. Jest to szczególnie przydatne w przypadku: przypadków, gdy zmiana stanu powoduje uruchomienie animacji, np. kliknięcie przycisku przez użytkownika. Więcej informacji: Widok animacji za pomocą StateListAnimator.

Dostosowywanie cieni i konturów

Granice możliwego do rysowania tła widoku określają domyślny kształt jego cienia. Kontury odzwierciedlają zewnętrzny kształt obiektu graficznego. określić obszar fali dotyku.

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 rogami, ponieważ tło można rysować. który określa zarys widoku. Podanie niestandardowego konspektu zastępuje ustawienia domyślne kształt cienia widoku.

Aby zdefiniować niestandardowy konspekt widoku w kodzie, wykonaj te czynności:

  1. Rozszerz ViewOutlineProvider zajęcia.
  2. Zastąp getOutline() .
  3. Przypisz nowego dostawcę konspektu do widoku za pomocą View.setOutlineProvider() .

Możesz utworzyć owalne i prostokątne kontury z zaokrąglonymi narożnikami za pomocą w funkcji Outline zajęcia. Domyślny dostawca konspektów widoków pobiera je z w tle obrazu. Aby zapobiec rzucaniu cienia na widok, ustaw jego dostawcy konspektu: null.

Wyświetlenia klipu

Widoki przycinania umożliwiają zmianę kształtu widoku. Możesz wybrać liczbę wyświetleń klipu spójność z innymi elementami układu lub zmiany kształtu widoku w odpowiedzi na dane wejściowe użytkownika. Możesz przyciąć widok do jego obrysu za pomocą View.setClipToOutline() . Obsługują tylko kontury prostokątów, okręgów i okrągłych prostokątów zgodnie z ustalonym Outline.canClip() .

Aby przyciąć widok do kształtu obiektu, który można rysować, ustaw go jako w tle widoku – jak pokazano w poprzednim przykładzie – i wywołaj metodę View.setClipToOutline().

Widoki przycinania to kosztowna operacja, więc nie animuj kształtu, którego używasz. aby przyciąć widok. Aby osiągnąć ten efekt, użyj funkcji pokazać animację.