APP实用开发——引导界面

在App开中首先跟用户进行交互的事Splash页面，也就是引导页面，一般是更新了什么内容，或者有什么样的活动，怎样操作等，现在越来越多的应用引导页面越来越炫彩，所以引导页面在你app用户好感度上也有重大的关系。
例如：

案例1

进入页面之后，根据页面版本判断时候更新，弹出更新 对话框，True就进入下载安装页面功能，false就跳转到主页
布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash"
    >
    <!-- shadowColor : 阴影的颜色 
         shadowDx : x轴偏移量
         shadowRadius : 偏移的角度
    -->
    <TextView
        android:id="@+id/splash_tv_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="版本:1.0" 
        android:textSize="18sp"
        android:textColor="#FFFFFF"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:shadowColor="#FF0000"
        android:shadowDx="1"
        android:shadowDy="1"
        android:shadowRadius="2"
        />

</RelativeLayout>

public class SplashActivity extends Activity {

    /**请求路径**/
    private static final String CONNECTURL = "http://10.0.2.2:8080/updateinfo.html";
    /**保存的路径**/
    private static final String SAVEURL = "mnt/sdcard/mobliesafe97_2.apk";
    private TextView mVersion;
    private int mNewsVersion;
    private String mNewsUrl;
    private String mNewsMsg;
    private ProgressDialog progressDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题栏，必须放在setContentView之前执行，而且只在当前的activity生效
        setContentView(R.layout.activity_splash);

