android - 如何在图像上显示文本

Question

我编写了一个代码，在其中我在 GridView 中显示图像，但现在我想在每个图像的底部显示文本。

我想像这样展示我的网格：

但是像这样[也想显示图像的文本]：

主.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:stretchMode="columnWidth"
        android:numColumns="2" 
        />
</FrameLayout>

Answer 1

您需要定义一个自定义网格项目布局，其中包含一个文本视图来分配文本。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView
        android:id="@+id/thumbnail"
        android:padding="8dp"
        android:scaleType="cropCenter"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000" />
</FrameLayout>

在这里，我们创建了一个 FrameLayout，它的 imageview 设置为匹配父级的尺寸，这将是显示照片的 imageview。接下来，有一个 TextView 将用于显示项目标题并与 FrameLayout 的底部对齐。

接下来，我们需要编辑您的适配器以使用此网格项目布局并呈现正确的信息。

public View getView(int position, View convertView, ViewGroup parent) {

    // Inflate the single grid item layout
    if (convertView == null) {  
        convertView = mLayoutInflater.inflate(R.layout.grid_item, parent, false);
    }

    // Set Image
    ImageView thumbnail = convertView.findViewById(R.id.thumbnail);
    if (thumbnail != null) {
        thumbnail.setImageResource(mThumbIds[position]);
    }

    // Set Text
    TextView title = convertView.findViewById(R.id.title);
    if (title != null) {
        title.setText("Image Number: " + position);
    }

    return convertView;     
}

mLayoutInflater 应该在您的构造函数中使用

mLayoutInflater = LayoutInflater.from(context);