android通過viewpager實作引導頁效果

viewpager實作使用者引導頁面

現在很多成功的app裡面都回有可以滑動的使用者引導頁面，既展現了産品的友好性，也突出的展示了app中的亮點。

本文就帶大家一起學習下如何通過viewpager實作使用者引導頁面。

說來很簡單，一個FragmentActivity  一個adapter就可以搞定了。

布局檔案:

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<com.zjtx.demo.widget.ScrollViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/userguide_svp_pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</com.zjtx.demo.widget.ScrollViewPager>
用v4包裡的ViewPager也可以，ViewPager要填寫完整的包名。
demo裡面是viewpager實作的</span>
           

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager 
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/userguide_svp_pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
</span>
           

adapter也比較簡單,主要是重寫PagerAdapter的instantiateItem方法(個人了解的和BaseAdapter的getView方法差不多),在最後一頁的時候做點選事件的處理。

<span style="font-size:18px;">@Override
 public Object instantiateItem(ViewGroup container, int position) {
  View view = LayoutInflater.from(mContext).inflate(
    R.layout.include_userguide_item, null);
  ImageView mIvContent = (ImageView) view
    .findViewById(R.id.userguide_iv_content);
  ImageView mIvBottom = (ImageView) view
    .findViewById(R.id.userguide_iv_bottom);
  if (position < getCount()) {
   mIvContent.setImageDrawable(mContents.getDrawable(position));
   mIvBottom.setImageDrawable(mBottoms.getDrawable(position));
  }
  if (position == 0 || position == getCount() - 1) {
   if (mBackgrounds.getValue(position, mTypedValue)
     && mTypedValue.resourceId != 0) {
    mIvContent.setBackgroundDrawable(mBackgrounds
      .getDrawable(position));
   }
  }
  if (position == getCount() - 1) {
   Button mBtnEnter = (Button) view
     .findViewById(R.id.userguide_btn_enter);
   mBtnEnter.setVisibility(View.VISIBLE);
   mBtnEnter.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
     ((Activity) mContext).finish();
    }
   });
  }
  container.addView(view);
  return view;
 }
</span>
           

還有個值得一提的是做了個按鈕的點選效果,在drawable/btn_default_submit.xml,有興趣的可以研究一下。

有任何疑問可以追問，共同探讨。

具體的例子請移步http://download.csdn.net/detail/u010361276/8599333下載下傳檢視,

代碼中的引導頁圖檔采用的是陌陌的圖檔。

到此為止,使用者引導頁面便以完成,聊以記錄,以備日後檢視。