利用ViewPager实现欢迎引导页面-优快云博客

本文链接：https://blog.youkuaiyun.com/tomcmd/article/details/45014351

源码链接：http://pan.baidu.com/s/1pJLsYxH

几乎所有的APP都会有欢迎界面和引导界面，不但给用户好的体验同时还可以进行广告推广。

这里利用ViewPager来实现欢迎引导页面，流程如下：

整个欢迎引导页的实现大致分为四个过程：

1.添加引导页

2.添加导航点

3.进入主界面按钮

4.添加欢迎界面并用SharedPreferences存储进入状态

注意引导页和欢迎界面的图片不宜过大，否则会内存溢出

下面是部分重要代码：

使用ViewPager得创建一个ViewPagerAdapter：

新建ViewPagerAdapter.java文件，如下：

public class ViewPagerAdapter extends PagerAdapter {
private List<View> views;//用于承载引导页view
private Context context;

public ViewPagerAdapter(List<View> views, Context context) {
this.views = views;
this.context = context;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}

// 相当于adapter的getView()方法
@Override
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}

@Override
public int getCount() {
return views.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
}

之后创建Guide.java 用于加载和初始化引导页和导航点：

public class Guide extends Activity implements OnPageChangeListener{
private ViewPager vp;
private ViewPagerAdapter vpAdapter;
private List<View> views;
private ImageView[] dots;
private int[] ids = {R.id.iv1,R.id.iv2,R.id.iv3};
private Button startBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
//初始化引导页
initViews();

//初始化导航点
initDots();
}
//初始化引导图片
private void initViews(){
LayoutInflater inflater = LayoutInflater.from(this);
views = new ArrayList<View>();

//添加引导页View，分为one.xml,two.xml,three.xml三个布局文件，分别对应三张视图
views.add(inflater.inflate(R.layout.one, null));
views.add(inflater.inflate(R.layout.two, null));
views.add(inflater.inflate(R.layout.three, null));

vpAdapter = new ViewPagerAdapter(views, this);
vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(vpAdapter);
//给进入按钮添加点击事件
startBtn = (Button) views.get(2).findViewById(R.id.start_btn);
startBtn.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
//进入没用的activity
Intent intent = new Intent(Guide.this,MainActivity.class);
startActivity(intent);
//结束当前没用的activity
finish();
}
});
vp.setOnPageChangeListener(this);

}
//初始化点

private void initDots(){
dots = new ImageView[views.size()];
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) findViewById(ids[i]);
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
//Log.e("Guide", "onPageScrollStateChanged");
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
//Log.e("Guide", "onPageScrollStateChanged");
}
@Override
public void onPageSelected(int arg0) {
//Log.e("Guide", "onPageSelected");
for (int i = 0; i < ids.length; i++) {
//如果当前移到的新的页面中等于当前的i，则将当前小图片换成亮的
if(arg0 == i){
dots[i].setImageResource(R.drawable.login_point_selected);
}else{
dots[i].setImageResource(R.drawable.login_point);
}
}
}
}

下面是guide.xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000" >
</android.support.v4.view.ViewPager>