如何在屏幕上显示时为 RecyclerView 项目添加动画?
此示例演示了如何在屏幕上显示时为 RecyclerView 项目添加动画。
步骤 1 - 在 Android Studio 中创建一个新项目,转到文件 ⇒ 新建项目,并填写所有必需的详细信息以创建新项目。
步骤 2 - 将以下代码添加到 res/layout/activity_main.xml。
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layoutAnimation="@anim/layout_animation_up_to_down" app:layoutManager="android.support.v7.widget.LinearLayoutManager" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:src="@android:drawable/ic_media_next" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" /> </android.support.constraint.ConstraintLayout>
步骤 3 - 将以下代码添加到 res/anim/down_to_up.xml。
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500"> <translate android:fromYDelta="50%p" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:toYDelta="0" /> <alpha android:fromAlpha="0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:toAlpha="1" /> </set>
步骤 4 - 将以下代码添加到 res/anim/left_to_right.xml。
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500"> <translate android:fromXDelta="-100%p" android:interpolator="@android:anim/decelerate_interpolator" android:toXDelta="0" /> <alpha android:fromAlpha="0.5" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:toAlpha="1" /> </set>
步骤 5 - 将以下代码添加到 res/anim/right_to_left.xml。
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500"> <translate android:fromXDelta="100%p" android:interpolator="@android:anim/decelerate_interpolator" android:toXDelta="0" /> <alpha android:fromAlpha="0.5" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:toAlpha="1" /> </set>
步骤 6 - 将以下代码添加到 res/anim/up_to_down.xml。
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500"> <translate android:fromYDelta="-25%" android:interpolator="@android:anim/decelerate_interpolator" android:toYDelta="0" /> <alpha android:fromAlpha="0" android:interpolator="@android:anim/decelerate_interpolator" android:toAlpha="1" /> <scale android:fromXScale="125%" android:fromYScale="125%" android:interpolator="@android:anim/decelerate_interpolator" android:pivotX="50%" android:pivotY="50%" android:toXScale="100%" android:toYScale="100%" /> </set>
步骤 7 - 将以下代码添加到 res/anim/layout_animation_down_to_up.xml。
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:animation="@anim/down_to_up" android:animationOrder="normal" android:delay="15%" />
步骤 8 - 将以下代码添加到 res/anim/layout_animation_left_to_right.xml
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:animation="@anim/left_to_right" android:animationOrder="normal" android:delay="15%" />
步骤 9 - 将以下代码添加到 res/anim/layout_animation_right_to_left.xml
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:animation="@anim/right_to_left" android:animationOrder="normal" android:delay="15%" />
步骤 10 - 将以下代码添加到 res/anim/layout_animation_up_to_down.xml
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:animation="@anim/up_to_down" android:animationOrder="normal" android:delay="15%" />
步骤 11 - 将以下代码添加到 src/MainActivity.java
package com.journaldev.androidrecyclerviewlayoutanimation; import android.support.design.widget.FloatingActionButton; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.View; import android.view.animation.AnimationUtils; import android.view.animation.GridLayoutAnimationController; import android.view.animation.LayoutAnimationController; import android.widget.Spinner; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { FloatingActionButton fab; RecyclerView recyclerView; RecyclerViewAdapter recyclerViewAdapter; ArrayList<String>> arrayList = new ArrayList<>(); int[] animationList = {R.anim.layout_animation_up_to_down, R.anim.layout_animation_right_to_left, R.anim.layout_animation_down_to_up, R.anim.layout_animation_left_to_right}; int i = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fab = findViewById(R.id.fab); recyclerView = findViewById(R.id.recyclerView); populateData(); initAdapter(); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (i < animationList.length - 1) { i++; } else { i = 0; } runAnimationAgain(); } }); } private void populateData() { for (int i = 0; i < 12; i++) { arrayList.add("Item " + i); } } private void initAdapter() { recyclerViewAdapter = new RecyclerViewAdapter(arrayList); recyclerView.setAdapter(recyclerViewAdapter); } private void runAnimationAgain() { final LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(this, animationList[i]); recyclerView.setLayoutAnimation(controller); recyclerViewAdapter.notifyDataSetChanged(); recyclerView.scheduleLayoutAnimation(); } }
步骤 12 - 将以下代码添加到 Manifests/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.journaldev.androidrecyclerviewlayoutanimation"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
让我们尝试运行您的应用程序。我假设您已将您的实际 Android 移动设备连接到您的计算机。要从 Android Studio 运行应用程序,请打开您的一个项目活动文件,然后单击运行 工具栏中的图标。选择您的移动设备作为选项,然后检查您的移动设备,它将显示您的默认屏幕 -
点击 这里 下载项目代码。