在 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.xml在anim文件夹中创建。要创建动画文件夹,请右键单击 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 项。