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下载查看,

代码中的引导页图片采用的是陌陌的图片。
到此为止,用户引导页面便以完成,聊以记录,以备日后查看。


 

猜你喜欢

转载自blog.csdn.net/u010361276/article/details/45070177