📜  在 Android 中为 RecyclerView 项创建浮动动画

📅  最后修改于: 2022-05-13 01:54:56.538000             🧑  作者: Mango

在 Android 中为 RecyclerView 项创建浮动动画

在 Android 中,RecyclerView 是一个 UI 元素,用于以列表的形式显示一种布局项。这个列表是可滚动的,并且列表的每个元素都是可点击的。你可以在这篇文章中找到更多关于创建 RecyclerView 的信息:RecyclerView in Android with Example。 RecyclerView 默认没有进入或退出动画。但是,可以创建动画并将其应用于 RecyclerView。下面给出了一个示例视频,以了解我们将在本文中做什么。请注意,我们将使用 Kotlin 语言来实现这个项目。

因此,在本文中,我们将向您展示如何在 Android 中向 RecyclerView 添加入口动画。 IDE 准备就绪后,请按照以下步骤操作,但首先,了解我们在本文中创建和解释的应用程序非常重要。

了解应用程序结构

应用程序在activity_main.xml中调用一个基本的 RecyclerView。 RecyclerView 中显示的元素是主代码中生成的字符串数组。 RecyclerView 项目布局是recycler_view_item_layout.xml和 RecyclerView 适配器是MyAdapter.kt 。主要代码是MainActivity.kt ,其中实现了适配器以将生成的字符串发送到 RecyclerView。

动画即right_to_left.xml和动画布局即layout_right_to_left.xmlanim文件夹中创建。要创建动画文件夹,请右键单击 res 文件夹,选择新建,单击 Android 资源目录。将出现一个新资源目录窗口。将目录名称设置为动画,资源类型设置为过渡,然后单击确定。创建动画文件夹后,右键单击它,选择新建,然后单击动画资源文件。将文件名设置为 right_to_left 和要设置的根元素,然后单击确定。对 layout_right_to_left 重复相同的过程,将其命名并将 Root 元素设置为layoutAnimation ,然后单击 OK。现在动画和动画布局文件都准备好了。动画在right_to_left.xml中编程,动画布局在layout_right_to_left.xml中。动画将在动画布局文件中静态调用,动画布局文件将在主代码中动态调用以将此布局应用于 RecyclerView。

分步实施

第 1 步:在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目,请参阅如何在 Android Studio 中创建/启动新项目。我们在Kotlin中演示了该应用程序,因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步:处理动画 > right_to_left.xml

示例从右到左的动画代码如下所示。该动画将在 0.5 秒/ 500 毫秒内开始和完成。

XML


    
    


XML



XML


 
    
 
    
 


XML


 
    
 


Kotlin
package org.geeksforgeeks.recyclerviewfloatanimation
 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
 
class MyAdapter(mData: ArrayList): RecyclerView.Adapter() {
    private val mDataCopy = mData
    inner class ViewHolder(view: View): RecyclerView.ViewHolder(view), View.OnClickListener {
 
        val tvCard: TextView = view.findViewById(R.id.text_view_rv)
 
        override fun onClick(v: View?) {
            TODO("Not yet implemented")
        }
    }
 
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
 
        return ViewHolder(
            LayoutInflater.from(parent.context)
            .inflate(R.layout.recycler_view_item_layout, parent, false))
    }
 
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvCard.text = mDataCopy[position]
    }
 
    override fun getItemCount(): Int {
        return mDataCopy.size
    }
}


Kotlin
package org.geeksforgeeks.recyclerviewfloatanimation
 
import android.annotation.SuppressLint
import android.os.Bundle
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.floatingactionbutton.FloatingActionButton
 
class MainActivity : AppCompatActivity() {
    @SuppressLint("NotifyDataSetChanged")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Declaring and initializing the
        // RecyclerView from the layout file
        val mRecyclerView = findViewById(R.id.recycler_view_1)
        mRecyclerView.layoutManager = LinearLayoutManager(this)
 
        // Generating data (array of strings)
        val mDataArray = mGenerateData()
 
        // Initializing the adapter
        val mAdapter = MyAdapter(mDataArray)
 