        initView();
    }

    /**
     * 初始化控件
     */
    private void initView() {
        mVersion = (TextView) findViewById(R.id.splash_tv_version);
        //获取当前应用程序的版本号码，设置给textview展示
        mVersion.setText("版本:"+PackageTool.getVersionName(this));

        //延迟两秒钟中请求服务器进行更新版本操作
        //update();
        //延迟多长时间给handler发送消息
        //参数1：handler接受到消息执行的操作
        //参数2：延迟的事件
        /*new Handler().postDelayed(new Runnable() {

            @Override
            public void run() {
                update();
            }
        }, 2000);*/

        //延迟多长时间给handler发送消息
        new Handler(){
            public void handleMessage(android.os.Message msg) {
                update();
            };
        }.sendEmptyMessageDelayed(0, 2000);//what:消息的标示;delayMillis:延迟时间
    }

    /**
     * 更新版本操作
     */
    private void update() {
        //1.链接服务器，获取服务器数据，判断是否有最新版本
        //1.1.链接服务器，联网操作，子线程，权限，HttpUrlConnection  xutils  httpclient  volly  okhttp 
        //参数：链接超时时间
        HttpUtils httpUtils = new HttpUtils(2000);
        //参数1：请求方式
        //参数2：请求路径
        //参数3：请求的参数
        //参数4：RequestCallBack请求回调
        httpUtils.send(HttpMethod.GET, CONNECTURL, null, new RequestCallBack<String>() {
            //请求成功调用的方法
            @Override
            public void onSuccess(ResponseInfo<String> responseInfo) {
                //1.2.获取服务器返回的数据，问题：服务器返回那些数据：code:新版本的版本号     apkurl:新版本的下载地址      msg:新版本的描述信息，描述更新的内容的
                //问题：需要知道服务器如何封装数据   xml  json
                String json = responseInfo.result;//获取服务器返回的数据
                System.out.println(json);
                //1.2.1.解析获取到json数据
                processJSON(json);
            }

            //请求失败调用的方法
            @Override
            public void onFailure(HttpException arg0, String arg1) {
                //请求失败的时候跳转到首页
                enterHome();
            }
        });
    }

    /**
     * 1.2.1.解析获取到json数据
     * @param json
     */
    protected void processJSON(String json) {
        try {
            JSONObject jsonObject = new JSONObject(json);
            mNewsVersion = jsonObject.getInt("code");
            mNewsUrl = jsonObject.getString("apkurl");
            mNewsMsg = jsonObject.getString("msg");

            System.out.println("code:"+mNewsVersion+" apkurl:"+mNewsUrl+" msg:"+mNewsMsg);

            //1.3.判断是否有最新版本
            //判断服务器中新版本的版本号和当前应用程序的版本号是否一致，一致：没有最新版本，不一致：有最新版本
            if (mNewsVersion == PackageTool.getVersionCode(this)) {
                //一致：没有最新版本
                //跳转到首页
                enterHome();
            }else{
                //不一致：有最新版本
                //2.弹出更新版本的对话框
                showUpdateDialog();
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

    /**
     * 跳转首页的操作
     */
    protected void enterHome() {
        Intent intent = new Intent(this,HomeActivity.class);
        startActivity(intent);
        finish();//移除/结束当前的activity，在跳转成功之后，移除SplashActivity，这样当从HomActivity点击返回键返回的时候，因为不会找到SplashActivity所以会直接退出应用程序
    }

    /**
     * 2.创建提醒用户更新版本的对话框
     */
    private void showUpdateDialog() {
        AlertDialog.Builder builder = new Builder(this);

        //builder.setCancelable(false);//设置对话框是否可以消失，true:可以；false:不可以,屏蔽返回键

        //设置对话框的标题
        builder.setTitle("最新版本："+mNewsVersion+".0");
        //设置图标
        builder.setIcon(R.drawable.ic_launcher);
        //设置对话框内容
        builder.setMessage(mNewsMsg);

        //监听对话框消失的时候
        builder.setOnCancelListener(new OnCancelListener() {

            @Override
            public void onCancel(DialogInterface dialog) {
                //跳转到首页的操作
                dialog.dismiss();
                enterHome();
            }
        });

        //创建按钮
        builder.setPositiveButton("立即更新", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                //隐藏对话框，下载最新版本apk
                dialog.dismiss();
                //3.下载最新版本apk
                downloadAPK();
            }
        });
        builder.setNegativeButton("以后再说", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                //隐藏对话框，跳转到首页
                dialog.dismiss();
                enterHome();
            }
        });
        //展示对话框
        builder.show();
        //builder.create().show();//相同的效果
    }

    /**
     * 3.下载最新版的apk
     */
    protected void downloadAPK() {
        //判断SD卡是否挂载
        if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {

            //3.2.在下载的时候，弹出进度条的对话框
            showProgressDialog();

            //3.1.从服务器下载，联网操作
            HttpUtils httpUtils = new HttpUtils();
            //下载操作
            //问题：1.设置下载路径；2.SD卡权限；3.判断SD卡是否挂载成功；4.生成一个2.0版本的apk存放到服务器
            //参数1：下载的路径
            //参数2：保存的路径
            //参数3：下载回调
            httpUtils.download(mNewsUrl, SAVEURL, new RequestCallBack() {

                @Override
                public void onSuccess(ResponseInfo arg0) {
                    //下载成功，隐藏进度条对话框
                    progressDialog.dismiss();
                    //4.安装最新版本apk
                    installAPK();
                }
                @Override
                public void onFailure(HttpException arg0, String arg1) {
                    //下载失败，隐藏进度条，通知跳转到首页
                    progressDialog.dismiss();
                    enterHome();
                }

                //更新下载进度
                //total : 总进度
                //current : 当前的下载进度
                //isUploading : 是否支持回调上传
                @Override
                public void onLoading(long total, long current,
                        boolean isUploading) {
                    super.onLoading(total, current, isUploading);
                    //设置进度条显示总进度和下载进度
                    progressDialog.setMax((int) total);//设置总进度
                    progressDialog.setProgress((int) current);//设置当前下载的进度
                }
            });
        }else{
            Toast.makeText(getApplicationContext(), "没有可用的SD卡", 0).show();
        }

    }

    /**
     * 3.2.显示下载进度的对话框
     */
    private void showProgressDialog() {
        progressDialog = new ProgressDialog(this);
        progressDialog.setCancelable(false);//设置对话框是否可以消失，true:可以；false:不可以,屏蔽返回键
        progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);//设置进度条对话框中进度的样式
        progressDialog.show();//显示dialog
    }

    /**
     * 4.安装最新版本apk
     */
    protected void installAPK() {
        //通过隐式意图打开系统的安装界面
        /**
         * <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:scheme="content" />// content://
                <data android:scheme="file" />
                <data android:mimeType="application/vnd.android.package-archive" />
            </intent-filter>
         */
        Intent intent = new Intent();
        intent.setAction("android.intent.action.VIEW");
        intent.addCategory("android.intent.category.DEFAULT");
        //相互覆盖
        /*intent.setData(Uri.fromFile(new File(SAVEURL)));
        intent.setType("application/vnd.android.package-archive");*/
        intent.setDataAndType(Uri.fromFile(new File(SAVEURL)), "application/vnd.android.package-archive");
        //startActivity(intent);
        //当当前的activity退出的时候，回调之前activity的onactivityReulst方法
        //requestCode : 请求码
        startActivityForResult(intent, 0);
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        //跳转首页的操作
        enterHome();
    }

}

