Android SDK中默认使用的grid view组件每个Item大小是固定的,如果想得到更加灵活的显示方式,让每个item大小不一样,可以考虑引用开源项目StaggeredGridView。
StaggeredGridView允许开发者创建一个类似于Pinterest的交错排列的GridView。开发者只需在自己的项目中将其作为一个库项目添加到workspace中即可直接使用。
GitHub下载地址:https://github.com/maurycyw/StaggeredGridView
Demo演示代码:https://github.com/maurycyw/StaggeredGridViewDemo
将这两个工程代码下载下来后,保存到相同目录(注意要放在同一个根目录,否则StaggeredGridViewDemo引用StaggeredGridView会出错!编译可以通过,但运行时会发生找不到资源的问题),
eclipse中导入这两个工程,
1.将StaggeredGridView设为被引用工程
右键单击StaggeredGridView项目 > 属性 > Android > 在Library中勾选isLibrary
2.为StaggeredGridViewDemo设置引用工程
右键单击StaggeredGridViewDemo > 属性 > Android > 在Library中点击Add添加StaggeredGridView
编译StaggeredGridViewDemo,运行成功!
依照Demo,在自己项目中使用StaggeredGridView:
1.如上所述方法,将StaggeredGridView项目设为被引用工程;
2.如上所述方法,在自己工程中引用StaggeredGridView项目;(同样要注意两个工程放在同一个根目录)
3.在Activity布局中增加StaggeredGridView组件
<com.origamilabs.library.views.StaggeredGridView
android:id="@+id/staggeredGridView1"
staggered:numColumns="2"
staggered:drawSelectorOnTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
4.实例化StaggeredGridView组件对象
public class CustomGridView extends Activity {
private static final String TAG = "CustomGridView";
private int images[] = {
R.drawable.grid_view_1,
R.drawable.grid_view_2,
R.drawable.grid_view_3,
R.drawable.grid_view_4,
R.drawable.grid_view_1,
R.drawable.grid_view_2,
R.drawable.grid_view_3,
R.drawable.grid_view_4,
R.drawable.grid_view_1,
R.drawable.grid_view_2,
R.drawable.grid_view_3,
R.drawable.grid_view_4,
};
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_staggered_grid_view);
StaggeredGridView gridView = (StaggeredGridView) this.findViewById(R.id.staggeredGridView1);
//int margin = getResources().getDimensionPixelSize(R.dimen.margin);
int margin = 10;
gridView.setItemMargin(margin); // set the GridView margin
gridView.setPadding(margin, 0, margin, 0); // have the margin on the sides as well
MyGridViewAdapter adapter = new MyGridViewAdapter(this, R.layout.custom_grid_view_item,
images, new int[]{R.id.imageView1});
gridView.setAdapter(adapter);
adapter.notifyDataSetChanged();
gridView.setOnItemClickListener(new StaggeredGridView.OnItemClickListener() {
@Override
public void onItemClick(StaggeredGridView parent, View v, int position,
long id) {
// TODO Auto-generated method stub
Utility.showConfirmDialog(CustomGridView.this, "Hello", 0, Utility.getGeneralClickListener());
}
});
}
@Override
protected void onDestroy() {
// TODO Auto-generated method stub
super.onDestroy();
}
}
5.为StaggeredGridView创建一个Adapter
public class MyGridViewAdapter extends BaseAdapter {
private static final String TAG = "MyGridViewAdapter";
//private ImageLoader mLoader;
private Context context;
private int layoutId;
private int listData[];
private int to[];
public MyGridViewAdapter(Context context, int layoutId,
int[] listData, int to[]) {
this.context = context;
this.layoutId = layoutId;
this.listData = listData;
this.to = to;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return listData.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return listData[position];
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
LayoutInflater layoutInflator = LayoutInflater.from(context);
convertView = layoutInflator.inflate(R.layout.custom_grid_view_item,
null);
holder = new ViewHolder();
holder.imageView = (ScaleImageView) convertView.findViewById(R.id.imageView1);
convertView.setTag(holder);
}
holder = (ViewHolder) convertView.getTag();
//mLoader.DisplayImage(getItem(position), holder.imageView);
holder.imageView.setImageResource(listData[position]);
return convertView;
}
static class ViewHolder {
ScaleImageView imageView;
}
}
6. Adapter中getView() 使用到的layout
前提:需要将Demo中的ScaleImageView.java文件复制到工程中
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.example.testsummary.ScaleImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@null" />
</FrameLayout>
7.添加响应事件
gridView.setOnItemClickListener(new StaggeredGridView.OnItemClickListener() {
@Override
public void onItemClick(StaggeredGridView parent, View v, int position,
long id) {
// TODO Auto-generated method stub
Utility.showConfirmDialog(CustomGridView.this, "Hello", 0, Utility.getGeneralClickListener());
}
});