利用ViewPager实现启动引导页

最新推荐文章于 2021-05-29 23:37:26 发布

原创最新推荐文章于 2021-05-29 23:37:26 发布 · 498 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #引导页 #启动页

Android 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用ViewPager在首次启动应用时展示引导页，包括欢迎界面、引导页的实现，以及后续启动直接进入主界面的逻辑。详细步骤包括导入图片资源、编写欢迎界面和引导界面，以及在AndroidManifest.xml中修改程序入口。

——热爱开源，乐于分享

利用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>