码迷,mamicode.com
首页 > 其他好文 > 详细

GridView实现一个图片加多个文本框

时间:2016-06-11 01:58:22      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

GridView的使用是很简单的,API Demo中有例子,但是要实现复杂的GridView,就需要自定义了。

今天我们要实现如下的效果:

技术分享

先说它的布局,它是由gridview和grid_item两部分组成。

main.xml

 

<?xml version="1.0" encoding="utf-8"?>  

<GridView xmlns:android="http://schemas.android.com/apk/res/android"    

android:id="@+id/gridview"  

android:layout_width="fill_parent"    

android:layout_height="fill_parent"  

android:columnWidth="90dp"  

android:numColumns="auto_fit"  

android:verticalSpacing="10dp"  

android:horizontalSpacing="10dp"  

android:stretchMode="columnWidth"  

android:gravity="center"  

/>  

grid_item.xml

 

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

android:layout_width="fill_parent" android:layout_height="fill_parent"  

android:orientation="vertical"  

android:layout_marginTop="5dp"  

>  

<ImageView android:id="@+id/image" android:layout_width="80dip"  

android:layout_height="80dip" android:layout_gravity="center_horizontal">  

</ImageView>  

<TextView android:id="@+id/title" android:layout_width="wrap_content"  

android:layout_height="wrap_content" android:layout_gravity="left"  

android:textSize="16dip"  

android:gravity="left">  

</TextView>  

<TextView android:id="@+id/description" android:layout_width="wrap_content"  

android:layout_height="wrap_content" android:layout_gravity="left"  

android:textColor="#938192"  

android:textSize="13dip"  

android:gravity="left"  

>  

</TextView>  

</LinearLayout>  

接下来我们要新写一个继承自BaseAdapter类的Adapter类,在这里做grid item的适配。

由于我们每个grid item是一个图片加两个文本框,就需要有一个容器类:

 

class GridItem   

    {   

private String title;   

private int imageId;   

private String description;  

public GridItem()   

        {   

super();   

        }   

public GridItem(String title, int imageId,String time)   

        {   

super();   

this.title = title;   

this.imageId = imageId;   

this.description = time;  

        }   

public String getTime( )  

        {  

return description;  

        }  

public String getTitle()   

        {   

return title;   

        }   

public int getImageId()   

        {   

return imageId;   

        }   

    }   

再来个Viewholder

static class ViewHolder   

{   

public ImageView image;   

public TextView title;  

public TextView time;  

}   

接下来的Adapter的实现就顺理成章了。GridItemAdapter

import java.util.ArrayList;  

import java.util.List;  

import android.content.Context;  

import android.view.LayoutInflater;  

import android.view.View;  

import android.view.ViewGroup;  

import android.widget.BaseAdapter;  

import android.widget.ImageView;  

import android.widget.TextView;  

public class GridItemAdapter extends BaseAdapter  

{  

private LayoutInflater inflater;   

private List<GridItem> gridItemList;   

public GridItemAdapter(String[] titles, int[] images,String[] description, Context context)   

    {   

super();   

        gridItemList = new ArrayList<GridItem>();   

        inflater = LayoutInflater.from(context);   

for (int i = 0; i < images.length; i++)   

        {   

            GridItem picture = new GridItem(titles[i], images[i],description[i]);   

            gridItemList.add(picture);   

        }   

    }   

@Override  

public int getCount( )  

    {  

if (null != gridItemList)   

        {   

return gridItemList.size();   

        }   

else  

        {   

return 0;   

        }   

    }  

@Override  

public Object getItem( int position )  

    {  

return gridItemList.get(position);   

    }  

@Override  

public long getItemId( int position )  

    {  

return position;   

    }  

@Override  

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

    {  

        ViewHolder viewHolder;   

if (convertView == null)   

        {   

            convertView = inflater.inflate(R.layout.grid_item, null);   

            viewHolder = new ViewHolder();   

            viewHolder.title = (TextView) convertView.findViewById(R.id.title);   

            viewHolder.image = (ImageView) convertView.findViewById(R.id.image);  

            viewHolder.time = (TextView) convertView.findViewById(R.id.description);   

            convertView.setTag(viewHolder);   

        } else  

        {   

            viewHolder = (ViewHolder) convertView.getTag();   

        }   

        viewHolder.title.setText(gridItemList.get(position).getTitle());  

        viewHolder.time.setText(gridItemList.get(position).getTime());   

        viewHolder.image.setImageResource(gridItemList.get(position).getImageId());   

return convertView;   

    }  

在activity中调用如下:

 

package com.linc.gridview;  

import android.app.Activity;  

import android.os.Bundle;  

import android.view.View;  

import android.widget.AdapterView;  

import android.widget.GridView;  

import android.widget.Toast;  

import android.widget.AdapterView.OnItemClickListener;  

public class CustomGridViewActivity extends Activity {  

private GridView gridView;   

//图片的第一行文字  

private String[] titles = new String[]   

    { "美女卷珠帘", "美女回眸", "美女很有趣", "美女醉酒", "美女微笑", "美女如脱兔", "美女柳叶弯眉"};   

//图片的第二行文字   

private String[] description = new String[]   

    { "啦啦啦", "嘎嘎嘎", "哇哇哇", "喵喵喵", "刚刚刚", "当当当", "咔咔咔"};   

//图片ID数组   

private int[] images = {              

                    R.drawable.five, R.drawable.sample_7,              

                    R.drawable.one, R.drawable.three,              

                    R.drawable.sample_3, R.drawable.sample_7,              

                    R.drawable.sample_0 };  

/** Called when the activity is first created. */  

@Override  

public void onCreate(Bundle savedInstanceState) {  

super.onCreate(savedInstanceState);  

        setContentView(R.layout.main);  

        gridView = (GridView) findViewById(R.id.gridview);   

        GridItemAdapter adapter = new GridItemAdapter(titles, images,description,this);   

        gridView.setAdapter(adapter);   

        gridView.setOnItemClickListener(new OnItemClickListener()   

            {   

@Override  

public void onItemClick(AdapterView<?> parent, View v, int position, long id)   

                {   

                    Toast.makeText(CustomGridViewActivity.this, "item" + (position+1), Toast.LENGTH_SHORT).show();   

                }  

            });   

    }  

}  

这样就可以了,

此实现与ListView类似,熟练使用会带来很好的用户体验。

GridView实现一个图片加多个文本框

标签:

原文地址:http://www.cnblogs.com/dubo-/p/5574594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!