Android帶導航點的ViewPager

此處為顯示的布局：

<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>

此處為ViewPager中顯示的布局:

<?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>

代碼部分：
/* 裝分頁顯示的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);
            }
        }
    }

}