[Android] Transition animée RecyclerView entre les mises en page Grille et Liste .

(Alla Dubovska) (8 octobre 2018)

Si vous avez un RecyclerView qui peut afficher des données à la fois dans une grille et une liste, vous pouvez penser à faire la transition entre eux animée. Et cet article montre comment y parvenir facilement 🙂.

Exemple dexemple. Vous pouvez trouver le lien vers lensemble du projet sur GitHub à la fin de larticle.
  1. En supposant que vous avez déjà RecyclerView votre mise en page doit ressembler à ceci:

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:id="@+id/recyclerView"
android:layout\_width="wrap\_content"
android:layout\_height="match\_parent"
app:layout\_constraintBottom\_toBottomOf="parent"
app:layout\_constraintLeft\_toLeftOf="parent"
app:layout\_constraintRight\_toRightOf="parent"
app:layout\_constraintTop\_toTopOf="parent" />

2 . Tout dabord, nous devons initialiser GridLayoutManager pour notre RecyclerView . Jai le code dinitialisation en onCreate() fonction de mon activité.

class MainActivity : AppCompatActivity() {

private var layoutManager: GridLayoutManager? = null
...

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity\_main)

layoutManager = GridLayoutManager(this, 3)
recyclerView.layoutManager = layoutManager
...
}

...
}

3. Létape suivante consiste à créer un adaptateur . Jai écrit la classe `SimpleAdapter` qui a un lien vers layoutManager de notre vue recycleur.

class SimpleAdapter(
private val layoutManager: GridLayoutManager? = null
) : RecyclerView.Adapter() {

... override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return ...
}

override fun onBindViewHolder(p0: RecyclerView.ViewHolder, p1: Int) {
}

override fun getItemCount() = 5

override fun getItemViewType(position: Int): Int {
...
}
}

Et attachez-la à RecyclerView dans onCreate() dactivité. Maintenant, cela devrait ressembler à ceci:

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity\_main)

layoutManager = GridLayoutManager(this, 3)
recyclerView.layoutManager = layoutManager
adapter = SimpleAdapter(layoutManager)
recyclerView.adapter = adapter
}

4. Dernière étape, mais non la moindre: créez 2 supports de vue pour différents modes.

et

Mise en page pour simple\_item.xml :

 android:layout\_width="110dp"
android:layout\_height="144dp"
android:layout\_margin="8dp"
android:background="@color/colorPrimaryDark" />

Mise en page pour detail\_item.xml :


android:layout\_width="match\_parent"
android:layout\_height="144dp"
android:layout\_margin="8dp"
android:background="@color/colorPrimaryDark" />

Nous avons terminé le travail préparatoire et maintenant la magie commence

Pour animer la vue du recycleur, nous devons changer le spanCoun t dans notre gestionnaire de mise en page et appelez adapter.notifyItemRangeChanged() pour tous les éléments de ladaptateur. Jai un bouton dans le menu, donc mon code pour gérer les changements de mise en page ressemble à ceci:

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
when (item?.itemId) {
R.id.change\_layout -> {
if (layoutManager?.spanCount == 1) {
layoutManager?.spanCount = 3
item.title = "list"
} else {
layoutManager?.spanCount = 1
item.title = "grid"
}
adapter?.notifyItemRangeChanged(0, adapter?.itemCount ?: 0)
}
}
return super.onOptionsItemSelected(item)
}

Et dans ladaptateur créer les différents supports de vue en fonction du mode :

Voila! Vous avez animé la transition entre les modes grille et liste dans la vue Recycler 😀.

Lensemble du projet peut être trouvé ici – https://github.com/alla-dubovska/animation-example