带导航点的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);
            }
        }
    }

}