相信大家都用過美團吧,是不是被它的精美的導航頁面給迷住！今天,咱們就實現它那個多頁面滑動導航效果,話不多說，先上效果圖:
                                                    
我是在模擬器上執行的結果,文字樣式大小以及圓點顏色等,大家都可以自己設定,在真機上面效果應該會更好！該專案主要基於ViewPager和gridView的整合應用.專案原始碼連結如下,點選下載

問題思考

(1)viewPager載入的View是什麼,怎麼把這些資料載入進去?
(2)小圓點是怎樣設計的,它樣式怎麼控制？

     我們先看第一個問題,我這裡ViewPager中新增的View直接就是gridView.關鍵程式碼如下:

private void initView() {
		int pageCount = (int) Math.ceil(titles.length
				* 1.0
				/ Integer.parseInt(this.getResources().getString(
						R.string.page_size)));
		for (int i = 0; i < pageCount; i++) {
			GridView gridView = (GridView) View.inflate(this,
					R.layout.gridview, null);
			RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
					-1, -1);
			gridView.setLayoutParams(lp);
			/*
			 * gridView.setAdapter(new SimplePagerAdapter(this,
			 * getDefaultData(), R.layout.item, new String[] { "imgId", "title"
			 * }, new int[] { R.id.imageView, R.id.tv }, i + 1));
			 */
			gridView.setAdapter(new SimplePagerAdapter2(this, getData(),
					R.layout.item, i + 1));
			viewList.add(gridView);
			View v = View.inflate(this, R.layout.dot, null);
			int d = this.getResources().getDimensionPixelOffset(
					R.dimen.dot_diameter);
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(d,
					d);
			params.leftMargin = this.getResources().getDimensionPixelOffset(
					R.dimen.dot_marginLeft);
			v.setLayoutParams(params);
			dotLayout.addView(v);
		}
		// 初始化第一個小圓點
		dotLayout.getChildAt(0).setBackgroundResource(R.drawable.dot_choose);
		viewPager.setAdapter(new BasePagerAdapter(viewList));
 

       可以看到，在這裡，我先計算出有多少個頁面(ceil(資料總數/每頁顯示數量)),在每頁中,例項話一個gridView,並加入到viewList作為ViewPager的PagerAdapter,注意,這時我們就要提供頁數來計算gridView載入的資料了，這個在simplePagerAdapter2(gridView介面卡中)有體現。我們再看看SimplePagerAdapter2中關鍵程式碼如下:

	private Context context;
	private List<Map<integer object="">> data;
	private Integer mresourceId;
	private int currentPage;
	private int pageSize;
	private int pageCount;

	public SimplePagerAdapter2(Context context,
			List<Map<integer object="">> data, Integer mresourceId,
			int currentPage) {
		this.context = context;
		this.data = data;
		this.mresourceId = mresourceId;
		this.currentPage = currentPage;
		this.pageSize = Integer.parseInt(context.getResources().getString(
				R.string.page_size));
		pageCount = (int) Math.ceil(data.size() * 1.0 / this.pageSize);
	}
</integer></integer>
 

           這個是它的屬性和構造方法,可以看到,我這裡的傳遞的資料集合 data型別是List<Map>而不是List<Map>型別,並沒有仿照SimpleAdapter寫法.大家看如下賦值程式碼:

	private List<Map<integer object="">> getData() {
		List<Map<integer object="">> list = new ArrayList<Map<integer object="">>();
		for (int i = 0; i < Math.min(titles.length, imgId.length); i++) {
			Map<integer object=""> map = new HashMap<integer object="">();
			map.put(R.id.imageView, imgId[i]);
			map.put(R.id.tv, titles[i]);
			list.add(map);
		}
		return list;
	}
</integer></integer></integer></integer></integer>
 

             看到沒,我的Map集合的裡的Key是什麼？是不是要解析的每項layout中的view的id！直接設成key後，可以簡化引數傳遞,我在這也只是起到拋磚引玉的作用,大家可以下載程式碼體會,相信你肯定能想到體會.