用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