Activity添加进入和退出动画的两种方式，解决黑色区域问题

Activity添加进入和退出动画的两种方式，解决黑色区域问题

给Activity添加进入和退出动画的操作，大家一定不会陌生。常见的有两种方式，一种是通过style文件给Activity设置Theme，另一种是直接代码中调用Activity#overridePendingTransition方法。

使用代码和使用style文件是一样的效果，下面举例进行说明，比如说我们的Activity进入动画需要从下往上滑动，退出需要从上往下滑动。

通过style文件给Activity设置Theme来实现

styles.xml中：

<style name="AnimationActivityTopDown" parent="@android:style/Animation.Activity">
    <item name="android:activityOpenEnterAnimation">@anim/slide_in_down</item>
    <item name="android:activityOpenExitAnimation">@anim/slide_out_down</item>
    <item name="android:activityCloseEnterAnimation">@anim/slide_in_up</item>
    <item name="android:activityCloseExitAnimation">@anim/slide_out_up</item>
</style>

对应的anim文件：

res/anim/slide_in_down.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <translate
        android:fromYDelta="100%"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0"/>
</set>

res/anim/slide_out_down.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <translate
        android:fromYDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="-100%" />
</set>

res/anim/slide_in_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <translate
        android:fromYDelta="-100%"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0" />
</set>

res/anim/slide_out_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300">
    <translate
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%" />
</set>

接着将动画的style设置给目标Activity的style，然后将目标Activity的style设置给Activity的theme属性：

<style name="TopDownAnim" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowAnimationStyle">@style/AnimationActivityTopDown</item>
</style>

<activity
    android:name=".ActivityAnimActivity"
    android:label="Activity动画"
    android:theme="@style/TopDownAnim"></activity>

具体效果图如下：

通过Activity#overridePendingTransition方法

基于上面的anim文件，我们在启动目标Activity时，在startActivity后立即调用Activity#overridePendingTransition方法，代码如下：

btn_activity_anim.setOnClickListener {
    startActivity(Intent(this, ActivityAnimActivity::class.java))
    // 进入，从下往上动画
    overridePendingTransition(R.anim.slide_in_down, R.anim.slide_out_down)
}

在目标Activity关闭时，也调用Activity#overridePendingTransition方法，代码如下：

override fun finish() {
    super.finish()
    // 退出，从上往下动画
    overridePendingTransition(R.anim.slide_in_up, R.anim.slide_out_up)
}

具体效果如下：

细节优化——动画中的黑边去除

上面粗略的实现了动画效果，细心点的同学可以看到，在页面切换的过程中，可以明显的看见Activity的顶部有块黑色区域，如何去除呢？

这个还得从Activity的theme入手，具体如下：

<style name="TopDownAnim" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!-- 去除Activity顶部黑线 -->
    <item name="android:windowContentOverlay">@null</item>
    <!-- 系统状态栏背景设置透明 -->
    <item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">
        @android:color/transparent
    </item>
    <!-- Activity背景 -->
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowAnimationStyle">@style/AnimationActivityTopDown</item>
</style>

项目地址

AndroidStudy

具体请看ActivityAnimActivity

参考：

Activity从屏幕底部滑出、滑入、处理黑色背景和状态栏