如何在卡片视图的角落设置图像视图

Question

在我的带有 kotin 的 android 应用程序中，在我的一个界面中，一个包含 cardview 网格的 recyclerview。在网格中的 evrey 项目中，我想在 cardview 的角落制作一个 imageview 。 以下代码属于该项目：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        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="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <androidx.cardview.widget.CardView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/card_view"
            android:layout_width="170dp"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:background="@color/grey"
            android:layout_margin="@dimen/spacing_small"
            app:cardCornerRadius="2dp"
            app:cardElevation="2dp">

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

            <LinearLayout
                    android:id="@+id/layoutImageProduct"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    tools:ignore="MissingConstraints">
                <ImageView
                        android:id="@+id/productImage"
                        android:layout_width="fill_parent"
                        android:layout_height="100dp"
                        android:scaleType="fitXY"
                        android:adjustViewBounds="true"
                        android:layout_gravity="center"/>
                <TextView
                        android:id="@+id/productName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:textStyle="bold"
                        android:layout_marginLeft="@dimen/spacing_medium"
                        android:fontFamily="@font/lato_regular"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/black"/>
                <TextView
                        android:id="@+id/productDescription"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_marginLeft="@dimen/spacing_medium"
                        android:fontFamily="@font/lato_regular"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/black"/>
                <TextView
                        android:id="@+id/productPrice"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_marginLeft="@dimen/spacing_medium"
                        android:fontFamily="@font/lato_regular"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/grey_60"/>

            </LinearLayout>

            <ImageView
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:src="@drawable/basket_ic"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

我想把我的图像视图作为下图，我应该在我的代码中改变什么来得到这个结果 enter image description here

Answer 1

下面是解决办法

activity_main.xml

<?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">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_margin="16dp"
        android:background="@null"
        android:src="@drawable/square"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</android.support.constraint.ConstraintLayout>

square.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/colorPrimary" />

</shape>

正如您在上面的代码中看到的，您只需尝试在浮动操作按钮中添加 android:background="@null" 即可移除背景。

Answer 2

try to add a constraint layout inside cardView.

    <?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"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        <androidx.cardview.widget.CardView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/card_view"
                android:layout_width="170dp"
                android:layout_height="wrap_content"
                android:visibility="visible"
                android:background="@color/grey"
                android:layout_margin="@dimen/spacing_small"
                app:cardCornerRadius="2dp"
                app:cardElevation="2dp">

            <LinearLayout
                    android:id="@+id/layoutImageProduct"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                <ImageView
                        android:id="@+id/productImage"
                        android:layout_width="fill_parent"
                        android:layout_height="100dp"
                        android:scaleType="fitXY"
                        android:adjustViewBounds="true"
                        android:layout_gravity="center"/>
                <TextView
                        android:id="@+id/productName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:textStyle="bold"
                        android:layout_marginLeft="@dimen/spacing_medium"
                        android:fontFamily="@font/lato_regular"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/black"/>
                <TextView
                        android:id="@+id/productDescription"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_marginLeft="@dimen/spacing_medium"
                        android:fontFamily="@font/lato_regular"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/black"/>
                <TextView
                        android:id="@+id/productPrice"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_marginLeft="@dimen/spacing_medium"
                        android:fontFamily="@font/lato_regular"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/grey_60"/>

            </LinearLayout>


        </androidx.cardview.widget.CardView>

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/ic_basket"
                android:tint="@color/black"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="parent"/>

    </android.support.constraint.ConstraintLayout>