Android 实现闪屏页+功能引导页

转载请注明出处： http://blog.csdn.net/like_program/article/details/52961753

闪屏页和功能引导页想必大家都很熟悉了，现在很多 App 启动都有闪屏页和功能引导页，那么今天我来教下大家怎么实现闪屏页和功能引导页。

打开 Android Studio， 新建 GuideTest 项目。

1.实现闪屏页

闪屏页的实现很简单，就是将一张背景图显示 2 秒钟。

修改 activity_main.xml 为 activity_splash.xml，activity_splash.xml 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_splash"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_splash"
    tools:context="com.example.guidetest.SplashActivity">

</RelativeLayout>

闪屏页的布局很简单，只有一张背景图片。

然后修改 MainActivity.java 为 SplashActivity.java ，SplashActivity.java 代码如下所示：

package com.example.guidetest;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.RelativeLayout;

public class SplashActivity extends AppCompatActivity {
   

    /**
     * 闪屏页
     */
    private RelativeLayout rlSplash;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        rlSplash = (RelativeLayout) findViewById(R.id.rl_splash);

        startAnim();
    }

    /**
     * 启动动画
     */
    private void startAnim() {
        // 渐变动画,从完全透明到完全不透明
        AlphaAnimation alpha = new AlphaAnimation(0, 1);
        // 持续时间 2 秒
        alpha.setDuration(2000);
        // 动画结束后，保持动画状态
        alpha.setFillAfter(true);

        // 设置动画监听器
        alpha.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }

            // 动画结束时回调此方法
            @Override
            public void onAnimationEnd(Animation animation) {
                // 跳转到下一个页面
                jumpNextPage();
            }
        });

        // 启动动画
        rlSplash.startAnimation(alpha);
    }

    /**
     * 跳转到下一个页面
     */
    private void jumpNextPage() {
        startActivity(new Intent(SplashActivity.this, GuideActivity.class));
        finish();
    }
}

为了让闪屏页的启动过渡的自然一些，我们使用了渐变动画，当程序一启动，就会开始启动动画，背景图片会从完全透明逐渐变为完全不透明，动画结束后，就会跳转到功能引导页，然后结束当前 Activity。

闪屏页最好能占满全屏，说到全屏，有些同学可能第一反应就是 requestWindowFeature(Window.FEATURE_NO_TITLE) ，但是很不幸，加上这行代码，闪屏页也无法全屏。所以我们通过修改下 styles.xml 中 AppTheme 的一些属性，来达到全屏的效果，styles.xml 代码如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

</resources>

为了能让闪屏页跳转到功能引导页，我们先来简单创建一个 Activity，以便让闪屏页跳转到这个 Activity。

新建 GuideActivity.java 和 activity_guide.xml ，activity_guide.xml 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.guidetest.GuideActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="功能引导页"
        android:textColor="@android:color/black"
        android:textSize="25sp"/>

</RelativeLayout>

好了，闪屏页已经实现了，我们来运行一下，看下效果:

2.实现功能引导页

1.初步实现功能引导页

功能引导页，相信大家也见过不少了，功能引导页是可以左右滑动的，说到左右滑动，我们自然就想起了 ViewPager 这个类。接下来，我们就要用 ViewPager 来实现功能引导页。

修改 activity_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/vp_guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

我们在布局文件中添加了 ViewPager 控件。

然后修改 GuideActivity.java 代码如下所示：

package com.example.guide