在约束布局中的按钮上重叠图像视图

Posted 2023-03-17

【中文标题】在约束布局中的按钮上重叠图像视图

【英文标题】：Overlap an image view on button in a constraint layout

【发布时间】：2021-12-26 17:08:50

【问题描述】：

我想设计一种布局，它的侧面有一个图像视图，但与按钮重叠。我必须在约束布局中这样做。 谁能建议一种方法来实现这一点？ 提前致谢。

附下设计图：design needed

编辑：我尝试了第二个答案告诉我的方法。但是，图像仍然被按钮隐藏。那么任何人都可以建议一种使图像在按钮顶部可见的方法吗？

Login screen

登录布局

<layout>

    <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_
        android:layout_
        android:background="@color/colorAccent"
        tools:context=".MainActivity">

        <View
            android:id="@+id/view_form"
            android:layout_
            android:layout_
            android:layout_marginTop="@dimen/marginTopLogin"
            android:background="@drawable/round_cornered_top_white_bg_drawable"
            app:layout_constraintBottom_toBottomOf="@+id/btnSubmit"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/etUsername"
            app:layout_constraintVertical_weight="0.50" />


        <EditText
            android:id="@+id/etUsername"
            android:layout_
            android:layout_
            android:layout_margin="20dp"
            android:autofillHints="name"
            android:hint="Username"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:maxLines="1"
            android:padding="16dp"
            app:layout_constraintEnd_toEndOf="@id/view_form"
            app:layout_constraintStart_toStartOf="@id/view_form"
            app:layout_constraintBottom_toTopOf="@id/etPassword" />

        <EditText
            android:id="@+id/etPassword"
            android:layout_
            android:layout_
            android:layout_margin="20dp"
            android:autofillHints="password"
            android:hint="Password"
            android:imeOptions="actionDone"
            android:inputType="textPassword"
            android:maxLines="1"
            android:padding="16dp"
            app:layout_constraintEnd_toEndOf="@id/view_form"
            app:layout_constraintStart_toStartOf="@id/view_form"
            app:layout_constraintBottom_toTopOf="@+id/btnSubmit" />

        <CheckBox
            android:id="@+id/imgTogglePassword"
            android:layout_
            android:layout_
            android:layout_marginTop="-5dp"
            android:layout_marginEnd="-5dp"
            android:button="@drawable/btn_toggle_password"
            android:padding="16dp"
            app:layout_constraintBottom_toBottomOf="@id/etPassword"
            app:layout_constraintEnd_toEndOf="@id/etPassword"
            app:layout_constraintTop_toTopOf="@id/etPassword" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnSubmit"
            android:layout_
            android:layout_
            android:layout_marginBottom="20dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:textColor="@color/colorWhite"
            android:text="Submit"
            android:background="@color/purple_700"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imgNext"
            android:layout_
            android:layout_
            app:srcCompat="@drawable/ic_ico_gonext"
            android:padding="16dp"
            android:layout_marginEnd="20dp"
            app:layout_constraintTop_toTopOf="@id/btnSubmit"
            app:layout_constraintBottom_toBottomOf="@id/btnSubmit"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

【参考方案1】：

您可以将ImageView 的顶部和底部约束设置为Button 的顶部和底部（基本上垂直居中），end 约束（或right，如果它是特别是始终在右侧，即使在 RTL 布局中）将其放置在最后。酌情添加边距。

但实际上在这种情况下，您可能只想为按钮添加一个图标：

<Button
    ...
    app:icon="@drawable/ic_next"
    app:iconGravity="end"
    style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
/>

（属性here的概要）

【讨论】：

请再次检查我的问题。我已经按照您在回答中提到的那样实现了，但现在按钮与图像视图重叠。你能帮忙吗？

@Kiran 尝试给图标一个高度（android:elevation），2dp 可能会起作用，但请检查当您按下按钮时按钮没有提升到它上方。同样，您可能只想为按钮本身添加一个图标，它提供了该功能并避免了奇怪的行为！

实际上，图像需要与按钮具有不同的背景颜色，因此我在按钮上添加了图像视图。

【参考方案2】：

在您的ImageView 中添加以下代码。 btnLogin 是您的按钮 id 的 id，在顶部和底部约束中添加父级以使 imageview 垂直居中对齐。

app:layout_constraintEnd_toEndOf="@+id/btnLogin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

编辑：

使用一个ConstraintLayout在按钮上重叠图像，您需要添加android:stateListAnimator="@null"，但是使用这个所有的高程和平移Z都不会显示到Button。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSubmit"
        android:layout_
        android:layout_
        android:layout_marginBottom="20dp"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:textColor="@color/white"
        android:text="Submit"
        android:background="@color/purple_700"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:stateListAnimator="@null"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imgNext"
        android:layout_
        android:layout_
        app:srcCompat="@drawable/ic_next"
        android:padding="16dp"
        android:layout_marginEnd="20dp"
        app:layout_constraintTop_toTopOf="@id/btnSubmit"
        app:layout_constraintBottom_toBottomOf="@id/btnSubmit"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

以上代码的输出：

有关添加高程和重叠视图的更多信息，请查看answer

【讨论】：

你有办法只使用一个约束布局来制作这个布局吗？

@Kiran 请检查已编辑的答案