案例2

进入应用引导页面，首先全屏展示一段视频之后，出现引导图ViewPager滑动
activity_splash.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <!-- 播放视频资源的控件，特性：根据视频的宽高决定控件的宽高 -->
    <com.ui.CustomVideoView 
        android:id="@+id/splash_vv_videoview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <Button 
        android:id="@+id/splash_btn_enter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="进入"
        android:textColor="#000000"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:onClick="enter"
        />
</RelativeLayout>

activity_guide.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <android.support.v4.view.ViewPager
        android:id="@+id/guide_vp_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></android.support.v4.view.ViewPager>

    <Button 
        android:id="@+id/guide_btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始体验"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:background="@drawable/selector_guide_btn_bg"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@color/selector_guide_btn_textcolor"
        android:textSize="14sp"
        android:visibility="gone"
        android:onClick="start"
        />
    <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        >
        <LinearLayout 
            android:id="@+id/guide_ll_dot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

        </LinearLayout>
        <ImageView 
            android:id="@+id/guide_iv_reddot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_guide_red_dot"
            />
    </RelativeLayout>

SplashActivity 短视频播放

public class SplashActivity extends Activity {

    private CustomVideoView mVideoView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        mVideoView = (CustomVideoView) findViewById(R.id.splash_vv_videoview);

        // 播放视频
        initData();
    }

    /**
     * 播放视频
     */
    private void initData() {
        // 1.获取播放资源
        // android.resource:// : 获取工程中的res->raw中的资源
        // android.resource://工程的包名/R.raw.kr36
        mVideoView.setVideoURI(Uri.parse("android.resource://"
                + this.getPackageName() + "/" + R.raw.kr36));

        //3.监听视频是否播放完毕，如果播放完毕，重新开始播放
        //监听视频是否播放完毕的操作
        mVideoView.setOnCompletionListener(new OnCompletionListener() {

            //当视频播放完毕调用的方法
            @Override
            public void onCompletion(MediaPlayer mp) {
                //重新播放
                mVideoView.start();
            }
        });

        // 2.播放视频资源
        mVideoView.start();
    }

    /**
     * 进入主页面按钮的点击事件
     */
    public void enter(View view){
        //判断用户是否是第一个进入应用，如果是：跳转引导界面，如果不是：跳转首页
        //问题：如何判断用户是否是第一次进入应用
        //获取用户是否是第一次进入的标示
        //还没有保存数据，保存数据需要到引导界面的开始体验按钮中去做,true:标示第一次进入，false:不是
        boolean isfirstenter = SharedPreferencesTool.getBoolean(this, Constants.ISFIRSTENTER, true);
        if (isfirstenter) {
            //第一次进入跳转到引导界面
            startActivity(new Intent(this,GuideActivity.class));
        }else{
            //不是第一次进入跳转到首页
            startActivity(new Intent(this,HomeActivity.class));
        }
        finish();
    }

GuideActivity 图片引导页面

public class GuideActivity extends Activity {

