Android 启动页优化及过渡动画

背景: 作为一只励志猿,不断的学习和总结自然是日常开发不可或缺的一部分。之前一直习惯于把遇到的问题随手记录在个人文件里,一方面不太规范;另一方面白白错过了与大家交流学习的机会。痛定思痛,决定把之前开发过程中遇到的一些问题总结发布出来,以供交流和学习! 有什么错误或不足的地方,欢迎大家留言指正!

一、APP的启动方式:

一般来说,APP的启动方式主要分为两种:冷启动和热启动。

  1. 冷启动:启动应用时,后台没有该应用的进程,系统会重新创建一个新的进程分配给该应用,即冷启动;
  2. 热启动:启动应用时,后台已有该应用的进程(例如:点击Back键或Home键退出,此时应用的进程依然在后台存活),这时会在已有的进程中启动该应用,即热启动;

特点:

  1. 冷启动:由于冷启动需要系统重新创建一个新的进程,所以会先创建和初始化Application,然后再创建和初始化StartActivity(启动页Activity)并测量绘制其界面。从点击启动图标到启动完成(以看到界面的第一帧为准)应用的启动流程如下:

    Application构造方法->attachBaseContext()->onCreate()->StartActivity构造方法->onCreate()->onStart()->onResume()->测量、绘制布局并展示;
    
  2. 热启动:由于后台已存在该应用的进程无需重新创建,且一个应用的进程从创建到销毁Application只会被初始化一次。所以热启动只会执行StartActivity的创建和初始化;

二、启动APP时白屏或黑屏:

现象:许多做Android的小伙伴可能都遇到过,当启动APP时, 会有一个白屏或黑屏一闪而过,然后才展示启动页的现象。这种诡异的现象又是如何产生的呢?

从上述APP的启动方式 的介绍中,我们可以知道只有在StartActivity的onResume()执行完成后才开始布局的测量和绘制。而在应用程序进程创建并初始化成功之前,系统会显示一个临时窗口Starting Window(也称作:Preview Window,它的WindowType是TYPE_APPLICATION_STARTING;在初始化完成之前展示,是为了尽快告知用户,系统已经知道他要打开该应用,并且已经对此做出了响应。待初始化完成后,系统会显示用户UI并移除该窗口),我们看到的黑屏或白屏就是不同Theme时对应的Window的背景。

启动白屏的示例:

  1. 设置启动页Style:
 <style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>
  1. 在AndroidManifest.xml中配置如下:
 <activity
            android:name=".activity.StartActivity"
            android:theme="@style/AppTheme.Launcher">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
 </activity>

3.StartActivity的代码如下:

public class StartActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        try {
            Thread.sleep(1000); //线程休眠1s,使出现白屏时的效果更加明显
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_start);
        //展示2s后前往主页
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(StartActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        }, 2000);
    }
}
  1. 布局文件 activity_start.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:background="@drawable/layer_launcher"
    tools:context="com.gcj.myapplication.activity.StartActivity">
</FrameLayout>

效果如下:


解决方案:

  1. 禁用Preview Window(不推荐):
    既然APP启动时的黑白屏是由Preview引起的,那系统有没有提供禁用的方法呢? 答案是肯定的。修改上述style 如下:
 <style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
        <!--禁用Preview-->
        <item name="android:windowDisablePreview">true</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

然而,黑白屏的问题是解决了,但点击应用图标后会有一段时间没有响应。用户体验不好,违背了优化的初衷,不推荐使用。

  1. 使用透明主题(个人不太推荐):
  <style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
        <!--设置Window透明-->
        <item name="android:windowIsTranslucent">true</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

特点:应用启动慢,刷新同步,界面会一次性刷新出来。由于背景透明,初始化的过程中,用户看到的是桌面,给人一种点击之后稍等一会才一次性刷新出来的感觉。
注:话说微信启动时使用的就是类似这样的效果,但微信做了一定的优化处理,只在 冷启动 时才显示启动页,具体如何实现稍后会做详细介绍;

  1. 修改windowBackground属性(推荐):
 <style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 通过windowBackground可以设置背景色、背景图片、能解析出图片的XML文件等-->
        <item name="android:windowBackground">@drawable/layer_launcher</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

自定义layer-list: layer_launcher.xml 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_logo" />
    </item>
</layer-list>

特点:应用启动快,非同步刷新,界面会先显示背景图,然后再刷新其他控件,个人比较推荐。
注:此时可以将StartActivity中 setContentView(R.layout.activity_start); 注释掉;

三、从启动页到登录页的完美过渡:

通过上述方案,虽然解决了启动时黑屏、白屏的问题,但总感觉界面跳转时,过渡不够自然。之前一偶然机会实现了一个从启动页至登录页的过渡动画,动画比较简单,效果还算可以。江湖规矩,先呈上效果图:


附代码:

  1. 将AndroidManifest.xml中StartActivity的Theme配置为上述解决方案的第三种,StartActivity.java的代码如下:
package com.gcj.myapplication.activity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;

/**
 * Created by gcj on 2017/11/28
 */
public class StartActivity extends AppCompatActivity {
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 注意:此处将setContentView()方法注释掉
        // setContentView(R.layout.activity_start);
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                gotoLogin();
            }
        }, 2000);
    }

    /**
     * 前往注册、登录主页
     */
    private void gotoLogin() {
        Intent intent = new Intent(StartActivity.this, LoginMainActivity.class);
        startActivity(intent);
        finish();
        //取消界面跳转时的动画,使启动页的logo图片与注册、登录主页的logo图片完美衔接
        overridePendingTransition(0, 0);
    }

    /**
     * 屏蔽物理返回键
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    protected void onDestroy() {
        if (handler != null) {
            //If token is null, all callbacks and messages will be removed.
            handler.removeCallbacksAndMessages(null);
        }
        super.onDestroy();
    }
}
  1. LoginMainActivity.java
package com.gcj.myapplication.activity;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.gcj.myapplication.R;

/**
 * Created by gcj on 2017/11/28
 */
