android按钮动态切换页面,Material Design - 页面切换动画

bryan-minear

项目中为了页面就切换能够更加友好，通常会给切换过程添加上动画。页面切换动画的方法最早是在 api 2.0 的时候加入的。今天我们来了解，目前所有可以实现页面切换的方法。

首先还是先说明一下设置动画的 xml 文件怎么写，虽然多数人都已经对这个熟记于心，但是对于不怎么用动画的人而言，实在是很容易遗忘。

用于页面切换的动画文件需要写在 res/anim 中，这个目录新工程是需要手动创建的。之后我们需要在这个目录下创建页面划入和滑出的动画文件。我们暂时以左进右出为例来说明代码。

在 anim 文件下创建的 xml 文件是以为根节点的，在这个节点下，我们可以添加、、、等常见的动画。对于页面而言的话，其实有前两种就够了。如果需要更详细的内容，不妨看看官网的介绍：链接

总之，这里是我的 xml 文件：

android:duration="@integer/anim_activity_duration"

android:fromXDelta="-100%"

android:interpolator="@android:anim/accelerate_interpolator"

android:toXDelta="0" />

android:duration="@integer/anim_activity_duration"

android:fromAlpha="1"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="1" />

android:duration="@integer/anim_activity_duration"

android:fromXDelta="0%p"

android:interpolator="@android:anim/accelerate_interpolator"

android:toXDelta="100%p" />

android:duration="@integer/anim_activity_duration"

android:fromAlpha="1"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="1" />

下面，我们来看看切换的实现方法。

方法一

这应该是目前适配了安卓 4.0 的最常见的方法：Activity#overridePendingTransition(int enterAnim, int exitAnim)。文档中对于这个方法的说明十分简单，只需要在Activity#startActivity或者Activity.finish之后调用就可以了。

那么不如就来试试。在 MainActivity 中添加按钮，跳转到 TargetActivity 中去。

MainActivity:

@Override

public void onClick(View view){

switch (view.getId()) {

case R.id.main_btn_1:

startActivity(new Intent(MainActivity.this,TargetActivity.class));

MainActivity.this.overridePendingTransition(R.anim.in_from_left, R.anim.out_to_right);

break;

}

}

TargetActivity:

@Override

public void onBackPressed() {

super.onBackPressed();

overridePendingTransition(R.anim.in_from_right,R.anim.out_to_left);

}

可以看到，最简单的切换动画就实现了，一点也不复杂。如果是项目中使用，只要封装到 BaseActivity 中，就可以应用到所有页面上。

GIF.gif

需要注意的是，如果没有在 onBackPressed() 或者页面其他调用 finish() 的地方调用 overridePendingTransition，页面销毁的时候是没有动画的，可以参考下面的效果：

GIF.gif

方法二

在 AppTheme 中做文章。Android 的内部属性太多，如果不是特别需要一般也不会去找这样一条属性来实现相应效果。而对于 Activity 而言，这里确实有这样一个属性可以使用。

true

@style/ActivityAnim

@anim/in_from_right

@anim/out_to_left

@anim/in_from_left

@anim/out_to_right

这样设置好之后，所有页面的切换效果就都变成了@style/ActivityAnim设置的样子，如果有特殊页面需要其他的动画，可以利用方法一调用方法跳转，这样的页面最好把入口方法统一起来，以免之后开发的人忘记这个页面的动画是不一样的。

方法三

上面介绍的都是可以支持 android 4.0 以上机型的方法，但是之后这种是 5.0 以上版本的方法。如果应用需要在 5.0 以下版本也实现动画，就不建议使用这种方法。

** 3.1 动画说明

Transition API 主要描述了页面四种状态的动画，分别为：退出(exit)，进入(enter)，返回(return)和再次进入(reenter)。我们以 A 页面跳转到 B 页面为例说明上面的动画：

Activity A的退出变换(exit transition)决定了在A调用B的时候，A中的View是如何播放动画的。

Activity B的进入变换(enter transition)决定了在A调用B的时候，B中的View是如何播放动画的。

Activity B的返回变换(return transition)决定了在B返回A的时候，B中的View是如何播放动画的。

Activity A的再次进入变换(reenter transition)决定了在B返回A的时候，A中的View是如何播放动画的。

//通过主题设定

true

//通过代码设定，需要在 setContentView 之前调用

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

然后，我们可以通过下面的方法使用动画(这些代码需要在 setContentView 之前调用)：

Activity.getWindow().setExitTransition(Transition transition)

Activity.getWindow().setEnterTransition(Transition transition)

Activity.getWindow().setReturnTransition(Transition transition)

Activity.getWindow().setReenterTransition(Transition transition)

在 TargetActivity 中我添加了下面的动画：

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

Slide slide = new Slide();

slide.setDuration(1000);

getWindow().setReturnTransition(slide);

getWindow().setEnterTransition(slide);

setContentView(R.layout.activity_target);

可以看到效果：

GIF.gif

上面的效果中，ActionBar 和 NavigationBar 都有了动画，一般情况下我们是不需要的，这里我们可以在 Transition 中去除这两个 View，使它们不执行动画。

slide.excludeTarget(android.R.id.statusBarBackground,true);

slide.excludeTarget(android.R.id.navigationBarBackground,true);

上面的方法对于导航栏已经生效了，但是不知道为什么，对于顶部的菜单栏并没有失效，经过一番搜索也没有找到其他可以用的属性，不过对于开发影响也不是很大，毕竟现在没什么应用会用这个默认的顶部菜单栏。但是如果有人知道这里应该如何屏蔽这个布局的动画，请务必私信我，感恩。

Fragment 的切换动画

对于 Fragment 而言，就比较简单了，在 FragmentTransaction 类中有这样的方法：

/**

* Set specific animation resources to run for the fragments that are

* entering and exiting in this transaction. These animations will not be

* played when popping the back stack.

*/

public abstract FragmentTransaction setCustomAnimations(@AnimRes int enter,

@AnimRes int exit);

/**

* Set specific animation resources to run for the fragments that are

* entering and exiting in this transaction. The popEnter

* and popExit animations will be played for enter/exit

* operations specifically when popping the back stack.

*/

public abstract FragmentTransaction setCustomAnimations(@AnimRes int enter,

@AnimRes int exit, @AnimRes int popEnter, @AnimRes int popExit);

在调用 commit() 方法提交事务之前，设置自定义的动画就可以了，具体的细节操作这里就不再说明了，基本和 Activity.overridePendingTransition 是一样的。

同时，对于 API 21 以上，我们可以直接在 Fragment 中找到这样的方法：

setExitTransition(Transition transition)

setEnterTransition(Transition transition)

setReturnTransition(Transition transition)

setReenterTransition(Transition transition)

用法同 Activity。

以上。