GridView每行显示不同列数效果模拟

最近在用支付宝的app，觉得其界面中主页挺有意思，也想写出这种效果。因为GridView每行列数固定，查了很久也没有找到相应的解决方法。为了也达到这种效果，就先在ListView中每个item设为一个GridView，以多布局的形式模拟这种效果。

首先是listview的adapter

public class MyAdapter extends BaseAdapter {

	private Context context;
	private int size;
	private int select;
	private int screenwidth;
	private int width;
	private List<String> list = null;
	
	private ArrayList<String> mlist = new ArrayList<String>();
	private ArrayList<View> views;

	public MyAdapter(Context context, int size, int select, int screenwidth,
			int width, List<String> list) {
		super();
		this.context = context;
		this.size = size;
		this.select = select;
		this.screenwidth = screenwidth;
		this.width = width;
		this.list = list;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return size;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}
	
	@Override
	public int getItemViewType(int position) {
		if (select == position) {
			return 0;
		}
		return 1;
	}
	@Override
	public int getViewTypeCount() {
		// TODO Auto-generated method stub
		return 2;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder viewholder = null;
		if (convertView == null) {
			viewholder = new ViewHolder();
			if(position == select){
				convertView = LayoutInflater.from(context).inflate(
						R.layout.vp, null);	
				viewholder.vp = (ViewPager) convertView.findViewById(R.id.vp);
			}else{
				convertView = LayoutInflater.from(context).inflate(
						R.layout.lv_item, null);
				viewholder.gv = (GridView) convertView.findViewById(R.id.gv);
			}
			convertView.setTag(viewholder);
		} else {
			viewholder = (ViewHolder) convertView.getTag();
		}
		if(position == select){
			views = new ArrayList<View>();
			LayoutInflater inflater = ((Activity) context).getLayoutInflater();
			views.add(inflater.inflate(R.layout.page1, null));
			views.add(inflater.inflate(R.layout.page2, null));
			
			viewholder.vp.setAdapter(new MyViewPager(views));
		}else{
			mlist = new ArrayList<String>();
			int lnum;
			if (position < select) {
				lnum = position * 4;
			} else {
				lnum = (position - 1) * 4;
			}
			for (int i = lnum; i < lnum + 4; i++) {
				mlist.add(list.get(i));
			}
			MyGridAdapter adapter = new MyGridAdapter(context, width, mlist);
			viewholder.gv.setAdapter(adapter);
		}
		

		return convertView;
	}

	final static class ViewHolder {
		GridView gv;
		ViewPager vp;
	}
	
	class MyViewPager extends PagerAdapter {
		public ArrayList<View> list;

		public MyViewPager(ArrayList<View> list) {
			this.list = list;
		}
		
		@Override
		public int getCount() {
			
			return list.size();
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(list.get(position), 0);

			
			return list.get(position);
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(list.get(position));
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

	}

}

其中下面是分别确定布局类型及布局数量的

@Override
	public int getItemViewType(int position) {
		if (select == position) {
			return 0;
		}
		return 1;
	}
	@Override
	public int getViewTypeCount() {
		// TODO Auto-generated method stub
		return 2;
	}

还要对viewpager根据你确定的那行进行判别

if(position == select){
		<span style="white-space:pre">	</span>views = new ArrayList<View>();
			LayoutInflater inflater = ((Activity) context).getLayoutInflater();
			views.add(inflater.inflate(R.layout.page1, null));
			views.add(inflater.inflate(R.layout.page2, null));
			
			viewholder.vp.setAdapter(new MyViewPager(views));
		}

然后是GridView的适配器

public class MyGridAdapter extends BaseAdapter {

	private Context context;
	private int width;
	private List<String> list = null;

	public MyGridAdapter(Context context, int width, List<String> list) {
		super();
		this.context = context;
		this.width = width;
		this.list = list;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return 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 viewholder = null;
		if (convertView == null) {
			viewholder = new ViewHolder();
			convertView = LayoutInflater.from(context).inflate(
					R.layout.gv_item, null);
			viewholder.tv = (TextView) convertView.findViewById(R.id.tv);
			convertView.setTag(viewholder);
		} else {
			viewholder = (ViewHolder) convertView.getTag();
		}

		LinearLayout.LayoutParams mLinearparams = (LayoutParams) viewholder.tv
				.getLayoutParams();
		mLinearparams.width = width;
		mLinearparams.height = width;
		viewholder.tv.setLayoutParams(mLinearparams);

		viewholder.tv.setText(list.get(position));

		return convertView;
	}

	final static class ViewHolder {
		TextView tv;
	}

}

DEMO