Android开源项目 - StaggeredGridView, 可伸缩的GridView

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());
   }
  });