    private ViewPager mViewPager;
    //资源图片
    private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};

    private List<ImageView> imageViews;

    private Button mStart;

    private LinearLayout mLLDot;

    private ImageView mRedDot;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//代码去除标题栏
        setContentView(R.layout.activity_guide);
        //通过第三方框架实现了沉浸式状态栏操作，必须在setContentView之后执行
        StatusBarUtil.setColor(this, Color.YELLOW);

        initView();
    }

    /**
     * 初始化控件
     */
    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.guide_vp_viewpager);
        mStart = (Button) findViewById(R.id.guide_btn_start);
        mLLDot = (LinearLayout) findViewById(R.id.guide_ll_dot);
        mRedDot = (ImageView) findViewById(R.id.guide_iv_reddot);

        imageViews = new ArrayList<ImageView>();
        imageViews.clear();

        //通过viewpager展示的三张图片
        //先将图片，放到imageView中，然后再将ImageView放到viewpager中展示
        //1.根据图片的张数，创建相应个数的imageView,并存放，方便viewpager展示
        for (int i = 0; i < mImageIds.length; i++) {
            //创建相应的imageView
            createImageView(i);
            //根据图片的张数，创建点的个数
            createDot();
        }
        //2.通过viewpager展示imageView
        mViewPager.setAdapter(new Myadapter());


        //4.实现viewpager的界面切换动画
        //mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());
        //设置viewpager切换动画的，
        //参数1：如果是第一个到最后一个：true,如果是最后一个到第一个：false
        //参数2：自定义的动画效果
        //mViewPager.setPageTransformer(true, new DepthPageTransformer());
        mViewPager.setPageTransformer(true, new RotatePageTransformer());

        //3.实现viewpager的界面切换监听，监听当切换到第三个界面的时候，显示按钮，否则隐藏按钮
        //跟setOnPageChangeListener效果是一样
        mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            //当界面切换完成调用的方法
            //position : 切换到的界面的索引
            @Override
            public void onPageSelected(int position) {
                //判断如果已经切换到第三个界面了，显示按钮，否则隐藏按钮
                if (position == imageViews.size()-1) {
                    mStart.setVisibility(View.VISIBLE);
                }else{
                    mStart.setVisibility(View.GONE);
                }
            }

            //viewpager切换界面的时候调用的方法
            //position : 条目的索引
            //positionOffset : 界面移动的百分比
            //positionOffsetPixels : 界面移动的像素
            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
                //当viewpager切换界面的时候，实现移动红色的点
                //translationX : 控件平移的距离,从右往左滑动从0开始慢慢变大，如果切换完成，百分比瞬间归0,重新从0开始，进行下一次的百分比计算

                System.out.println(positionOffset+"");
                //红色点的移动距离 = 移动的百分比*20
                // 0 * 20 = 0    1*20=20
                //mRedDot.setTranslationX(positionOffset * 20 + position * 20);
                mRedDot.setTranslationX((positionOffset+ position) * 20);
            }

            //当切换状态改变的时候调用的方法
            @Override
            public void onPageScrollStateChanged(int state) {
                // TODO Auto-generated method stub

            }
        }); 
    }

    /**
     * 创建图片对应的imageView
     * i:表示创建第几个图片对应的imageView
     */
    private void createImageView(int i) {
        ImageView imageView = new ImageView(this);
        imageView.setBackgroundResource(mImageIds[i]);
        imageViews.add(imageView);
    }

    /**
     * 根据图片的张数创建点
     */
    private void createDot() {
        View view = new View(this);
        view.setBackgroundResource(R.drawable.shape_guide_dot);

        LinearLayout.LayoutParams params = new LayoutParams(10, 10);
        params.rightMargin=10;

        view.setLayoutParams(params);//将属性设置给view对象，使用属性生效
        //添加linearlayout中展示
        mLLDot.addView(view);
    }

    /**ViewPager的adapter**/
    private class Myadapter extends PagerAdapter{

        //设置条目个数
        @Override
        public int getCount() {
            return imageViews.size();
        }

        //view:viewpager的页面对象
        //object：instantiateItem返回对象
        //判断是否可以加载显示界面
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //添加显示viewpager的界面
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //根据条目的索引，获取条目对应的imageview
            ImageView imageView = imageViews.get(position);

            //将imageView添加到viewpager中显示
            container.addView(imageView);

            //添加什么View对象，返回什么view对象
            return imageView;
        }

        //删除条目
        //object : instantiateItem的返回值
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //super.destroyItem(container, position, object);抛异常的
            container.removeView((View) object);
        }

    }

    /**
     * 开始体验按钮的点击事件
     */
    public void start(View view){
        //保存是否是第一次进入的标示
        SharedPreferencesTool.saveBoolean(this, Constants.ISFIRSTENTER, false);
        //跳转的首页
        startActivity(new Intent(this,HomeActivity.class));
        //移除引导界面，避免在首页点击返回键，再回退到引导界面
        finish();
    }
}

案例3

1. 要使用ViewPager，必须要创建 PagerAdapter。 这里创建一个 ViewPagerAdapter来继承PagerAdapter

public class ViewPagerAdapter extends PagerAdapter{

    private List<View> views;   // 我们引导页的list
    private Context context;    // 上下文

    public ViewPagerAdapter(List<View> views, Context context) {
        this.views = views;
        this.context = context;
    }


