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下载查看,
代码中的引导页图片采用的是陌陌的图片。
到此为止,用户引导页面便以完成,聊以记录,以备日后查看。