Làm cách nào để tạo hoạt ảnh cho các mục RecyclerView khi chúng xuất hiện trên màn hình?

Ví dụ này trình bày cách tạo hoạt ảnh cho các mục RecyclerView khi chúng xuất hiện trên màn hình.

Bước 1 - Tạo một dự án mới trong Android Studio, đi tới Tệp ⇒ Dự án Mới và điền tất cả các chi tiết cần thiết để tạo một dự án mới.

Bước 2 - Thêm mã sau vào res / layout / activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
   xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:app="https://schemas.android.com/apk/res-auto"
   xmlns:tools="https://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>

Bước 3 - Thêm mã sau vào res / anim / down_to_up.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://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>

Bước 4 - Thêm mã sau vào res / anim / left_to_right.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://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>

Bước 5 - Thêm mã sau vào res / anim / right_to_left.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://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>

Bước 6 - Thêm mã sau vào res / anim / up_to_down.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://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>

Bước 7 - Thêm mã sau vào res / anim / layout_animation_down_to_up.xml.

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
   android:animation="@anim/down_to_up"
   android:animationOrder="normal"
   android:delay="15%" />

Bước 8 - Thêm mã sau vào res / anim / layout_animation_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
   android:animation="@anim/left_to_right"
   android:animationOrder="normal"
   android:delay="15%" />

Bước 9 - Thêm mã sau vào res / anim / layout_animation_right_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
   android:animation="@anim/right_to_left"
   android:animationOrder="normal"
   android:delay="15%" />

Bước 10 - Thêm mã sau vào res / anim / layout_animation_up_to_down.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
   android:animation="@anim/up_to_down"
   android:animationOrder="normal"
   android:delay="15%" />

Bước 11 - Thêm mã sau vào 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();
   }
}

Bước 12 - Thêm mã sau vào Manifests / AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://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>

Hãy thử chạy ứng dụng của bạn. Tôi giả sử bạn đã kết nối thiết bị Di động Android thực tế với máy tính của mình. Để chạy ứng dụng từ studio android, hãy mở một trong các tệp hoạt động của dự án của bạn và nhấp vào biểu tượng Run từ thanh công cụ. Chọn thiết bị di động của bạn làm tùy chọn, sau đó kiểm tra thiết bị di động sẽ hiển thị màn hình mặc định của bạn -