Material Design. Elevation (высота)

Обновлено 21 мая 2024

В соответствии с новым дизайном Material Design компоненты могут "парить" над экраном, отбрасывая тень. Система сама рассчитает нужную тень вокруг элемента, в том числе и вокруг круглой кнопки.

У компонентов появился новый атрибут elevation:

<ImageView …
    android:elevation="8dp" />

Программным аналогом являются методы getElevation()/setElevation() в Java или свойство elevation в Kotlin.

Разместите на экране ImageView и кнопку. Код приблизительный, используйте свои варианты:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginBottom="40dp"
    android:elevation="0dp" />

Сейчас у компонента нулевая высота. Приподнимем его программно над экраном на пять единиц.

button.setOnClickListener {
    imageView.elevation = 5F
}

Новый атрибут android:translationZ позволяет создавать анимации, которые отражают временные изменения в высоте компонента. Программным аналогом является метод setTranslationZ() или свойство translationZ в Kotlin. Рассмотрим пример.

Подготовим два компонента: круг и квадрат. Круг будет парить над квадратом при помощи атрибута android:elevation. Опять же, код приблизительный, вам надо разместить второй компонент таким образом, чтобы он частично перекрывал первый компонент.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/viewOval"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center"
        android:layout_marginStart="36dp"
        android:layout_marginTop="180dp"
        android:background="@drawable/shape"
        android:elevation="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/viewSquare"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginStart="36dp"
        android:layout_marginTop="172dp"
        android:background="@drawable/shape2"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="123dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Фигуры овала и квадрата практически идентичны. Пример для круга (файл res/drawable/shape.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/color_1" />
</shape>

Код для квадрата напишите сами (android:shape="rectangle"). Цвет выберите сами.

Наша задача - при нажатии на квадрат переместить его выше круга. При отпускании пальца квадрат опустится на место. Обратите внимание на отбрасывание теней у квадрата в разных ситуациях.

val squareView: View = findViewById(R.id.viewSquare)

squareView.setOnTouchListener { view, motionEvent ->
    val action = motionEvent.actionMasked
    when (action) {
        MotionEvent.ACTION_DOWN -> view.translationZ = 60F
        MotionEvent.ACTION_UP -> view.translationZ = 0F
        else -> return@setOnTouchListener false
    }
    view.performClick()
    return@setOnTouchListener true
}

Также имеется метод setZ(), который идентичен методу setTranslationZ(), если верить документации.

Реклама