利用ViewPager实现启动引导页

——热爱开源，乐于分享

利用ViewPager实现启动引导页

实现以下3项功能：

1.在第一次使用启动App时，都会首先进入一个欢迎界面；
2.然后出现一个引导页，最后点击进入主界面；
3.在以后的启动时，不会出现引导页，而是直接从欢迎界面进入主界面。
今天利用ViewPager实现这样一个引导页。

直接上代码（不用担心，我在代码中把注释写得很详细了，不清楚的地方欢迎留言）

---

一、导入图片资源

二、编写欢迎界面

WelcomeAct.java

package com.example.administrator.guide_viewpager;import android.app.Activity;import android.content.Intent;import android.content.SharedPreferences;import android.graphics.PorterDuff;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.annotation.Nullable;/** * Created by Administrator on 2017/7/17. * 用于欢迎界面 * 并且根据判断，是否显示引导页（只有第一次使用显示引导页） */public class WelcomeAct extends Activity{    private boolean isFirstIn=false;//标记是否是第一次使用，如果是则显示引导页    private static final int TIME=2000;//程序沉睡2s后跳转    private static final int GO_HOME=1000;//进入主界面的标记    private static final int GO_GUIDE=1001;//进入引导页的标记    //让该欢迎界面2s后进入相应的界面    //这个欢迎界面是程序的入口（在manifest中设置）    //程序沉睡，最好不要再UI线程中执行，而是开启一个新的线程，此处使用Handler    private Handler mHandler=new Handler(){        public void handleMessage(Message msg){            switch (msg.what){//传递过来的消息                case GO_HOME:                    goHome();//跳转到主界面                    break;                case GO_GUIDE:                    goGuide();//跳转到引导页                    break;            }        };    };    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.welcome);        init();    }    //使用SharedPreferences进行简单键值对数据的存储    private void init(){        //实例化一个SharedPreferences，数据存在名为“myguide”的一个SharedPreferences文件中，且为私有模式        SharedPreferences preferences=getSharedPreferences("myguide", MODE_PRIVATE);        //第一次读取“isFirstIn”字段，肯定是没有的，默认为true        isFirstIn =preferences.getBoolean("isFirstIn",true);        if(!isFirstIn){           mHandler.sendEmptyMessageDelayed(GO_HOME,TIME);//如果不是第一次使用，则进入主界面        }else {            mHandler.sendEmptyMessageDelayed(GO_GUIDE,TIME);//如果是第一次使用，则进入引导页            SharedPreferences.Editor editor=preferences.edit();//并且对SharedPreferences对象进行编辑            editor.putBoolean("isFirstIn",false);//创建一个“isFirstIn”字段，且值为false，即下一次就不是第一次使用了            editor.commit();//提交数据存储        }    }    private void goHome(){        Intent i=new Intent(WelcomeAct.this,MainActivity.class);        startActivity(i);        finish();    }    private void goGuide(){        Intent i=new Intent(WelcomeAct.this,Guide.class);        startActivity(i);        finish();    }}

Welcome.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/welcome"        /></LinearLayout>

三、编写引导界面

Guide.java

package com.example.administrator.guide_viewpager;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.view.ViewPager;import android.text.Layout;import android.view.LayoutInflater;import android.view.View;import android.widget.Button;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;/** * Created by Administrator on 2017/7/17. */public class Guide extends Activity implements ViewPager.OnPageChangeListener {    private ViewPager vp;//ViewPager控件    private ViewPagerAdapter vpAdapter;//ViewPager所需要的适配器，继承自PagerAdapter    private List<View> views;//承载需要展示的几个view    private ImageView[] dots;//下面的指示图标用的ImageView控件，数量与List<View> views一样    //指示图标的id    private int[] ids={R.id.iv1,R.id.iv2,R.id.iv3};//ImageView控件的id（后面会利用findViewbyID（）方法找ImageView ）    private Button start_btn;//第一次使用app时候进入主界面的按钮，放在第三个View中    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.guide);        initView();//初始化UI        initDots();//初始化指示图片ImageView控件    }    private void initView(){        LayoutInflater inflater=LayoutInflater.from(this);        //实例化装载需要显示的view的泛型list，然后依次加入三个布局view        //在代码中动态获取view需要使用LayoutInflater的实例化对象！！！！！！！        views=new ArrayList<View>();        //找到三个需要展示的View的布局文件        views.add(inflater.inflate(R.layout.one,null));        views.add(inflater.inflate(R.layout.two,null));        views.add(inflater.inflate(R.layout.three,null));        //实例化自定义的adapter,并给ViewPager控件设置这个adapter        vpAdapter=new ViewPagerAdapter(views,this);        vp=(ViewPager) findViewById(R.id.viewpager);//初始化ViewPager控件        vp.setAdapter(vpAdapter);//设置Adapter        start_btn=(Button)views.get(2).findViewById(R.id.star_btn);//此处不能直接findViewById，                                                                   // 因为button不在setContentView(R.layout.guide)中;                                                                   //而在需要展示的第三个布局view中，而这个view在List<View> views对象中        //跳转到主界面的事件监听        start_btn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Intent i=new Intent(Guide.this,MainActivity.class);                startActivity(i);                finish();            }        });        //为ViewPager设置滑动的事件监听，重写的方法为最后三个        vp.addOnPageChangeListener(this);//此处不能使用set（已经过时），而要用add，这是api版本的问题    }    private void initDots(){        dots=new ImageView[views.size()];        for(int i=0;i<views.size();i++){            dots[i]=(ImageView)findViewById(ids[i]);        }    }    //以下是监听ViewPager改变时候的监听的三个重写方法    //此处监听是用于处理view改变时，导航点的改变    //当滑动状态改变时候调用    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    //当新的页面被选中时候调用    @Override    public void onPageSelected(int position) {        for(int i=0;i<ids.length;i++){            if (position==i){//如果当前移到的新的页面等于i，那就把第i个导航点用亮的图片显示                dots[i].setImageResource(R.drawable.icon_select);            }else{                dots[i].setImageResource(R.drawable.icon_gray);            }        }    }    //当页面被滑动时候调用    @Override    public void onPageScrollStateChanged(int state) {    }}

ViewPagerAdapter.java

package com.example.administrator.guide_viewpager;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * Created by Administrator on 2017/7/17. */public class ViewPagerAdapter extends PagerAdapter {    private List<View> views;    private Context context;    //添加构造器，供外部实例化并传参List<View> views    public ViewPagerAdapter(List<View> views,Context context){        this.views=views;        this.context=context;    }    //当这个View不需要时，将其销毁    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        ((ViewPager)container).removeView(views.get(position));//利用container移除    }    //得到视图View，类似于adapter的getView（）方法    @Override    public Object instantiateItem(ViewGroup container, int position) {        ((ViewPager)container).addView(views.get(position));        return views.get(position);//返回视图View    }    //需要展示的视图的个数，即存在List<View>中的view的个数    @Override    public int getCount() {        return views.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return (view==object);//是否是需要的视图，返回ture    }}

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="fill_parent"        android:layout_height="fill_parent"        android:background="#00000000"        >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:id="@+id/ll"        android:orientation="horizontal"        android:gravity="center_horizontal"        android:layout_alignParentBottom="true">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/iv1"            android:src="@drawable/icon_select"            />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/iv2"            android:src="@drawable/icon_gray"            />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/iv3"            android:src="@drawable/icon_gray"            />    </LinearLayout></RelativeLayout>

需要展示的第一个View：one.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/guideone"        /></LinearLayout>

需要展示的第一个View：two.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/guidetwo"        /></LinearLayout>

需要展示的第一个View：three.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">    <ImageView        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/guidethree"        />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:orientation="horizontal"        android:layout_alignParentBottom="true">        <Button            android:id="@+id/star_btn"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="进入主界面"            />    </LinearLayout></RelativeLayout>

四、MainActivity.java

因为是示例程序，这里我保持默认即可。当然进入这个主界面后可以根据开发者的需求进行各种开发。

五、在AndroidManifest.xml中修改程序入口

将程序入口改为欢迎界面WelcomeAct

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.administrator.guide_viewpager">    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".MainActivity">        </activity>        <activity android:name=".Guide">        </activity>        <activity android:name=".WelcomeAct">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

六、结束！