Android实现只有一行的GridView

前段时间因为项目需要，需要一个只有一行的GridView，而且当一行内容较多的时候，可以左右滑动。一开始想到使用Gallery，但是现在已经过时了。于是决定自定义一个。

基本思路是用一个HorizonScrollView包住一个GridView，然后根据数据的长度，动态计算GridView的宽度。

先看下效果：

 

具体实现如下：

首先是布局文件

 然后在Activity中加载GridView所需要填充的数据

oneRowGridView = (GridView) findViewById(R.id.grid_view);
oneRowGridView.setOnItemClickListener(this);
GetDataAsyncTask getDataAsyncTask = new GetDataAsyncTask();
getDataAsyncTask.execute(this.getApplicationContext());

 这里使用一个AsyncTask来加载数据，因为一般来说数据加载是一个比较耗时的操作，如果在Android UI线程直接加载，可能会阻塞UI线程，带来不好的用户体验。耗时操作之后，更新UI，并动态设置GridView的宽度。AsyncTask详细代码如下：

     private class GetDataAsyncTask extends AsyncTask> {
         private Context context;

         @Override
         protected LinkedList doInBackground(Context... arg0) {
             LinkedList dataList = new LinkedList();
             this.context = arg0[0];
     
             OneRowGridItem itemKfc = new OneRowGridItem();
             itemKfc.setText("kfc");
             itemKfc.setImage(context.getResources().getDrawable(R.drawable.kfc));
             dataList.add(itemKfc);
             
             //为了方便，此处直接加载drawable下面图片
           
             return dataList;
         }

         @Override
         protected void onPostExecute(LinkedList result) {
             oneRowGridAdapter = new OneRowGridAdapter(context, result);
             oneRowGridView.setAdapter(oneRowGridAdapter);
            
             int itemWidth = (int)(70 * context.getResources().getDisplayMetrics().density);
             int itemSize = result.size();
             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(itemSize * itemWidth, LinearLayout.LayoutParams.WRAP_CONTENT);
             oneRowGridView.setLayoutParams(params);
             oneRowGridView.setNumColumns(itemSize);
         }
     }

 可以看到在onPostExecute方法中，动态设置了GridView的宽度，以保证一行显示OneRowGridAdapter是自定义了GridView中每个Item的显示。

package com.cchen.myviews;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
 
import java.util.LinkedList;
import java.util.List;
 
/**
* Created by cchen on 2014/7/24.
*/
public class OneRowGridAdapter extends BaseAdapter {
        private List itemList = new LinkedList();
        private Context context;
        private int selectedItemIndex = -1;
 
        public OneRowGridAdapter(Context context, List categoryIconList) {
                this.itemList = categoryIconList;
                this.context = context;
        }
 
        public void setSelection(int index) {
                this.selectedItemIndex = index;
                this.notifyDataSetChanged();
        }
 
        public int getSelection() { return this.selectedItemIndex; }
 
        @Override
        public int getCount() {
                return itemList.size();
        }
 
        @Override
        public Object getItem(int position) {
                return itemList.get(position);
        }
 
        @Override
        public long getItemId(int position) {
                return position;
        }
 
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
                convertView = LayoutInflater.from(context).inflate(R.layout.one_row_grid_item, null);
                ImageView imageView = (ImageView) convertView.findViewById(R.id.one_row_grid_item_image);
                imageView.setImageDrawable(itemList.get(position).getImage());
                TextView textView = (TextView) convertView.findViewById(R.id.one_row_grid_item_text);
                textView.setText(itemList.get(position).getText());
 
                if(position == selectedItemIndex) {
                        convertView.setBackgroundColor(context.getResources().getColor(R.color.one_row_grid_item_bg));
                } else {
                        convertView.setBackgroundColor(Color.TRANSPARENT);
                }
 
                return convertView;
        }
}

其中，R.layout.one_row_grid_item就是没一个Item的布局文件。可以看到新添加了一个selectedItemIndex，这是为了实现在某个Item选中的时候，改变他的背景颜色，使得该Item突出显示。虽然可以使用selector定义Item选中和未选中时候的样式，但那只限于手指接触到该控件，手指离开时，会恢复到初始样式。Item的布局如下：

 这样我们就基本实现了一行显示的GridView，至于他的事件可以参考GridView的事件处理，这里需要提示下，在GridView的OnItemClickListener的onClick方法中，需要调用adaptor的setSelection以改变选中Item的背景颜色。