原文链接 :Avoiding cold starts on Android
原文作者 : Saúl Molinero
译文出自 : http://blog.csdn.net/zhulove86
译者 : Tony Zhu

在过去几周，在android开发者社区中看一些关于冷启动（clod start）、闪屏（splash screen）、启动界面的动画。在本文中，我将阐明这些动画是否有必要，如何使用以及如何更好提供极致的用户体验。

本文中提到的代码和示例，可以在GitHub上获取。

Splash Screen，lunch screen和cold start

柯尔特（Colt McAnlis，在谷歌开发人员倡导者）通过在Cyril Morrier分享了主题文章，再次展开关于Splash/Lanuce screen在Android系统上使用的讨论。其中除其他事项外，讨论了为什么应该避免使用在Android上使用Splash Screen，声称这会伤害了用户体验，增加应用的大小等。

在我看来，用户应该尽快的看到应用的内容。但不可避免的，当用户启动一个应用程序时，Android会创建一个新的进程。在应用加载中，显示一个由应用theme构建的黑/白屏，或是第一个Activity的theme。

当我们应用非常复杂，并且我们重写了很多被用于初始化分析，报错等功能的对象，应用启动的负载就会变的很大。

Airbnb在应用初始化中显示白屏。

对于用户黑屏并不是最好的选择。如果我们的应用加载的时间很慢，我们应该使用一个占位，用实际内容简单的填充；或另一方面，如果我们的开发工作是复杂的，我们可以显示应用的logo，以增强品牌效应。

AliExpress 在初始化中显示其logo

你的新伙伴, windowBackground

如之前讨论，在进程加载状态时由WindowManager显示的窗口被设置为application主题。具体在android:windowBackground中值。参考lan Lake的文章，如果我们通过使用设定这个属性，main activity的背景色之上在最中心显示一个bitmap，我们可以获得如下的效果：

<?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>

我们必须牢记以避免出现问题，应该是不透明的，android:opacity=”opaque”。并且在layout中该activity的父activity背景色也应该被一种颜色填充，如果没有的话，在启动时所展示的将被保留在你的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>

改变应用引导（onboarding）样式

利用窗口背景色，我们可以丰富用户体验的效果。如果我们的应用复杂，并且要展示一个类似登录或者选择的不透明界面，我们采用位图相同的定位点(anchor point)和动画实现，可以达到非常好的效果。

这个动画，转变一个ImageView，其中包含了相同的的资源。

ViewCompat.animate(logoImageView)    .translationY(-250)    .setStartDelay(STARTUP_DELAY)    .setDuration(ANIM_ITEM_DURATION).setInterpolator(         new DecelerateInterpolator(1.2f)).start();

这个ImageView略高于屏幕的中心，这可以通过状态栏的影响，离 top 边缘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"    />

改变占位的样式

通过我们可以创建一个占位的UI，在该UI中显示main activity的内容。举例，我们可以利用模拟一个工具栏。

<?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>

在这种情况下，第二个模拟工具栏来显示实际的内容，甚至我们可以设置相同的高度（略小于状态栏的宽度），并且在工具栏上使用一些好的动画，可以给用户提供较好的用户体验。

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 - Github
Uber onboarding
Use cold start time effectively with a branded launch theme - Ian Lake
Splash Screens Are Evil, Don’t Use Them! - Cyril Mottier
Launch screens - Material Design Spec
Launch screens - MaterialDoc, Gonzalo Toledano

由于时间仓促、翻译水平有限，其中有许多不足之处在所难免，敬请批评指正。

避免在Android上冷启动

Splash Screen，lunch screen和cold start

你的新伙伴, windowBackground

改变应用引导（onboarding）样式

改变占位的样式

更多相关文章

随机推荐