public class LoginMainActivity extends AppCompatActivity {
    private long exitTime;
    private TextView tvRegister;
    private TextView tvLogin;
    private ImageView ivLogo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_login);
        initViews();
        initAnims();
    }

    /**
     * 初始化View控件
     */
    private void initViews() {
        tvLogin = (TextView) findViewById(R.id.tv_login);
        tvRegister = (TextView) findViewById(R.id.tv_register);
        ivLogo = (ImageView) findViewById(R.id.iv_logo);
    }

    /**
     * 初始化logo图片以及底部注册、登录的按钮动画
     */
    private void initAnims() {
        //初始化底部注册、登录的按钮动画
        //以控件自身所在的位置为原点,从下方距离原点200像素的位置移动到原点
        ObjectAnimator tranLogin = ObjectAnimator.ofFloat(tvLogin, "translationY", 200, 0);
        ObjectAnimator tranRegister = ObjectAnimator.ofFloat(tvRegister, "translationY", 200, 0);
        //将注册、登录的控件alpha属性从0变到1
        ObjectAnimator alphaLogin = ObjectAnimator.ofFloat(tvLogin, "alpha", 0, 1);
        ObjectAnimator alphaRegister = ObjectAnimator.ofFloat(tvRegister, "alpha", 0, 1);
        final AnimatorSet bottomAnim = new AnimatorSet();
        bottomAnim.setDuration(1000);
        //同时执行控件平移和alpha渐变动画        
        bottomAnim.play(tranLogin).with(tranRegister).with(alphaLogin).with(alphaRegister);

        //获取屏幕高度
        WindowManager manager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics metrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(metrics);
        int screenHeight = metrics.heightPixels;

        //通过测量,获取ivLogo的高度
        int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        ivLogo.measure(w, h);
        int logoHeight = ivLogo.getMeasuredHeight();

        //初始化ivLogo的移动和缩放动画
        float transY = (screenHeight - logoHeight) * 0.28f;
        //ivLogo向上移动 transY 的距离
        ObjectAnimator tranLogo = ObjectAnimator.ofFloat(ivLogo, "translationY", 0, -transY);
        //ivLogo在X轴和Y轴上都缩放0.75倍
        ObjectAnimator scaleXLogo = ObjectAnimator.ofFloat(ivLogo, "scaleX", 1f, 0.75f);
        ObjectAnimator scaleYLogo = ObjectAnimator.ofFloat(ivLogo, "scaleY", 1f, 0.75f);
        AnimatorSet logoAnim = new AnimatorSet();
        logoAnim.setDuration(1000);
        logoAnim.play(tranLogo).with(scaleXLogo).with(scaleYLogo);
        logoAnim.start();
        logoAnim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //待ivLogo的动画结束后,开始播放底部注册、登录按钮的动画
                bottomAnim.start();
            }
        });
    }


    /**
     * 重写返回键,实现双击退出效果
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (System.currentTimeMillis() - exitTime > 2000) {
                Toast.makeText(LoginMainActivity.this, "再按一次退出程序", Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                LoginMainActivity.this.finish();
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}
  1. activity_main_login.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"
    android:background="@android:color/white"
    tools:context="com.gcj.myapplication.activity.LoginMainActivity">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="250dp"
        android:layout_height="45dp"
        android:layout_above="@+id/tv_register"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="23dp"
        android:alpha="0"
        android:background="@drawable/shape_login"
        android:gravity="center"
        android:text="登录"
        android:textColor="@android:color/white"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/tv_register"
        android:layout_width="250dp"
        android:layout_height="45dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="102dp"
        android:alpha="0"
        android:background="@drawable/shape_login"
        android:gravity="center"
        android:text="新用户注册"
        android:textColor="@android:color/white"
        android:textSize="15sp" />

    <ImageView
        android:id="@+id/iv_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/launch_logo" />
</RelativeLayout>

四、实现只在冷启动时显示启动页,类似微信效果:

其实实现很简单,只需在启动页跳转到的主Activity(如上述:LoginMainActivity)中重写的返回键如下:

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            //实现只在冷启动时显示启动页,即点击返回键与点击HOME键退出效果一致
            Intent intent = new Intent(Intent.ACTION_MAIN);
            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            intent.addCategory(Intent.CATEGORY_HOME);
            startActivity(intent);
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

附项目地址:https://github.com/HMonkey1024/MyLauncher

欢迎转载,转载请标明出处!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,237评论 25 707
  • 今年的我已经大二了,大一一年就这么晕晕乎乎的过去了。 之前在我的人生中跟一个朋友的不欢而散,我对人际交往始终持谨慎...
    胖达啊阅读 243评论 0 0
  • 雪落梅梢,故人踪没,朔风吹落清寒。 望眼皆白璧,粉黛斑斑。 疑似佳人伫立,难舍去,泪落阑珊。 情绝断,诸多悔意,已...
    SupperRay阅读 193评论 2 0
  • 简评:继续第一部分的文章,作者在第二部分中使用的技术包括 MVVM,RxJava2. 5. MVVM 架构 + 存...
    极小光阅读 947评论 0 8