前段时间因为项目需要,需要一个只有一行的GridView,而且当一行内容较多的时候,可以左右滑动。一开始想到使用Gallery,但是现在已经过时了。于是决定自定义一个。
基本思路是用一个HorizonScrollView包住一个GridView,然后根据数据的长度,动态计算GridView的宽度。
先看下效果:
具体实现如下:
首先是布局文件
<?xml version="1.0" encoding="utf-8"?> <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/grid_view_container" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <GridView android:id="@+id/grid_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" /> </LinearLayout> </HorizontalScrollView>
然后在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<Context, Void, LinkedList<OneRowGridItem>> {
private Context context;
@Override
protected LinkedList<OneRowGridItem> doInBackground(Context... arg0) {
LinkedList<OneRowGridItem> dataList = new LinkedList<OneRowGridItem>();
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<OneRowGridItem> 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<OneRowGridItem> itemList = new LinkedList<OneRowGridItem>();
private Context context;
private int selectedItemIndex = -1;
public OneRowGridAdapter(Context context, List<OneRowGridItem> 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的布局如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/one_row_grid_item" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" > <ImageView android:id="@+id/one_row_grid_item_image" android:src="@drawable/kfc" android:layout_width="70dp" android:layout_height="70dp" android:duplicateParentState="true"/> <TextView android:id="@+id/one_row_grid_item_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:duplicateParentState="true" android:ellipsize="end" android:singleLine="true" android:textColor="#ff000000" android:textSize="16sp" android:text="@string/kfc" android:layout_gravity="center"/> </LinearLayout>
这样我们就基本实现了一行显示的GridView,至于他的事件可以参考GridView的事件处理,这里需要提示下,在GridView的OnItemClickListener的onClick方法中,需要调用adaptor的setSelection以改变选中Item的背景颜色。