        // Declaring and initializing the
        // Floating Button from the layout file
        val mFloatingButton = findViewById(R.id.floating_button_1)
         
        // When Button is clicked, animation is applied
        // to the RecyclerView and RecyclerView is displayed
        mFloatingButton.setOnClickListener{
            val controller = AnimationUtils.loadLayoutAnimation(this, R.anim.layout_right_to_left)
            mRecyclerView.layoutAnimation = controller
            mAdapter.notifyDataSetChanged()
            mRecyclerView.scheduleLayoutAnimation()
            mRecyclerView.adapter = mAdapter
        }
    }
 
    // Sample function to return array
    // of strings (Item 1, Item 2, Item 3,.....)
    private fun mGenerateData(): ArrayList {
        val mArrayList = arrayListOf()
        for (i in 0..10) {
            mArrayList.add("Item $i")
        }
        return mArrayList
    }
}


第 3 步:动画 > layout_right_to_left.xml

一个简单的布局代码如下所示。上面的动画是在布局属性中添加的。延迟应用于下一个项目,因此所有项目不会一次出现。

XML



第 4 步:使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是activity_main.xml文件的代码。添加一个 RecyclerView 和一个浮动按钮,如下所示。 RecyclerView 将用于显示字符串,而 Button 将用于在单击时显示 RecyclerView。

XML



 
    
 
    
 

第五步:recycler_view_item_layout.xml

项目布局代码如下所示。它由一个显示字符串的 TextView 组成。

XML



 
    
 

第 6 步:使用 MyAdapter.kt 文件

以下代码用于 RecyclerView 适配器。类似代码的解释可以在本文介绍中提到的文章中找到。

科特林

package org.geeksforgeeks.recyclerviewfloatanimation
 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
 
class MyAdapter(mData: ArrayList): RecyclerView.Adapter() {
    private val mDataCopy = mData
    inner class ViewHolder(view: View): RecyclerView.ViewHolder(view), View.OnClickListener {
 
        val tvCard: TextView = view.findViewById(R.id.text_view_rv)
 
        override fun onClick(v: View?) {
            TODO("Not yet implemented")
        }
    }
 
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
 
        return ViewHolder(
            LayoutInflater.from(parent.context)
            .inflate(R.layout.recycler_view_item_layout, parent, false))
    }
 
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.tvCard.text = mDataCopy[position]
    }
 
    override fun getItemCount(): Int {
        return mDataCopy.size
    }
}

第 7 步:使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

科特林

package org.geeksforgeeks.recyclerviewfloatanimation
 
import android.annotation.SuppressLint
import android.os.Bundle
import android.view.animation.AnimationUtils
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.floatingactionbutton.FloatingActionButton
 
class MainActivity : AppCompatActivity() {
    @SuppressLint("NotifyDataSetChanged")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Declaring and initializing the
        // RecyclerView from the layout file
        val mRecyclerView = findViewById(R.id.recycler_view_1)
        mRecyclerView.layoutManager = LinearLayoutManager(this)
 
        // Generating data (array of strings)
        val mDataArray = mGenerateData()
 
        // Initializing the adapter
        val mAdapter = MyAdapter(mDataArray)
 
        // Declaring and initializing the
        // Floating Button from the layout file
        val mFloatingButton = findViewById(R.id.floating_button_1)
         
        // When Button is clicked, animation is applied
        // to the RecyclerView and RecyclerView is displayed
        mFloatingButton.setOnClickListener{
            val controller = AnimationUtils.loadLayoutAnimation(this, R.anim.layout_right_to_left)
            mRecyclerView.layoutAnimation = controller
            mAdapter.notifyDataSetChanged()
            mRecyclerView.scheduleLayoutAnimation()
            mRecyclerView.adapter = mAdapter
        }
    }
 
    // Sample function to return array
    // of strings (Item 1, Item 2, Item 3,.....)
    private fun mGenerateData(): ArrayList {
        val mArrayList = arrayListOf()
        for (i in 0..10) {
            mArrayList.add("Item $i")
        }
        return mArrayList
    }
}

输出:

您可以看到动画应用于浮动按钮单击时的 RecyclerView 项。