0

在此处输入图像描述

如何在 CardView 的顶端添加按钮？我有一个解决方案，但我不喜欢设置按钮的固定高度（即 50dp）而不是设置 card_view 的 margin_top（即 25dp）。您还有其他解决方案吗？

<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<androidx.cardview.widget.CardView
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardCornerRadius="@dimen/corner_radius"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="true"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/btn">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/view_cover"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#ddd"
            app:layout_constraintDimensionRatio="16:9"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_marginEnd="@dimen/dimen_16"
    android:elevation="@dimen/dimen_2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
4

2 回答 2

1

你可以这样做

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

    <androidx.cardview.widget.CardView
        android:id="@+id/my_card"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />


    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@android:drawable/ic_delete"
        app:layout_constraintWidth_percent="0.08"
        app:layout_constraintDimensionRatio="1:1"
        app:tint="@color/redColor"
        android:elevation="50dp"
        app:layout_constraintTop_toTopOf="@id/my_card"
        app:layout_constraintBottom_toTopOf="@id/my_card"
        app:layout_constraintStart_toStartOf="@id/my_card"
        app:layout_constraintEnd_toEndOf="@id/my_card"
        app:layout_constraintHorizontal_bias="0.98"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

这将生成这样的输出 在此处输入图像描述

图像大小将基于屏幕的宽度，这将因设备而异，并且会根据它调整大小。由于我们提供的比例为 1:1，因此它也是方形的

于 2021-03-01T17:56:15.373 回答
0

看起来约束布局不允许负边距（偏移），所以你所能做的就是变通方法。

还有另一种解决方法，我认为就“意图”而言，它比您的示例更好。它是这样的：

假设您的按钮是50dp宽度/高度。

  1. 将Space元素放置在约束布局内。假设宽度/高度是25dp（的一半50dp）。
  2. 将Space元素与约束布局的角对齐。如果您想将按钮放在顶端，然后是约束布局的Space顶端，约束布局的顶端Space。

此时，您实际上创建了“锚点”，您可以在其中对齐其他元素，即Space.

  1. 将按钮的开头与 的开头对齐，将按钮Space的底部与 的底部对齐Space。

按钮现在被放置，就像你会做layout_marginEnd/ layout_marginBottomof一样-25dp。

我认为这更好的原因是重叠细节不再是约束布局的关注点，而是按钮及其相邻元素的关注点。

于 2021-03-01T17:13:51.843 回答