Android(安卓)片段过渡

什么是过渡(Transition)?

Lollipop 中的 activity 和片段过渡是建立在 Android 中一个相对较新的功能(称为过渡)之上的。KitKat 中引入的转换框架提供了一个方便的 API,用于在应用程序中的不同 UI 状态之间设置动画。该框架围绕两个关键概念构建:场景和过渡。场景定义应用程序 UI 的给定状态,而过渡定义两个场景之间的动画更改。

当场景发生变化时,过渡有两个主要作用:

  • 捕获开始场景和结束场景中每个视图的状态。
  • 基于将在一个场景到另一个场景中设置视图动画的差异创建动画制作器。

实例

这个例子将解释如何使用片段转换创建自定义动画,因此,让我们按照以下步骤进行操作,类似于创建Hello World 例子时遵循的步骤:

步骤描述
1您将使用 Android Studio 创建一个 Android 应用程序,并将其命名为 HelloWorld,位于 com.cankaoshouce.helloworld 包下,activity 为空。
2修改位于 res/layout/activity_main.xmlactivity_main.xml,以添加文本视图。
3res/layout 目录下创建一个名为 fragment_stack.xml 的布局,以定义您的 fragment 标签和 button 标签
4创建一个位于 res/ 的文件夹,并将其命名为 animator,然后添加 fragment_slide_right_enter .xmlfragment_slide_left_exit.xmlfragment_slide_right_exit.xmlfragment_slide_left_enter.xml
5MainActivity.java 中,需要添加片段堆栈,片段管理器和 onCreateView()
6运行应用程序以启动 Android 模拟器,并验证应用程序中所做更改的结果。

以下是包含 TextView 的 res.layout/activity_main.xml 的内容:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical" >
  7. <FrameLayout
  8. android:id="@+id/fragment1"
  9. android:layout_width="match_parent"
  10. android:layout_height="0dp"
  11. android:layout_weight="1" />
  12. <Button
  13. android:id="@+id/new_fragment"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:text="添加新片段" />
  17. </LinearLayout>

以下是 res/layout/fragment_stack.xml 文件的内容。它包含框架布局和按钮:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <TextView
  6. android:id="@+id/text"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:gravity="center"/>
  10. </LinearLayout>

以下是 res/animator/fragment_slide_left_enter.xml 文件的内容。它包含 setobjectAnimator 标签:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <objectAnimator
  4. android:interpolator="@android:interpolator/decelerate_quint"
  5. android:valueFrom="100dp" android:valueTo="0dp"
  6. android:valueType="floatType"
  7. android:propertyName="translationX"
  8. android:duration="@android:integer/config_mediumAnimTime" />
  9. <objectAnimator
  10. android:interpolator="@android:interpolator/decelerate_quint"
  11. android:valueFrom="0.0" android:valueTo="1.0"
  12. android:valueType="floatType"
  13. android:propertyName="alpha"
  14. android:duration="@android:integer/config_mediumAnimTime" />
  15. </set>

以下是 res/animator/fragment_slide_left_exit.xml 文件的内容。它包含 setobjectAnimator 标签:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <objectAnimator
  4. android:interpolator="@android:interpolator/decelerate_quint"
  5. android:valueFrom="100dp" android:valueTo="0dp"
  6. android:valueType="floatType"
  7. android:propertyName="translationX"
  8. android:duration="@android:integer/config_mediumAnimTime" />
  9. <objectAnimator
  10. android:interpolator="@android:interpolator/decelerate_quint"
  11. android:valueFrom="0.0" android:valueTo="1.0"
  12. android:valueType="floatType"
  13. android:propertyName="alpha"
  14. android:duration="@android:integer/config_mediumAnimTime" />
  15. </set>

以下是 res/animator/fragment_slide_right_enter.xml 文件的内容。它包含 setobjectAnimator 标签:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <objectAnimator
  4. android:interpolator="@android:interpolator/decelerate_quint"
  5. android:valueFrom="-100dp" android:valueTo="0dp"
  6. android:valueType="floatType"
  7. android:propertyName="translationX"
  8. android:duration="@android:integer/config_mediumAnimTime" />
  9. <objectAnimator
  10. android:interpolator="@android:interpolator/decelerate_quint"
  11. android:valueFrom="0.0" android:valueTo="1.0"
  12. android:valueType="floatType"
  13. android:propertyName="alpha"
  14. android:duration="@android:integer/config_mediumAnimTime" />
  15. </set>

以下是 res/animator/fragment_slide_right_exit.xml 文件的内容,其中包含 setobjectAnimator 标签:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <objectAnimator
  4. android:interpolator="@android:interpolator/decelerate_quint"
  5. android:valueFrom="0dp" android:valueTo="100dp"
  6. android:valueType="floatType"
  7. android:propertyName="translationX"
  8. android:duration="@android:integer/config_mediumAnimTime" />
  9. <objectAnimator
  10. android:interpolator="@android:interpolator/decelerate_quint"
  11. android:valueFrom="1.0" android:valueTo="0.0"
  12. android:valueType="floatType"
  13. android:propertyName="alpha"
  14. android:duration="@android:integer/config_mediumAnimTime" />
  15. </set>

