如何在图像上显示文本

Question

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

我想这样展示我的网格:

但是像这样[还想为图像显示文本]：

main.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。接下来，有一个文本视图，用于显示项目标题，并与框架布局的底部对齐。

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

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);