在上周,安卓开发者群里多次讨论到关于安卓的冷启动,启动画面的问题。这里,我想就在何时使用,如何使用,以及怎样给用户最好的使用体验等方面,阐述一下我的观点。
你可以在这篇文章以及Github中看到实例及代码。
启动画面,启动屏幕&冷启动
在这条状态中,Colt McAnlis,(谷歌的开发者支持)再次开启了关于安卓启动画面/屏幕用法的讨论,他在这条状态中分享了由Cyril Mottier发布的文章,这篇文章阐述了为什么我们应该避免在安卓中添加启动屏幕,因为它会影响用户体验,增加应用大小等。
在我看来,用户当然想尽快看到应用的主界面。但不可避免的,在应用启动,安卓创建进程期间,会按照应用或活动主题生成一个白色/黑色的屏作为载入缓冲。
随着我们的应用变得更加复杂,重写应用程序对象用以初始化分析数据和错误报告等,这段载入的时间也会相应的增长。
因此,黑屏对于用户来说并不是最好的选择。如果应用的加载时间较长,我们可以用一个简单的内容填占这个载入画面,比如使用应用的logo,这样在载入时顺便增强了品牌性。
你的新朋友,窗口背景
按照我们之前所讲的,在进程启动时,窗口管理器会按照应用主题生成窗体显示内容。其参数值包含于 android:windowBackground
.在Lan Lake的这篇文章中,我们可以通过设置<layer-list>
的属性,得到在启动界面显示一个小的地图标志的效果:
<?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/grey"/>
<item>
<bitmap android:gravity="center"
android:src="@drawable/img_pizza"/>
</item>
</layer-list>```
我必须注意的是,在```<layer-list>```中的透明属性必须为不透明,即```android:opacity="opaque"```,在你的父Activity的布局中需填充背景色,否则,```<layer-list>```将会残留在你的Activity中。
<?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"
android:orientation="vertical"
android:background="@color/grey" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?colorPrimary"
android:elevation="4dp" />
</LinearLayout>
借用桌面窗口的优势,我们可以丰富用户的体验。如果我们的应用较复杂,在启动时可以展示一个独特的界面,如登录框或选择器。我们可以像之前定位地图标志一样定位我们要显示的内容,再用动画的效果展现出来。
例如:
![](http://upload-images.jianshu.io/upload_images/1191849-686972f2fc1f3089.gif?imageMogr2/auto-orient/strip)
这个动画效果由一个与```<layer-list>```包含相同资源的```ImageView```转化而来。
ViewCompat.animate(logoImageView)
.translationY(-250)
.setStartDelay(STARTUP_DELAY)
.setDuration(ANIM_ITEM_DURATION)
.setInterpolator( new DecelerateInterpolator(1.2f))
.start();
这个```ImageView```位于屏幕中心稍稍偏上,可能是由于系统边框的影响。我将其设置为距上边框```12dp```,这刚好与状态栏一半的高度相同。
<ImageView android:id="@+id/img_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:src="@drawable/img_face" tools:visibility="gone" />
#占位控件的样式
利用```<layer-list>```,我们也可以创建一个UI式的占位控件,他将占用main activity的真实目录,例如,可以用```<layer-list>```模拟一个工具栏。
![](http://upload-images.jianshu.io/upload_images/1191849-caa9c63de485a5aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<?xml version="1.0" encoding="utf-8"?><layer-list
xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque" > <item> <shape> <solid
android:color="@color/grey"/> </shape> </item> <item
android:height="180dp"
android:gravity="top"> <shape
android:shape="rectangle"> <solid
android:color="?colorPrimary"/>
</shape>
</item>
</layer-list>
在这个例子中,第二个```<item>```模拟的```Toolbar```显示在当前的目录中。再进一步,我们可以将相同高度(小于状态栏的宽度)的动画效果应用起来,给用户提供更好的体验。
![placeholder.gif](http://upload-images.jianshu.io/upload_images/1191849-a1d148c6a2260a53.gif?imageMogr2/auto-orient/strip)
private void collapseToolbar()
{ int toolBarHeight; TypedValue tv = new TypedValue();
getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true);
toolBarHeight = TypedValue.complexToDimensionPixelSize(
tv.data, getResources().getDisplayMetrics());
ValueAnimator valueHeightAnimator = ValueAnimator .ofInt(mContentViewHeight, toolBarHeight);
valueHeightAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
ViewGroup.LayoutParams lp = mToolbar.getLayoutParams();
lp.height = (Integer) animation.getAnimatedValue();
mToolbar.setLayoutParams(lp);
}
});
valueHeightAnimator.start();
valueHeightAnimator.addListener( new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// Fire recycler animator
mAdapter.addAll(ModelItem.getFakeItems());
// Animate fab
ViewCompat.animate(mFab).setStartDelay(600) .setDuration(400).scaleY(1).scaleX(1).start();
}
});
}
资源
[onboarding-examples](https://github.com/saulmm/onboarding-examples-android) - Github
[Uber onboarding](https://plus.google.com/u/0/+WalmyrCarvalho/posts/A4czJLoPjm5)
[Use cold start time effectively with a branded launch theme](https://github.com/saulmm/CoordinatorExamples) - Ian Lake
[Splash Screens Are Evil, Don't Use Them!](http://www.cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/) - Cyril Mottier
[Launch screens](https://www.google.com/design/spec/patterns/launch-screens.html) - Material Design Spec
[Launch screens](http://www.materialdoc.com/splash-screens/) - MaterialDoc, Gonzalo Toledano
[原文地址](http://saulmm.github.io/avoding-android-cold-starts)-Github