具有图像和文本的Android网格视图 [英] Android Grid View with Image and Text

问题描述

我需要在网格视图的每个图像下方显示文本.我已经能够将图像置于网格视图中，但是如何在其下方放置文本?在下面，我要发布代码段.

fragment_facility_grid.xml

 <?xml version ="1.0" encoding ="utf-8"?>< GridView xmlns:android ="http://schemas.android.com/apk/res/android"android:id ="@ + id/grid_view"android:layout_width ="fill_parent"android:layout_height ="fill_parent"android:numColumns ="auto_fit"android:columnWidth ="90dp"android:horizo​​ntalSpacing ="10dp"android:verticalSpacing ="10dp"android:gravity ="center"android:stretchMode ="columnWidth"></GridView> 

FacilityAdapter.class

 程序包com.androidbelieve.HIT_APP;/***由Akash创建于2016年2月13日.*/导入android.content.Context;导入android.view.View;导入android.view.ViewGroup;导入android.widget.BaseAdapter;导入android.widget.GridView;导入android.widget.ImageView;导入android.widget.TextView;公共类FacilityAdapter扩展了BaseAdapter {私有上下文mContext;//将所有图像保留在数组中public Integer [] mThumbIds = {R.drawable.bank，R.drawable.bus，R.drawable.girlshostel，R.drawable.guesthouse，R.drawable.gym，R.drawable.library，R.drawable.sports};公共字符串[] mThumbNames = {银行"，公交服务"，宾馆"，健身房"，"Fac1"，"Fac2"};//构造函数公共FacilityAdapter(上下文c){mContext = c;}@Overridepublic int getCount(){返回mThumbIds.length;}@Overridepublic Object getItem(int position){返回mThumbIds [position];}@Override公共长getItemId(int位置){返回0;}@Overridepublic View getView(int position，View convertView，ViewGroup parent){查看gridView;gridView = new View(mContext);ImageView imageView =新的ImageView(mContext);imageView.setImageResource(mThumbIds [position]);imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);imageView.setLayoutParams(new GridView.LayoutParams(300，300));返回imageView;}} 

谢谢

解决方案

我建议不要在运行时动态创建 ImageView 并从您的 getView()返回

code>方法，您应该为每个列表项创建一个 xml .以下是带有 ImageView 和 TextView

的示例 xml

 <?xml version ="1.0" encoding ="utf-8"?>< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"android:layout_width ="match_parent"android:layout_height ="match_parent"android:orientation ="vertical">< ImageViewandroid:id ="@ + id/image"android:layout_width ="wrap_content"android:layout_height ="wrap_content"android:scaleType ="centerCrop"/>< TextViewandroid:id ="@ + id/text"android:layout_width ="wrap_content"android:layout_height ="wrap_content"android:layout_marginTop ="5dp"android:gravity ="center"/></LinearLayout> 

此外，您还应该遵循 ViewHolder Pattern ，以提高您的 GridView 内存效率.您的 getView()方法将类似于此

  @Overridepublic View getView(int arg0，View convertView，ViewGroup arg2){ViewHolder持有人；如果(convertView == null){持有人= new ViewHolder();convertView = layoutInflater.inflate(R.layout.yourxml，无效的);holder.textview =(TextView)convertView.findViewById(R.id.text);holder.imageview =(ImageView)convertView.findViewById(R.id.image);holder.imageView.getLayoutParams().width = yourImageWidth;holder.imageView.getLayoutParams().height = yourImageHeight;convertView.setTag(holder);} 别的 {持有人=(ViewHolder)convertView.getTag();}holder.imageView.setImageResource(mThumbIds [position]);holder.textview.setText(mThumbNames [position]);返回convertView;}静态类ViewHolder {ImageView imageView;TextView textView;} 

I need to show text below every image in grid view. I have been able to put the images in grid view but how to put text below it? Below I'm posting the code snippets.

fragment_facility_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth" >

</GridView>

FacilityAdapter.class

package com.androidbelieve.HIT_APP;

/**
 * Created by Akash on 2/13/2016.
 */
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class FacilityAdapter extends BaseAdapter {
    private Context mContext;


    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.bank, R.drawable.bus,
            R.drawable.girlshostel , R.drawable.guesthouse,
            R.drawable.gym , R.drawable.library,R.drawable.sports

    };

    public String[] mThumbNames = {
            "Bank", "Bus Service","Guest House", "GYM","Fac1","Fac2"

    };

    // Constructor
    public FacilityAdapter(Context c){
        mContext = c;
    }

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

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

        View gridView;
        gridView = new View(mContext);



        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(300, 300));
        return imageView;
    }

}

Thank You

解决方案

I would rather suggest that instead of creating ImageView dynamically at run time and return that from your getView() method, you should create an xml for your each of the list items. Below is the sample xml with ImageView and TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"/>

</LinearLayout>

Also you should follow ViewHolder Patternto make your GridView memory efficient. Your getView() method will look alike this

@Override
    public View getView(int arg0, View convertView, ViewGroup arg2) {
        ViewHolder holder;
        if (convertView == null) {
            holder = new ViewHolder();
            convertView = layoutInflater.inflate(R.layout.yourxml,
                    null);
            holder.textview= (TextView) convertView.findViewById(R.id.text);
            holder.imageview= (ImageView) convertView.findViewById(R.id.image);
            holder.imageView.getLayoutParams().width = yourImageWidth;
            holder.imageView.getLayoutParams().height = yourImageHeight;
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageView.setImageResource(mThumbIds[position]);
        holder.textview.setText(mThumbNames[position]);
        return convertView;
    }

    static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }

这篇关于具有图像和文本的Android网格视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！