android应用闪屏页的实现(关于坑的说明)

3,483 阅读5分钟

闪屏页的实现方式有多种,需要根据UI设计的闪屏页的效果图来决定最终选用哪一种。

先来看一下我最终的实现效果

这个方法是我试过的最和谐的一种方法了。

先来讲一下实现步骤,然后再聊一下其他方法

1.首先在AndroidManifest.xml文件中,注册要启动的SplashActivity

        <activity
            android:name="包名.SplashActivity"
            android:screenOrientation="portrait"
            android:theme="@style/StartingWindowTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

2.在styles.xml文件中配置自定义主题模式:因为我使用的是Activity加载xml文件的模式,所以应用启动的时候会有白屏或者黑屏的情况,为了解决这种效果,我把其他的主题色改为系统的主色调,跟闪屏页的背景图一样的颜色,看起来效果就没有那么突兀

    <!-- 应用启动页(StartingWindow)的theme -->
    <style name="StartingWindowTheme" parent="AppTheme">
        <!-- 可以设置成纯颜色(设置一个和Activity UI相似的背景) -->
        <item name="android:windowBackground">@color/color_CA4729</item>
        <!--也可以设置成一张图片 -->
<!--        <item name="android:windowBackground">@drawable/startingwindow_bg</item>-->
    </style>

3.实现SplashActivity代码,虽然把闪屏页的白屏改为跟图片一样的背景色,但是免不了闪一下的感觉,为了解决这种状况,在SplashActivity加了透明度渐变的效果,实现的效果就相当完美了!

/**
 * 解决启动白屏问题
 *
 * @author jingbin
 */
public class SplashActivity extends BaseActivity<NoViewModel, ActivityLoadingBinding> {

    private Handler handler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTheme(R.style.StartingWindowTheme);//恢复原有的样式
        // 设置没有标题栏
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_loading);
        showContentView();
        if ((getIntent().getFlags() & Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT) != 0) {
            finish();
            return;
        }

        LinearLayout layoutSplash=(LinearLayout) findViewById(R.id.activity_splash);
        AlphaAnimation alphaAnimation=new AlphaAnimation(0.1f,1.0f);
        alphaAnimation.setDuration(1000);//设置动画播放时长1000毫秒(1秒)
        layoutSplash.startAnimation(alphaAnimation);
        //设置动画监听
        alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }
            //动画结束
            @Override
            public void onAnimationEnd(Animation animation) {
                //页面的跳转
                startActivity(new Intent(SplashActivity.this, MainActivity.class));
                finish();
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }
}

4.最后是activity_loading.xml布局文件

UI设计的效果图虽然做了屏幕适配,但是android的机型太太多了,免不了各种拉伸问题,因为图片是为了全屏显示,又不能做裁剪,所以我让UI把各个图片抠出来了。

start_bg.png是红色底部又波浪线的背景图,使其宽度全屏,高度自适应显示。

start_center.png是中间的圆圈,因为是圆形,所以一点都不能拉伸,否则就会变形,所以图片做根据自身大小居中显示即可。

剩下就是底部的logo图已经文本了,就不多做说明

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
    android:id="@+id/activity_splash"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@drawable/start_bg">
        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/start_center"/>
    </RelativeLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="17.5dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/start_bottom"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="共享财富与健康"
        android:textSize="16sp"
        android:layout_marginTop="18dp"
        android:layout_gravity="center_horizontal"
        android:textColor="@color/color_333333"/>
</LinearLayout>
</layout>

我的实现到这里就已经结束了!!!

现在让我们来讲一下其他实现方式:

如何让闪屏页秒开!!!!

方式一:

1.首先在AndroidManifest.xml文件中,注册要启动的LoadingActivity

<activity
            android:name="包名.LoadingActivity"
            android:screenOrientation="portrait"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

2.在styles.xml文件中配置自定义主题模式

2.1 如果是单张背景图,可以直接设置android:windowBackground,引入图片start.png

    <!--过渡图-->
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/start</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

2.2 如果图片是多张,可以设置android:windowBackground,引入layer-list文件layer_splash.xml

    <!--过渡图-->
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/layer_splash</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

相关的layer_splash.xml代码如下:可以设置多个item,并且设置其位置

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <!-- 背景颜色 -->
    <item android:drawable="@color/colorWhite" />

    <item android:bottom="50dp">
        <!-- 图片 clip_horizontal 如果尺寸不一致,那么周围的填充色就是背景色-->
        <bitmap
            android:gravity="center|top|left|right"
            android:src="@drawable/start_bg" />
    </item>
    <item android:top="90dp">
        <bitmap
            android:gravity="center|top"
            android:src="@drawable/start_center" />
    </item>

</layer-list>

LoadingActivity.class代码如下:注意,这边就不需要setContentView显示layout文件了

public class LoadingActivity extends FragmentActivity {

    private Handler handler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setTheme(R.style.SplashTheme);//恢复原有的样式
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_loading);
        // 后台返回时可能启动这个页面 http://blog.csdn.net/jianiuqi/article/details/54091181
        if ((getIntent().getFlags() & Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT) != 0) {
            finish();
            return;
        }
        handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(LoadingActivity.this, MainActivity.class));
                finish();
            }
        }, 3000);
    }

    @Override
    protected void onDestroy() {
        handler = null;
        super.onDestroy();
    }
}

我想说明一点的是,利用配置Activity的启动theme来实现方式,我在实验中有太多坑了:

整张效果图引入的方式,必然会有图片拉伸变形的结果,除非你的图片能够适配到各种屏幕的手机;

利用layer-list方式,我的手机会有闪动一下的效果:

虽然秒开的效果实现了,而且图片也不会变形,但是那抖动一下,实在让我接受不了,如果有大神知道解决方式,烦请指点一二,感谢!