user-interface - 如何在android中添加文本稀松布

Question

目标:
在图像顶部覆盖文本标题。像这样的东西:



当前实现:我有一个 CardView ，其中包含一个 ImageView和一个 TextView .我可以将文本放在图像的顶部，但我无法获得该背景稀松布。

问题:我需要那个背景纱布，因为没有它，图像顶部的文字难以辨认。

堆栈:安卓L

布局 XML:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/event_cardView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="3dp"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">

        <ImageView
            android:id="@+id/eventImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="eventImage"
            android:src="@drawable/sample"
            android:layout_alignParentTop="true" />

        <TextView
            android:id="@+id/eventName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dip"
            android:textColor="#000000"
            android:textSize="15sp"
            android:maxLines="5"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:text="Event Name" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

将不胜感激任何有关此方面的帮助的指示。

Answer 1

创建一个 shape drawable resource仅包含 XML 命名空间作为形状的属性。根据您想要纯色还是渐变色纱布，将更改形状元素的内容。

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

    <!-- The content of the shape will go here. -->

</shape>

如果您想要一个纯色的稀松布，请使用属性 android:color 向您的形状元素添加一个纯色元素。使用 alpha 设置为某种颜色。

<solid
    android:color="#88000000"/>

如果你想要一个渐变纱布，从 android 命名空间中添加一个具有以下属性的渐变元素:angle , centerY , startColor , centerColor , endColor , 和 type .如果您想关注 the Material Design guidelines ，就像您提供的图像一样，渐变元素应具有以下值:

<gradient
    android:angle="90"
    android:centerY="0.3"
    android:startColor="#CC000000"
    android:centerColor="#66000000"
    android:endColor="#00000000"
    android:type="linear"/>

将这些值提取出来并放置在相关资源文件中是一个好主意，例如 dimens.xml和 colors.xml ，以便稀松布可以根据设备的配置而改变。

将稀松布保存为形状可绘制资源后，您可以将其添加到 TextView 的背景中。使用 android:background属性。使用 TextView您提供并假设您将 scrim 文件命名为 scrim.xml ，修改如下:

<TextView
    android:id="@+id/eventName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="2dip"
    android:textColor="#000000"
    android:textSize="15sp"
    android:maxLines="5"
    android:gravity="center"
    android:layout_alignParentBottom="true"
    android:text="Event Name"
    android:background="@drawable/scrim"/>