Android实现交错的GridView视图

相信大家都有看到过，在很多应用中都出现过安卓自带的GridView控件实现的界面，界面中显示的更多的是规则排列的图或图文并排，但是也存在部分应用界面中显示无规则的图片或图文。这到底是怎么实现的呢？其实很简单，利用开源控件StaggeredGridView-master（点此下载）就能实现了。下面我们就来介绍这个控件的基本用法，其实跟安卓开发工具自带的GridView的使用原理基本是一样的。

一、准备工作

下载完StaggeredGridView-master后解压，将其导入到你的开发工具中，接着自己新建一个项目，鼠标右键你的项目名，然后选择Properties->Android，在界面右下方的Library中点击Add，然后选择你刚才导入的StaggeredGridView-master文件，点击OK，接着再点击OK完成。以后碰到其它的开源控件还是跟这一样的导入方法。

二、写代码

下面开始编辑代码，首先在MainActivity中声明一个StaggeredGridView类的对象，

import com.origamilabs.library.views.StaggeredGridView;

import android.os.Bundle;
import android.app.Activity;


public class MainActivity extends Activity {

	private StaggeredGridView gridView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	
	}

}

然后通过这个类导入进来的包名com.origamilabs.library.views.StaggeredGridView来对布局文件activity_main.xml中的gridview进行定义。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    
    <com.origamilabs.library.views.StaggeredGridView
       android:id="@+id/staggeredGridView"
       android:layout_width="match_parent"
       android:layout_height="match_parent" 
       
        >
    </com.origamilabs.library.views.StaggeredGridView>
    
    
</RelativeLayout>

然后我们再新建一个布局文件gridview_item，作为网格视图中每一个子项的布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

最后我们就可以初始化这个gridview，定义一个简单适配器SimpleAdapter并且为这个gridview设置适配器，这样就将控件和数据捆绑到一块了。

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.origamilabs.library.views.StaggeredGridView;

import android.os.Bundle;
import android.widget.SimpleAdapter;
import android.app.Activity;


public class MainActivity extends Activity {

	private StaggeredGridView gridView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	
		gridView = (StaggeredGridView) findViewById(R.id.staggeredGridView);
		
		SimpleAdapter adapter = new SimpleAdapter(MainActivity.this, getData(), R.layout.gridview_item, new String[]{"img"}, new int[]{R.id.imageView1});
	
	    gridView.setAdapter(adapter);
	}

	
	public List<Map<String, Object>> getData(){
		
		int[] img = new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.f,
				R.drawable.g};
		List<Map<String, Object>> dataList = new ArrayList<Map<String,Object>>();
		for (int i = 0; i < img.length; i++) {
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("img", img[i]);
			dataList.add(map);
		}
		return dataList;
	}
	
}

最后大家来看看运行的效果，图片素材随便找的，大家凑合看，是不是很简单？