用ViewPager实现引导页，带页面指示器

为什么今天要写一个引导页呢？

因为今天用了一个应用，名就不提了，页面指示器是做在图片上的

感觉很不爽，看来他们比我还要懒呢╮(╯Д╰)╭

我们先来看一下我们实现的效果，仿来往的

       

     

好的，那我们看看怎么来实现

1、一个布局

当然是一个布局了，因为他就是我们的界面

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GuideActivity" >

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

    <LinearLayout
        android:id="@+id/guide_dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" />

    <ImageButton
        android:id="@+id/guide_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/guide_dots"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:background="@android:color/transparent"
        android:src="@drawable/new_btn"
        android:visibility="gone" />

</RelativeLayout>

1)其中ViewPager是用来存放页面的，

2)LinearLayout是用来存放指示器的，

3)ImageButton是一个按钮，当页面滑动到最后一页的时候，进行跳转的

2、初始化ViewPager 

	private void initPager(){
		viewList = new ArrayList<View>();
		int[] images = new int[] { R.drawable.new01, R.drawable.new02, R.drawable.new03, R.drawable.new04 };
		int[] texts = new int[] { R.drawable.new_text1, R.drawable.new_text2, R.drawable.new_text3, R.drawable.new_text4 };
		for (int i = 0; i < images.length; i++) {
			viewList.add(initView(images[i],texts[i]));
		}
	}

	class ViewPagerAdapter extends PagerAdapter{

		private List<View> data;
		
		
		public ViewPagerAdapter(List<View> data)
		{
			super();
			this.data = data;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return data.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}
		
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
			container.addView(data.get(position));
			return data.get(position);
		}
		
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(data.get(position));
		}
		
	}

这样我们就可以得到一个ViewPager，并且可以进行滑动就行浏览了

3、根据页面数初始化指示器

	private void initDots(int count){
		for (int j = 0; j < count; j++) {
			mDotsLayout.addView(initDot());
		}
		mDotsLayout.getChildAt(0).setSelected(true);
	}

传入Dot的总数量就可以了

4、当前页对应相应的指示器

ViewPager有个监听，可以监听到我们滑动到了第几页

那么，我们就可以在页面滑动到第一页的时候，把相应的指示器设置为Selected

mPager.setOnPageChangeListener(new OnPageChangeListener()
		{
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				for (int i = 0; i < mDotsLayout.getChildCount(); i++) {
					if(i == arg0){
						mDotsLayout.getChildAt(i).setSelected(true);
					} else {
						mDotsLayout.getChildAt(i).setSelected(false);
					}
				}
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});

就这样，我们就实现了一个引导页，带页面指示器的。

这次就把demo上传上来吧， GuideDemo.rar