相信很多人都在网上查过关于启动白屏或者黑屏的问题。
一般的App应该是分为两种:
- 有闪屏页或者启动页(SplashActivity),页面大概会持续2到3秒
- 没有闪屏页和启动页,打开应用后会直接跳转到应用主界面
不管有没有启动页,如果你不处理,你会发现当你点击桌面上那个icon图标的时候会先闪白屏或者黑屏一下,然后才会进入我们设定的页面。
但是我们手机上的常用应用,比如美团,今日头条,微信等,点击app icon的时候,其实感觉是一瞬间秒开的,没有白屏的过程,那么这是如何处理的呢?
先说一说为什么会出现白屏或者黑屏吧!
当打开一个Activity时,如果这个Activity所属的应用还没有在运行,系统会为这个Activity所属的应用创建一个进程,但进程的创建与初始化都需要时间,如果没有任何反应的话,如果程序初始化的时间很长,用户可能还以为没有点到相应的位置。但此时所启动的程序还没初始化完,既无法显示程序,又不能停在原处不做任何动作,这就有了Starting Window的概念,也可以称之为Preview Window。
Starting Window就是一个用于在应用程序进程创建并初始化成功前显示的临时窗口,拥有的Window Type是TYPE_APPLICATION_STARTING。在程序初始化完成前显示这个窗口,以告知用户系统已经知道了他要打开这个应用并做出了响应,当程序初始化完成后显示用户UI并移除这个窗口。
显示白屏或者黑屏,是由你的启动Activity或者Application来决定的。如果你使用的是Light主题,那么就可能出现白屏;如果你使用的是Black主题,那么就可能出现黑屏。当你设置Light或者Black主题时,Starting Window显示的就是你启动Activity的android:windowBackground属性,所以才会出现白屏或者黑屏的情况。
网上有很多教程,说是把主题的背景设为透明,这样子的确实没有白屏了,但是你会发现点击完app的icon之后,会有一小会的停顿,给用户一种卡顿的感觉,体验非常不好,不能为了实现功能而实现功能,软件开发用户体验至上!
那么好的体验该如何开发呢?我们以实现一个今日头条app的启动页作为案例。
我们先来看一看常规情况下app启动的黑白屏。
为了让白屏或者黑屏明显的显示,在SplashActivity的onCreate方法中setContentView之前加入一个休眠1秒的操作。
/*还没有加载布局是睡眠1秒,确保黑屏或白屏效果明显*/
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
/**闪屏页持续1s然后进入主页*/
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
Intent intent = new Intent(activity,AdsActivity.class);
startActivity(intent);
finish();
overridePendingTransition(R.anim.fade,R.anim.hold);
}
}, 1000);
效果是:
接下来我们来消灭白屏。
第一步 消灭白屏
1.我们需要删除原来的闪屏页的布局activity_splash.xml,同时删除SplashActivity中setContentView(R.layout.activity_splash)方法。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/*还没有加载布局是睡眠1秒,确保黑屏或白屏效果明显*/
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// setContentView(R.layout.activity_splash);
}
2.为了让闪屏页持续时间长一点,我们用handler模拟耗时操作,1秒后进行跳转。
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
//这块耗时操作可以进行初始化,或者网络请求等,1秒结束后跳转到广告页面
Intent intent = new Intent(activity,AdsActivity.class);
startActivity(intent);
finish();
}
}, 1000);
3.我们删除了闪屏页的布局文件,想法是将闪屏的背景作为Activity的主题背景,要做到这一点,首先要在 res/drawable创建一个XML drawable文件。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/white" />
<item android:bottom="20dp">
<bitmap
android:gravity="bottom"
android:src="@mipmap/icon_logo" />
</item>
</layer-list>
4.接下来在style.xml中创建一个闪屏页的主题,将创建的xml设置为window的背景。并且在AndroidManifest.xml中给SplashActivity配置style。
<style name="AppTheme.Splash" parent ="android:Theme.Holo.Light.NoActionBar">
<item name="android:windowBackground">@drawable/drawable_splash</item>
</style>
<activity android:name=".SplahActivity"
android:theme="@style/AppTheme.Splash">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
这个时候运行程序,我们发现其实已经没有白屏了。
第二步,我们实现广告加载页面
** 1.广告页是一个倒计时的显示,布局中放入一个TextView来显示倒计时信息,放入一个ImageView来显示加载动画。点击跳过广告的时候显示加载动画。**
<?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:id="@+id/iv_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon_logo"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_marginBottom="20dp"
android:layout_above="@+id/iv_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent">
<TextView
android:id="@+id/tv_ads"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="跳过广告"
android:textColor="@color/white"
android:textSize="12sp"
android:background="@drawable/bg_ad_text"
android:padding="5dp"/>
</RelativeLayout>
</RelativeLayout>
2.页面实现中,我们定义一个CountDownTimer,这个类是Android SDK提供用来进行倒计时的。CountDownTimer(long millisInFuture, long countDownInterval)
有两个参数,第一个是计时的总时长,第二个是间隔。
public class AdsActivity extends Activity {
private Activity activity;
private TextView tvAds;
private CountDownTimer countDownTimer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ads);
activity =this;
tvAds = (TextView) findViewById(R.id.tv_ads);
countDownTimer = new CountDownTimer(4000,1000) {
@Override
public void onTick(long millisUntilFinished) {
tvAds.setText("跳过广告"+(millisUntilFinished/1000)+"秒");
}
@Override
public void onFinish() {
Intent intent = new Intent(activity,MainActivity.class);
startActivity(intent);
finish();
}
}.start();
/**
* 跳过广告
*/
tvAds.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
countDownTimer.cancel();
Intent intent = new Intent(activity,MainActivity.class);
startActivity(intent);
finish();
}
});
}
}
第三步,优化
1.我们运行起来,发现页面之间的跳转有些不美观,从右向左进入的动画感觉有些生硬。因此我们给页面之间加入转场动画。
#fade.xml 页面退出动画
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="0.0"
android:duration="400" />
#hold.xml 页面进入动画
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXDelta="0" android:toXDelta="0"
android:duration="400" />
在每个Intent跳转的地方加入转场效果
Intent intent = new Intent(activity,AdsActivity.class);
startActivity(intent);
finish();
overridePendingTransition(R.anim.fade,R.anim.hold);
最终的效果是:
有两点注意:
-
overridePendingTransition
方法要写在finish后面 -
overridePendingTransition
方法一定要写在主线程中,在子线程是没有作用的。
源码地址:http://download.csdn.net/download/u012771445/9971093
本文作者: shijiacheng
本文链接:http://shijiacheng.studio/2017/09/09/android-splash-demo/
版权声明:本博客所有文章除特别声明外,均为原创文章。请尊重劳动成果,转载注明出处!
转载请注明:转自http://shijiacheng.studio