首页 > 解决方案 > CardView 顶端的位置按钮

问题描述

在此处输入图像描述

如何在 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>

标签: androidandroid-constraintlayoutmaterialcardview

解决方案


你可以这样做

<?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,因此它也是方形的


推荐阅读