带有图像和文本android的gridview

Question

我成功创建了一个填充有图像的网格视图。现在，我要做的是在图像下方放置一个文本。

这是到目前为止我的应用程序的屏幕截图。

http://i203.photobucket.com/albums/aa266/paulocarabuena_bucket/screen-2.png

这是我的 imageadapter 类中的 getView 方法。

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

if (convertView == null) {
    imageView = new ImageView(this.context);
    imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setPadding(8, 8, 8, 8);
} else {
    imageView = (ImageView) convertView;
}

imageView.setImageResource(this.thumbs[position]);
return imageView;
}

这是我主要活动的 onCreate 方法

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.launchFullScreen();
    this.setContentView(R.layout.main);

    this.grids = (GridView) this.findViewById(R.id.elements);

    ImageAdapter adapter = new ImageAdapter(this);

    this.grids.setAdapter(adapter);

    this.grids.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {

        }
    });
}

提前致谢。 :)

Answer 1

而不是直接使用 Image View ，您应该如下所示为视图充气：

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/widget44"android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:layout_x="201px"
 android:layout_y="165px"
 android:gravity="center_horizontal">
<ImageView
   android:id="@+id/icon_image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
</ImageView>
<TextView
   android:id="@+id/icon_text"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="TextView"
   android:gravity="center_horizontal"
   android:textColorHighlight="#656565">
</TextView>
</LinearLayout>

你的适配器应该是这样的：

public class ImageAdapter extends BaseAdapter{
    Context mContext;
    public static final int ACTIVITY_CREATE = 10;
    public ImageAdapter(Context c){
        mContext = c;
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return 5;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View v;
        if(convertView==null){
            LayoutInflater li = getLayoutInflater();
            v = li.inflate(R.layout.icon, null);
            TextView tv = (TextView)v.findViewById(R.id.icon_text);
            tv.setText("Profile "+position);
            ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
            iv.setImageResource(R.drawable.icon);

        }
        else
        {
            v = convertView;
        }
        return v;
    }
}

如需进一步参考，请查看此帖子Custom Grid View

Answer 2

您可以使用定义 GridView 单元格的 XML 来完成：

image.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
    >
    <ImageView
        android:id="@+id/image"
        android:layout_marginBottom = "10dp"
        android:src="@drawable/cell_sfondo"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
    </ImageView>

<TextView
        android:id="@+id/title" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

然后在你的getView():

if(convertView == null) {
            view = inflater.inflate(R.layout.image, null);
        }
        else
            view = convertView;
ImageView image = (ImageView)view.findViewById(R.id.image);
image.setImageResource(this.thumbs[position]);

Answer 3

Paresh Mayani 有一个非常好的简单示例。这对我帮助很大。

http://www.technotalkative.com/android-gridview-example/

Answer 4

您可以为网格布局的每个单元格中的图像和文本创建布局。我建议从 xml 扩展布局。你可以尝试做这样的事情：

//Use a viewHolder to optimize the list
ViewHolder holder = null;

if (convertView == null) {
   //Create a new view holder to optimize the loading of elements in list
   holder = new ViewHolder();

   convertView = LayoutInflater.from(this.context).inflate(R.layout.my_custom_xml,null) ;
   holder.imageView = (ImageView)convertView.findViewByID(R.id.my_image_view);
   holder.textView = (TextView)convertView.findViewByID(R.id.my_text_view);

   convertView.setTag(holder);
} else {
   holder = (ViewHolder)convertView.getTag();
}

//Bind data to the row

//Set the position in holder
holder.position = position;
//Set the image for each row
holder.imageView ...
//Set the text for each row
holder.textView.setText()...


//And the viewholder looks like this

private class ViewHolder{
//The position of this row in list
private int position;

//The image view for each row
private ImageView imageView;

//The textView for each row
private TextView textView;
}

现在您可以简单地创建包含文本和图像视图的 my_custom_xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "fill_parent"
    android:layout_height = "wrap_content"
    android:orientation= "vertical">
       <ImageView
           android:id = "@+id/my_image_view"
           android:layout_width =  ....
           android:layout_height = ...
       />
      <TextView
          android:id = "@+id/my_text_view"
          android:layout_width = ....
          android:layout_height = ....
       />
</LinearLayout>

Answer 5

你可以inflate layout在适配器的imageview下拥有textview而不是动态imageview：

if(convertView==null){
            inflater=(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            holder=new Holder();
            convertView=inflater.inflate(R.layout.gridinflater, null);
            holder.imageView=(ImageView) convertView.findViewById(R.id.img);

            holder.textView=(TextView) convertView.findViewById(R.id.txt);

            convertView.setTag(holder);
        }
        else {
            holder = (Holder) convertView.getTag();
        }

其中gridInflater 是在相对布局中的 imageview 下具有 textview 作为父级的布局。

public static class Holder {
        public ImageViewProgress imageView;
        public TextView textView;
    }