IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]Android自定义GridView之实现一个图片加多个文本框

    lincyang发表于 2012-01-01 00:52:58
    love 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是一个图片加两个文本框,就需要有一个容器类:

    GridItem类:

    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类似,熟练使用会带来很好的用户体验。








沪ICP备19023445号-2号
友情链接