具有多种背景颜色的 Cardview

Question

我目前正在忙于查看详情页面。我现在想知道如何使 cardview 看起来像我设计的那样。我似乎无法在 google 上找到如何操作。我希望卡片是多色的：顶部的 25% 应该是白色的，剩下的 75% 到底部应该是红色的。我该怎么做？我在考虑 drawables，但我认为它在不同的手机上看起来会很丑。

我希望它看起来像这样：

我有这个卡片视图：

<android.support.v7.widget.CardView
    android:id="@+id/view4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="24dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/material_grey_50"
        android:orientation="vertical">

        <TextView
            style="@style/TextViewAppearance.Body3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:text="Descriptie"
            android:textColor="?attr/colorPrimaryDark" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            android:background="@color/material_grey_200" />

        <TextView
            android:id="@+id/descriptionText"
            style="@style/TextViewAppearance.Body2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:textColor="@color/material_grey_600" />

    </LinearLayout>

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

Answer 1

您可以通过添加线性布局、设置宽度以填充父级并设置其背景颜色来实现。

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="match_parent"
   android:background="@color/black"
   android:layout_marginTop="5dp">

    <TextView
        android:id="@+id/descriptionText"
        style="@style/TextViewAppearance.Body2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:textColor="@color/material_grey_600" />
</LinearLayout>

Answer 2

尝试像这样使用 weight 和 weightSum：

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

    <TextView
        style="@style/TextViewAppearance.Body3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Descriptie"
        android:textColor="?attr/colorPrimaryDark"
        android:background="@color/material_grey_50"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/descriptionText"
        style="@style/TextViewAppearance.Body2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:textColor="@color/material_grey_600" 
        android:layout_weight="3"/>
   </LinearLayout>

具有多种背景颜色的 Cardview

Cardview with multiple background colors

xml

android

drawable

android-cardview