android ViewPager 实现点击小圆点切换页面 案例

android ViewPager  实现点击小圆点切换页面

说明：在viewpager中，通过左右滑动可以切换页面，同样可以通过点击所指示的小圆点来滑动到某个页面页面。

具体实现方法如下：

主要activity：

<?xmlversion="1.0"encoding="utf-8"?>

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

    <android.support.v4.view.ViewPager

        android:id="@+id/guidePages"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"/>

       

    <RelativeLayout  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:orientation="vertical">

    <LinearLayout  

        android:id="@+id/viewGroup"  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:layout_alignParentBottom="true"  

        android:layout_marginBottom="30dp"  

        android:gravity="center_horizontal"  

        android:orientation="horizontal">  

    </LinearLayout>  

    </RelativeLayout>

</FrameLayout>

主Class：

public class MainActivity extends Activity {

    private ViewPagerviewPager;  

    private ArrayList<View>pageViews;  

    private ViewGroupmain,group;  

    private ImageViewimageView;  

    private ImageView[]imageViews; 

    public int a = 0;

    public int i = 0;

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        this.requestWindowFeature(Window.FEATURE_NO_TITLE);

        

        LayoutInflater inflater = getLayoutInflater();  

        pageViews =new ArrayList<View>();  

        pageViews.add(inflater.inflate(R.layout.item01,null));  

        pageViews.add(inflater.inflate(R.layout.item02,null));  

        pageViews.add(inflater.inflate(R.layout.item03,null));  

        pageViews.add(inflater.inflate(R.layout.item04,null));   

  

        imageViews =new ImageView[pageViews.size()];  

        main = (ViewGroup)inflater.inflate(R.layout.activity_main,null);  

        

        

        group = (ViewGroup)main.findViewById(R.id.viewGroup);

  

        viewPager = (ViewPager)main.findViewById(R.id.guidePages);  

  

        for (i = 0;i <pageViews.size(); i++) {  

            imageView =new ImageView(MainActivity.this);  

            imageView.setLayoutParams(new LayoutParams(40,40));  

            imageView.setPadding(20, 0, 20, 0);  

            imageViews[i] =imageView;  

            

            

            if (i == 0) {  

                //默认选中第一张图片

                imageViews[i].setBackgroundResource(R.drawable.head_portrait);  

                

            } else {  

                imageViews[i].setBackgroundResource(R.drawable.ic_launcher);  

            }  

            imageViews[i].setOnClickListener(new OnClickListener() {

@Override

publicvoid onClick(View v) {

intk =i;

viewPager.setCurrentItem(where(imageViews,(ImageView)v));

Log.d("-------","-------------" +i);

}

});

            group.addView(imageViews[i]);  

        }  

  

        setContentView(main);  

  

        viewPager.setAdapter(new GuidePageAdapter());  

        viewPager.setOnPageChangeListener(new GuidePageChangeListener());  

    }

    

    

    public int where(ImageView[] imageviews,ImageView imageview){

    for(int i = 0;i < imageviews.length;i++){

    if(imageviews[i] == imageview){

    return i;

    }

    }

    return -1;    

    }

    

    /** 指引页面Adapter */

    class GuidePageAdapterextends PagerAdapter {  

      

        @Override  

        publicint getCount() {  

            returnpageViews.size();  

        }  

  

        @Override  

        publicboolean isViewFromObject(View arg0, Object arg1) {  

            return arg0 == arg1;  

        }  

  

        @Override  

        publicint getItemPosition(Object object) {  

            //TODO Auto-generated method stub  

            returnsuper.getItemPosition(object);  

        }  

  

        @Override  

        publicvoid destroyItem(View arg0,int arg1, Object arg2) {  

            //TODO Auto-generated method stub  

            ((ViewPager) arg0).removeView(pageViews.get(arg1));  

        }  

  

        @Override  

        public Object instantiateItem(View arg0,int arg1) {  

            //TODO Auto-generated method stub  

            ((ViewPager) arg0).addView(pageViews.get(arg1));  

            returnpageViews.get(arg1) ;

        }  

  

        @Override  

        publicvoid restoreState(Parcelable arg0, ClassLoader arg1) {  

            //TODO Auto-generated method stub  

  

        }  

  

        @Override  

        public Parcelable saveState() {  

            returnnull;  

        }  

  

        @Override  

        publicvoid startUpdate(View arg0) {  

  

        }  

  

        @Override  

        publicvoid finishUpdate(View arg0) {  

  

        }  

    } 

    

    /** 指引页面改监听器 */

    class GuidePageChangeListenerimplements OnPageChangeListener {  

  

        @Override  

        publicvoid onPageScrollStateChanged(int arg0) {  

            //TODO Auto-generated method stub  

  

        }  

  

        @Override  

        publicvoid onPageScrolled(int arg0,float arg1, int arg2) {  

            //TODO Auto-generated method stub  

  

        }  

  

        @Override  

        publicvoid onPageSelected(int arg0) {  

            for (int i = 0; i <imageViews.length; i++) {  

                imageViews[arg0]  

                        .setBackgroundResource(R.drawable.head_portrait);  

                if (arg0 != i) {  

                    imageViews[i]  

                            .setBackgroundResource(R.drawable.ic_launcher);  

                }  

            }

  

        }  

  

    }  

}

四个页面文件：

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

    

    <ImageView  

        android:layout_width="fill_parent"  

        android:layout_height="fill_parent"  

        android:background="#f00">  

    </ImageView>

    

</LinearLayout>

运行效果：

demo下载：http://download.csdn.net/detail/lyhdream/5170654

（点击小图标切换不同页面）