帶導航點的ViewPager

此處爲顯示的佈局：

<!-- lang: xml -->

<?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" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
        android:id="@+id/navigation_page"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

</LinearLayout>

此處爲ViewPager中顯示的佈局:

<!-- lang: xml -->
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/img_navigation_page" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY"/>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/img_cancel"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_btn_chat_text" />

    <Button
        android:id="@+id/btn_enter"
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:background="@drawable/invite_btn_bg"
        android:text="@string/trend_navigation"
        android:textColor="@color/red"
        android:textSize="15sp"
        android:visibility="invisible" />
</RelativeLayout>

</FrameLayout> 代碼部分： /** 裝分頁顯示的view的數組 */ private ArrayList<View> pageViews; private ImageView imageView;

/** 將小圓點的圖片用數組表示 */
private ImageView[] imageViews;

// 包裹小圓點的LinearLayout
private LinearLayout mViewPoints;

    //初始化要顯示的頁面，添加到view集合中
private void init(Context context) {
	// 將要分頁顯示的View裝入數組中
	pageViews = new ArrayList<View>();
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
}

//初始化顯示的控件，有viewpager和顯示導航點的linearlayout private void initView(Context context,View v) {

// 建立imageviews數組，大小是要顯示的圖片的數量
	imageViews = new ImageView[pageViews.size()];
	// 實例化小圓點的linearLayout和viewpager
	 mViewPoints = (LinearLayout) v.findViewById(R.id.viewGroup);
	 mViewPager = (ViewPager) v.findViewById(R.id.navigation_page);

	// 添加小圓點的圖片
	for (int i = 0; i < pageViews.size(); i++) {
		imageView = new ImageView(context);
		// 設置小圓點imageview的參數
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
				10, 10);
		layoutParams.setMargins(5, 0, 5, 0);
		imageView.setLayoutParams(layoutParams);// 建立一個寬高均爲20 的佈局
		// 將小圓點layout添加到數組中
		imageViews[i] = imageView;
		// 默認選中的是第一張圖片，此時第一個小圓點是選中狀態，其餘不是
		if (i == 0) {
			imageViews[i]
					.setBackgroundResource(R.drawable.indicator_normal_pressed);
		} else {
			imageViews[i]
					.setBackgroundResource(R.drawable.indicator_normal);
		}

		// 將imageviews添加到小圓點視圖組
		mViewPoints.addView(imageViews[i]);
	}
	// 設置viewpager的適配器和監聽事件
	mViewPager.setAdapter(new NavigationPageAdapter());
	mViewPager.setOnPageChangeListener(new NavigationPageChangeListener());

}
    //設置要顯示的pageradapter類
private class NavigationPageAdapter extends PagerAdapter {

	// 銷燬position位置的界面
	@Override
	public void destroyItem(View v, int position, Object arg2) {
		((ViewPager) v).removeView((View) arg2);
	}

	// 獲取當前窗體界面數
	@Override
	public int getCount() {
		return pageViews.size();
	}

	// 初始化position位置的界面
	@Override
	public Object instantiateItem(View v, int position) {
		View contentView = pageViews.get(position);
                /**
                      *顯示頁面的相關操做
                      **/
		((ViewPager) v).addView(contentView, 0);
		return pageViews.get(position);
	}

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

	@Override
	public void startUpdate(View arg0) {
	}

	@Override
	public int getItemPosition(Object object) {
		return super.getItemPosition(object);
	}

}
    //設置viewpager滑動的事件，實現導航點的滾動

private class NavigationPageChangeListener implements OnPageChangeListener {

@Override
	public void onPageScrollStateChanged(int arg0) {
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
	}

	@Override
	public void onPageSelected(int position) {
		for (int i = 0; i < imageViews.length; i++) {
			imageViews[position]
					.setBackgroundResource(R.drawable.indicator_normal_pressed);
			// 不是當前選中的page，其小圓點設置爲未選中的狀態
			if (position != i) {
				imageViews[i]
						.setBackgroundResource(R.drawable.indicator_normal);
			}
		}
	}

}