如何显示的图像文本 [英] How to show Text on Image

问题描述

我已经写了code，其中我显示在GridView的图像，但现在我要显示在每个图像的底部文本。

和我想给我的网格是这样的：

但得到这样的 [也希望显示文本的图像]：

main.xml中：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    ＆GT;
    ＆LT; GridView控件
        机器人：ID =@ + ID / GridView控件
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        机器人：verticalSpacing =0dp
        机器人：horizo​​ntalSpacing =0dp
        机器人：stretchMode =columnWidth中
        机器人：为numColumns =2
        /＆GT;
＆LT; /的FrameLayout＆GT;
 

解决方案

您需要定义一个定制的网格项目布局包含一个TextView分配的文本。

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;的FrameLayout
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent＆GT;
    ＆LT; ImageView的
        机器人：ID =@ + ID /缩略图
        机器人：填充=8DP
        机器人：scaleType =cropCenter
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent/＆GT;
    ＆LT;的TextView
        机器人：ID =@ + ID /标题
        机器人：layout_width =match_parent
        机器人：layout_height =WRAP_CONTENT
        机器人：填充=10dp
        机器人：layout_gravity =底
        机器人：文字颜色=@机器人：彩色/白
        机器人：后台=＃55000000/＆GT;
＆LT; /的FrameLayout＆GT;
 

在这里，我们已经创建了一个的FrameLayout具有ImageView的设定以符合家长的层面，这将是显示该照片的ImageView的。下一个有一个TextView将用于显示项目的标题和被对准的FrameLayout的底部。

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

 公开查看getView（INT位置，查看convertView，ViewGroup中父）{

    //充气单个网格项目布局
    如果（convertView == NULL）{
        convertView = mLayoutInflater.inflate（R.layout.grid_item，父母，假）;
    }

    //设置图像
    ImageView的缩略图= convertView.findViewById（R.id.thumbnail）;
    如果（缩略图！= NULL）{
        thumbnail.setImageResource（mThumbIds [位置]）;
    }

    //设置文本
    TextView的标题= convertView.findViewById（R.id.title）;
    如果（标题！= NULL）{
        title.setText（图像编号+位置）;
    }

    返回convertView;
}
 

mLayoutInflater应该在构造函数中全局定义使用

  mLayoutInflator = LayoutInflator.from（上下文）;
 

I have written a code, in which i am showing images in GridView, but now i want to show text in bottom of every image.

And i want to show my Grid like this:

but getting like this [also want to show Text for Image]:

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>

解决方案

You need to define a custom grid item layout which contains a textview to assign the text.

<?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>

Here we have created a FrameLayout which has the imageview set to match the parent's dimensions, this will be the imageview that displays the photo. Next there is a TextView which will be used to display the item title and that is aligned to the bottom of the FrameLayout.

Next we need to edit your adapter to use this grid item layout and render the correct information.

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 should be globally defined in your constructor using

mLayoutInflator = LayoutInflator.from(context);

这篇关于如何显示的图像文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！