ConstraintLayout, высота дочерних представлений и обратная совместимость

Question

У меня есть ConstraintLayout и один Button и ImageView в качестве дочерних представлений.ImageView размещается над Button с ожиданием, что ImageView будет нарисовано поверх Button.(Определенно, я мог бы добавить изображение как рисование с помощью Button. Но в моем сценарии я хочу сделать анимацию с шириной кнопки, и я хочу, чтобы ImageView остался таким, как есть).Тем не менее, ImageView отображается ниже Button, поскольку Button имеет высоту 2dp в состоянии по умолчанию [Руководство по проектированию материалов] .Эта высота поднимается до 8dp при нажатии кнопки.Как правило, нам нужно установить для свойства elevation или translationZ ImageView значение больше 2dp, чтобы ImageView отображался над кнопкой.Но свойство elevation и свойство translationZ поддерживаются до уровня API 21. Мне требуется поддержка уровня 19 API. Кроме того, повышение еще не достижимо при использовании библиотеки дизайна.Поддерживая условия, есть ли способ нарисовать ImageView над Button внутри ConstraintLayout?

            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/input_margin_bottom">

                <EditText
                    android:id="@+id/et_account"
                    style="@style/RocketTheme.EditText"
                    android:drawableStart="@drawable/ic_bill_pay"
                    android:hint="@string/prompt_biller_id"
                    android:inputType="number"
                    android:maxLength="12"
                    android:maxLines="1"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:layout_editor_absoluteX="0dp"
                    tools:layout_editor_absoluteY="0dp" />

                <Button
                    style="@style/RocketTheme.EditText.SideButton"
                    android:id="@+id/ib_get_contact"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:text="Select Biller"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_bill_pay"
                    android:layout_marginLeft="12dp"
                    android:elevation="2dp"
                    android:background="@drawable/bg_white_round"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"/>

            </android.support.constraint.ConstraintLayout>

Answer 1

Вы должны обернуть свою кнопку с помощью FrameLayout.Это позволит вам сложить вид сверху на один ниже.Смотрите следующий пример:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />

    </FrameLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

Answer 2

Это решение, с которым я сейчас столкнусь.Согласно документации Android, более поздний брат нарисован позже.Таким образом, в общем случае, если View появляется позже как братья и сестры в файле макета, они будут отображаться поверх других братьев и сестер.Тем не менее, кнопка имеет высоту по умолчанию, поэтому она будет отображаться выше Views с более низким возвышением в API выше 21.

Мы можем установить elevation или translationZ в одноуровневом элементе, чтобы сделатьон появляется над Button.Нам также нужно убедиться, что View, который мы хотим наверху, будет размещен позже в макете.В API ниже 21 высота не будет работать, а более поздний View будет нарисован сверху.

Answer 3

В xml вырежьте код изображения и вставьте его под код кнопки.Высота не поддерживается на старых устройствах