    // 移除一个view
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //super.destroyItem(container, position, object);
        container.removeView(views.get(position));
    }


    // 加载一个view
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() { // 必写的方法 返回当前views的数量
      return this.views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) { //必写的方法 判断当前的view是否是我们需要的对象
        return (view == object);
    }
}

2. 创建我们引导页的视图

<?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">
    <!--filpInterval 设置View之间切换的时间间隔 （在androidStudio上面跑不起来 可以不需要）
       persistentDrawingCache 持久化绘画缓存
   -->
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        android:persistentDrawingCache="animation"
        android:id="@+id/viewpage"
        >
    </android.support.v4.view.ViewPager>
</RelativeLayout>

3. 创建引导页的图片视图 one.xml和two.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"

        android:background="@drawable/guide1"/>
</LinearLayout>

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/guide2"/>
</LinearLayout>

4. 在我们的activity中使用

public class Guide extends Activity{

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);//加载guide.xml 视图
        this.initView();

        System.out.println("onCreate");
    }

    // 初始化view
    public void initView() {
        /*
        * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。
          LayoutInflater的作用类似于 findViewById(),
          不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！
          而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。
        *
        * */
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));  // 加载视图1
        views.add(inflater.inflate(R.layout.two, null));  // 加载视图2

        vpAdapter = new ViewPagerAdapter(views, this);   // 创建我们的 adapter
        vp = (ViewPager) findViewById(R.id.viewpage);
        vp.setAdapter(vpAdapter);                        // viewpage绑定 adapter
    }
}

5. 运行就有引导页的两张图片，可以来回切换。
6. 添加导航点
① 在原来的guide.xml中添加

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--filpInterval 设置View之间切换的时间间隔 （在androidStudio上面跑不起来 可以不需要）
       persistentDrawingCache 持久化绘画缓存
   -->
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        android:persistentDrawingCache="animation"
        android:id="@+id/viewpage"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
    </android.support.v4.view.ViewPager>

    <!-- 新添加的 放导航点用的 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginBottom="19dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv1"
            android:src="@drawable/login_selectd"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv2"
            android:src="@drawable/login_point"/>
    </LinearLayout>


</RelativeLayout>

② 在原来的代码的基础上添加新的代码

public class Guide extends Activity implements ViewPager.OnPageChangeListener{  // 实现监听接口

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    // 导航点
    private ImageView[] dots;
    private int[] ids = {R.id.iv1, R.id.iv2};


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);//加载guide.xml 视图
        this.initView();
        this.initDots();
        System.out.println("onCreate");
    }

    // 初始化view
    public void initView() {
        /*
        * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。
          LayoutInflater的作用类似于 findViewById(),
          不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！
          而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。
        *
        * */
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));  // 加载视图1
        views.add(inflater.inflate(R.layout.two, null));  // 加载视图2

        vpAdapter = new ViewPagerAdapter(views, this);   // 创建我们的 adapter
        vp = (ViewPager) findViewById(R.id.viewpage);
        vp.setAdapter(vpAdapter);                        // viewpage绑定 adapter
        vp.setOnPageChangeListener(this);                // ViewPager 监听自己
    }


    private void initDots() {                           // 初始化 我们的导航点
        this.dots = new ImageView[this.views.size()];
        for (int i=0; i<this.views.size(); i++) {
            dots[i] = (ImageView) this.findViewById(this.ids[i]);
        }
    }


    // 监听 页面滑动的方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        for (int i=0; i<this.ids.length; i++) {
            if (position == i) {
                this.dots[i].setImageResource(R.drawable.login_selectd);  // 变成选中的
            } else {
                this.dots[i].setImageResource(R.drawable.login_point);    //变成不选中的
            }
        }
    }

    //选中
    @Override
    public void onPageSelected(int position) {

    }

    // 滑动状态改变
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

7. 添加进入按钮

① 在two.xml中添加一个按钮

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/guide2"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />


    <!-- 添加进去按钮 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        android:gravity="center"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="进入"
            android:id="@+id/btn_start" />

    </LinearLayout>
</RelativeLayout>

② 监听按钮 进去MainActivity

  // 进入按钮
        this.bt = (Button) views.get(1).findViewById(R.id.btn_start);
        this.bt.setOnClickListener(new View.OnClickListener() {  // 监听
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Guide.this, MainActivity.class);  // 进去MainActivity
                startActivity(i);
                finish();  //销毁当前的Activity
            }
        });