android - 主体较小的 CardView 和漂浮在其外部的图像

Question

我正在尝试在 Android 中创建一个 CardView，它会让图像看起来像漂浮在框和 CardView 框外覆盖它会看起来更小。

因为我不知道如何更好地描述它，所以我找到了一个类似的设计并尝试在Paint上绘制它。

让我感到困惑的部分是让盒子看起来比实际的 CardView 小。

Answer 1

尝试这段代码(用于您项目的布局文件):

<?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:background="@android:color/holo_green_dark"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="25dp"
        app:cardBackgroundColor="@android:color/holo_orange_light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView One"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView Two"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginBottom="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView Three"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_marginStart="70dp"
            android:layout_marginBottom="15dp" />

        </LinearLayout>

    </android.support.v7.widget.CardView>

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="14dp"
        android:layout_marginStart="12dp"
        android:elevation="2dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

注意:您必须为必须放置在 CardView 之上的 ImageView 提供更多的 elevation 作为因为 CardView 默认情况下已经有一些自己的高度。

在你的 build.gradle (Module: app) 文件中，在 dependencies 下添加这两个依赖如下:

dependencies {
    // For ConstraintLayout:
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    // For CardView:
    implementation 'com.android.support:cardview-v7:27.1.1'
}

截图(以上代码):

对于屏幕尺寸 - 5.0 英寸(1080 x 1920 像素)[设备:Pixel 2]

希望对你有帮助。