ConstraintLayout，子视图的提升和向后兼容性

Posted 2021-03-28

我有一个ConstraintLayout和一个Button和一个ImageView作为其孩子的意见。 ImageView被放置在Button上，期望ImageView将被吸引到Button上。 （当然，我可以用Button添加图像作为drawabl。但是，在我的场景中，我想用按钮宽度做一些动画，我希望ImageView保持原样）。然而，ImageView被绘制在Button下面，因为Button在其默认状态[Material Design Guidline]上有2dp的高度。按下按钮时，此高度升至8dp。通常，我们需要将elevation的translationZ或ImageView属性设置为超过2dp，以使ImageView出现在按钮上。但是，在API级别21之前支持elevation属性和translationZ属性。我需要支持API级别19.此外，使用设计库还无法实现提升。保持条件，有没有办法在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>

答案

你应该用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>

另一答案

在xml剪切imageview的代码中，将其粘贴到按钮的代码下面。旧设备不支持提升

另一答案

这是我现在要解决的问题。根据android文档，稍后将绘制后来的兄弟姐妹。因此，一般来说，如果View后来作为布局文件中的兄弟姐妹出现，它将被绘制在其他兄弟姐妹身上。但是，默认情况下，按钮具有高程，因此它将在API中高于21的Views上方绘制。

我们可以在兄弟姐妹中设置一个elevation或translationZ，使它出现在Button上方。我们还需要确保顶部的View放置在布局的后面。在21以下的API中，高程将不起作用，后面的View被绘制在顶部。