以下代码将是 src/main/java/MainActivity.java 文件的内容。它包含按钮侦听器,堆栈片段和 onCreateView

  1. package com.cankaoshouce.helloworld;
  2. import android.app.Activity;
  3. import android.app.Fragment;
  4. import android.app.FragmentTransaction;
  5. import android.os.Bundle;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.view.ViewGroup;
  10. import android.widget.Button;
  11. import android.widget.TextView;
  12. /**
  13. * 演示在判断事务中使用自定义动画.
  14. */
  15. public class MainActivity extends Activity {
  16. int mStackLevel = 1;
  17. @Override
  18. protected void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. setContentView(R.layout.activity_main);
  21. Button button = (Button)findViewById(R.id.new_fragment);
  22. button.setOnClickListener(new OnClickListener() {
  23. public void onClick(View v) {
  24. addFragmentToStack();
  25. }
  26. });
  27. if (savedInstanceState == null) {
  28. // 添加初始碎片
  29. Fragment newFragment = CountingFragment.newInstance(mStackLevel);
  30. FragmentTransaction ft = getFragmentManager().beginTransaction();
  31. ft.add(R.id.fragment1, newFragment).commit();
  32. }
  33. else
  34. {
  35. mStackLevel = savedInstanceState.getInt("level");
  36. }
  37. }
  38. @Override
  39. public void onSaveInstanceState(Bundle outState) {
  40. super.onSaveInstanceState(outState);
  41. outState.putInt("level", mStackLevel);
  42. }
  43. void addFragmentToStack() {
  44. mStackLevel++;
  45. // 实例化新的碎片
  46. Fragment newFragment = CountingFragment.newInstance(mStackLevel);
  47. // 添加碎片到活动,并将其放入后退栈中
  48. FragmentTransaction ft = getFragmentManager().beginTransaction();
  49. ft.setCustomAnimations(R.animator.fragment_slide_left_enter,
  50. R.animator.fragment_slide_left_exit,
  51. R.animator.fragment_slide_right_enter,
  52. R.animator.fragment_slide_right_exit);
  53. ft.replace(R.id.fragment1, newFragment);
  54. ft.addToBackStack(null);
  55. ft.commit();
  56. }
  57. public static class CountingFragment extends Fragment {
  58. int mNum;
  59. /**
  60. * 创建CountingFragment的实例,提供"num"作为参数
  61. */
  62. static CountingFragment newInstance(int num) {
  63. CountingFragment f = new CountingFragment();
  64. Bundle args = new Bundle();
  65. args.putInt("num", num);
  66. f.setArguments(args);
  67. return f;
  68. }
  69. /**
  70. * 在创建时,获取实例的number参数.
  71. */
  72. @Override
  73. public void onCreate(Bundle savedInstanceState) {
  74. super.onCreate(savedInstanceState);
  75. mNum = getArguments() != null ? getArguments().getInt("num") : 1;
  76. }
  77. /**
  78. * 碎片的界面仅包含一个TextView,用于显示number
  79. */
  80. @Override
  81. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
  82. View v = inflater.inflate(R.layout.fragment_stack, container, false);
  83. View tv = v.findViewById(R.id.text);
  84. ((TextView)tv).setText("Fragment #" + mNum);
  85. tv.setBackgroundDrawable(getResources().getDrawable(android.R.drawable.gallery_thumb));
  86. return v;
  87. }
  88. }
  89. }

以下将是 AndroidManifest.xml 的内容:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3. package="com.cankaoshouce.helloworld">
  4. <application
  5. android:allowBackup="true"
  6. android:icon="@drawable/ic_launcher"
  7. android:label="@string/app_name"
  8. android:theme="@style/AppTheme" >
  9. <activity
  10. android:name=".MainActivity"
  11. android:label="@string/app_name" >
  12. <intent-filter>
  13. <action android:name="android.intent.action.MAIN" />
  14. <category android:name="android.intent.category.LAUNCHER" />
  15. </intent-filter>
  16. </activity>
  17. </application>
  18. </manifest>

运行应用程序:

让我们尝试运行我们刚刚创建的 HelloWorld 应用程序。我假设您是在进行环境设置时创建的 AVD。要从 Android Studio 运行该应用,请打开您项目的 Activity 文件之一,然后运行图标从工具栏中单击 Eclipse Run Icon 图标。Android 在您的 AVD 上安装该应用程序并启动它,如果您的设置和应用程序一切正常,它将在 "模拟器" 窗口中显示:

如果单击添加新片段,它将把第一个片段更改为第二个片段,如下所示:

分类导航