RecyclerView is a ViewGroup ,that display a scrolling list of elements based on large data sets (or data that frequently changes). RecyclerView widget is more flexible and efficient version of ListView .
In the previous series of tutorials we have seen Basic Implementation of Android Recyclerview , In this tutorial we will see drag drop of RecyclerView items .
Lets see example of drag & drop for items of recyclerView GridLayout
ItemTouchHelper :
ItemTouchHelper is a utility class to add swipe to dismiss and drag & drop support to RecyclerView. It works with a RecyclerView and a Callback class, which configures what type of interactions are enabled and also receives events when user performs these actions.
Add RecyclerView To XML Layout
Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) and add RecyclerView to your layout file .
<?xml version="1.0" encoding="utf-8"?> <androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rcv" android:layout_width="match_parent" android:layout_height="match_parent" />
Data Class
To Load Data Into RecyclerView , We will read JSON File Kept Inside Asset folder and map it to above defined data class
file : src/main/assets/android_version.json
Name field from json matches to respective png file name kept inside drawable .
Folder : app\src\main\res\drawable
Folder : app\src\main\res\drawable
file : Model.kt
file: ItemMoveCallback.kt
file : row_item.xml
file : CustomAdapter.kt
file : MainActivity.kt
package com.tutorialsbuzz.recyclerviewgridlayoutdragdrop data class Model(val name: String, val version: String) {}
ItemTouchHelper CallBack For RecyclerView
Create an abstract class ItemMoveCallback extend this class to ItemTouchHelper.Callback override the getMovementFlags , onMove method .
1. getMovementFlags : Should return a composite flag which defines the enabled move directions in each state (idle, swiping, dragging).Instead of composing this flag manually, you can use makeMovementFlags(int, int) or makeFlag(int, int).
when using
- LinearLayoutManager : Set direction to ItemTouchHelper.UP or ItemTouchHelper.DOWN .
- GridLayoutManager : Set direction to ItemTouchHelper.UP or ItemTouchHelper.DOWN or ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT .
2. onMove : Called when onMove(RecyclerView, ViewHolder, ViewHolder) returns true , Upon receiving this callback, you should move the item from the old position to target position .call onRowMoved fun of ItemTouchHelperContract which is implements by CustomAdapter just swap the dragged position and call notifydatasetchange .
3. onSwiped : Called when a ViewHolder is swiped by the user. At this point, you should update your adapter (e.g. remove the item) and call related Adapter notify event.
file: ItemMoveCallback.kt
package com.tutorialsbuzz.recyclerviewgridlayoutdragdrop import androidx.recyclerview.widget.ItemTouchHelper import androidx.recyclerview.widget.RecyclerView class ItemMoveCallback(private val mAdapter: ItemTouchHelperContract) : ItemTouchHelper.Callback() { override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {} override fun getMovementFlags( recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder ): Int { val dragFlags = ItemTouchHelper.UP or ItemTouchHelper.DOWN return makeMovementFlags(dragFlags, 0) } override fun onMove( recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder ): Boolean { mAdapter.onRowMoved(viewHolder.adapterPosition, target.adapterPosition) return true } interface ItemTouchHelperContract { fun onRowMoved(fromPosition: Int, toPosition: Int) } }
Interface CallBack
Create an interface ItemTouchHelperContract which is implements by CustomAdapter , inside onRowMoved just swap the dragged position and call notifydatasetchanged
- onRowMoved called inside onMove of ItemMoveCallback .
- Inside CustomAdapter onRowMoved which is overriden gets callback.
interface ItemTouchHelperContract { fun onRowMoved(fromPosition: Int, toPosition: Int) }
Adapter and ViewHolder For RecyclerView
1. XML Layout For RecyclerView Item
Create XML Layout file in res/layout and name it row_item.xml .This Layout defines the layout for Items of RecyclerView . Here In this example we have two TextView inside LinearLayout .
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:padding="18dp"> <com.tutorialsbuzz.recyclerviewgridlayoutdragdrop.CirleImageView android:id="@+id/img" android:layout_width="60dp" android:layout_height="60dp" android:contentDescription="@string/app_name" app:civ_border_color="#e5e5e5" app:civ_border_width="8dp" /> <TextView android:id="@+id/txt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:text="Title" android:textSize="14sp" android:textStyle="bold" /> </LinearLayout>
2. Adapter
Create a Adapter That RecyclerView Can Use , Create a class CustomAdapter extend it to RecyclerView.Adapter .
3. ViewHolder
Create Inner class ViewHolder extend it to RecyclerView.ViewHolder
file : CustomAdapter.kt
package com.tutorialsbuzz.recyclerviewgridlayoutdragdrop import android.content.Context import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import androidx.recyclerview.widget.RecyclerView import kotlinx.android.synthetic.main.row_item.view.* import java.util.* class CustomAdapter(val modelList: List<Model>, val context: Context) : RecyclerView.Adapter<RecyclerView.ViewHolder>(), ItemMoveCallback.ItemTouchHelperContract { override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) { (holder as ViewHolder).bind(modelList.get(position)); } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { val layoutInflater = LayoutInflater.from(parent.context) return ViewHolder(layoutInflater.inflate(R.layout.row_item, parent, false)) } override fun getItemCount(): Int { return modelList.size; } interface ClickListener { fun onClick(pos: Int, aView: View) } inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { fun bind(model: Model): Unit { itemView.txt.text = model.name val id = context.resources.getIdentifier( model.name.toLowerCase(), "drawable", context.packageName ) itemView.img.setImageResource(id) } } override fun onRowMoved(fromPosition: Int, toPosition: Int) { if (fromPosition < toPosition) { for (i in fromPosition until toPosition) { Collections.swap(modelList, i, i + 1) } } else { for (i in fromPosition downTo toPosition + 1) { Collections.swap(modelList, i, i - 1) } } notifyItemMoved(fromPosition, toPosition) } }
1. MainActivity
- Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
- Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
- Read JSON Data From Asset Folder , this will be used for binding data into RecyclerView .
- Set GridLayoutManager to RecyclerView.
- Create Instance of Adapter and set to RecyclerView .
- Add CustomItemDecortion to RecyclerView .
- Create an instance of ItemTouchHelper by passing ItemMoveCallback as parameter to its constructor.
- Attach ItemTouchHelper to RecyclerView .
package com.tutorialsbuzz.recyclerviewgridlayoutdragdrop import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import androidx.recyclerview.widget.GridLayoutManager import androidx.recyclerview.widget.ItemTouchHelper import kotlinx.android.synthetic.main.activity_main.* import org.json.JSONArray import org.json.JSONObject class MainActivity : AppCompatActivity() { var touchHelper: ItemTouchHelper? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val model = readFromAsset(); val adapter = CustomAdapter(model, this) recyclerView.layoutManager = GridLayoutManager(this, 4) recyclerView.adapter = adapter; val callback: ItemTouchHelper.Callback = ItemMoveCallback(adapter) touchHelper = ItemTouchHelper(callback) touchHelper!!.attachToRecyclerView(recyclerView) } private fun readFromAsset(): List<Model> { val modeList = mutableListOf<Model>() val bufferReader = application.assets.open("android_version.json").bufferedReader() val json_string = bufferReader.use { it.readText() } val jsonArray = JSONArray(json_string); for (i in 0..jsonArray.length() - 1) { val jsonObject: JSONObject = jsonArray.getJSONObject(i) val model = Model(jsonObject.getString("name"), jsonObject.getString("version")) modeList.add(model) } return modeList } }
No comments:
Post a Comment