Создание теней и видов клипов

Попробуйте способ создания композиций.

Jetpack Compose — это рекомендуемый набор инструментов для создания пользовательского интерфейса для Android. Узнайте, как работать с темами оформления в Compose.

Modifier.shadow() →

В Material Design используется концепция «возвышения» для элементов пользовательского интерфейса. Возвышение помогает пользователям понять относительную важность каждого элемента и сосредоточить внимание на текущей задаче.

Примечание: На этой странице описываются тени, получаемые с помощью эффекта возвышения. Material3 использует подход, основанный на цвете поверхности, для создания эффекта возвышения. Для получения дополнительной информации о поддержке и подходе к пользовательскому интерфейсу см. Material Elevation и рассмотрите возможность миграции вашего проекта на Jetpack Compose .

Высота объекта, определяемая свойством Z , влияет на визуальный вид его тени. Объекты с более высокими значениями Z отбрасывают более крупные и мягкие тени и перекрывают объекты с более низкими значениями Z. Однако значение Z объекта не влияет на его размер.

Рисунок 1. Вид сверху по оси Z и результирующая тень.

Тени отрисовываются родительским элементом вида сверху. Они подвергаются стандартному отсечению видов и по умолчанию обрезаются родительским элементом.

Функция Elevation также полезна для создания анимаций, в которых виджеты временно поднимаются над плоскостью обзора при выполнении действий.

Для получения более подробной информации см. раздел «Взгляд в будущее в дизайне материалов» .

Придайте вашим видам возвышенность.

Значение Z для представления состоит из двух компонентов:

• Высота: статическая составляющая
• Перевод: динамический компонент, используемый для анимации.

Z = elevation + translationZ

Значения Z измеряются в dp (пикселях, не зависящих от плотности).

Рисунок 2. Различные тени для разных высот в dp.

Чтобы задать высоту представления по умолчанию (в состоянии покоя), используйте атрибут android:elevation в XML-макете. Чтобы задать высоту представления в коде активности, используйте метод View.setElevation() .

Для установки перевода представления используйте метод View.setTranslationZ() .

Методы ViewPropertyAnimator.z() и ViewPropertyAnimator.translationZ() позволяют анимировать изменение высоты представлений. Для получения дополнительной информации см. справочник API для ViewPropertyAnimator и руководство разработчика по анимации свойств .

Также можно использовать StateListAnimator для декларативного задания этих анимаций. Это особенно полезно в случаях, когда изменения состояния запускают анимацию, например, когда пользователь нажимает кнопку. Для получения дополнительной информации см. раздел «Анимация изменений состояния представления с помощью StateListAnimator» .

Настройте тени и контуры изображения.

Границы фонового изображения представления определяют форму его тени по умолчанию. Контуры представляют собой внешнюю форму графического объекта и определяют область пульсации для обратной связи от касания.

Рассмотрим следующий вид, который определяется с помощью фонового изображения:

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

Фоновый объект задан в виде прямоугольника со скругленными углами:

<!-- 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>

Отображаемая тень имеет закругленные углы, поскольку контур элемента определяется фоновым изображением. Указание пользовательского контура переопределяет форму тени элемента по умолчанию.

Чтобы задать пользовательскую структуру для представления в вашем коде, выполните следующие действия:

1. Расширьте класс ViewOutlineProvider .
2. Переопределите метод getOutline() .
3. Присвойте вашему представлению новый поставщик структуры с помощью метода View.setOutlineProvider() .

Вы можете создавать овальные и прямоугольные контуры со скругленными углами, используя методы класса Outline . Поставщик контуров по умолчанию для представлений получает контур из фона представления. Чтобы предотвратить отбрасывание тени представлением, установите для его поставщика контуров значение null .

Просмотры клипов

Обрезка элементов позволяет изменять их форму. Вы можете обрезать элементы для обеспечения согласованности с другими элементами дизайна или для изменения формы элемента в ответ на действия пользователя. Вы можете обрезать элемент по его контуру, используя метод View.setClipToOutline() . Обрезка поддерживается только для контуров в виде прямоугольников, кругов и скругленных прямоугольников, как это определяется методом Outline.canClip() .

Чтобы обрезать представление по форме объекта Drawable, установите этот объект Drawable в качестве фона представления — как показано в предыдущем примере — и вызовите метод View.setClipToOutline() .

Обрезка видов — ресурсоемкая операция, поэтому не следует анимировать форму, используемую для обрезки вида. Для достижения этого эффекта используйте анимацию раскрытия .