[Android] Geanimeerde overgang van RecyclerView tussen raster- en lijstlay-outs .

(Alla Dubovska) (8 okt.2018)

Als u een RecyclerView heeft die gegevens zowel in een raster als in een lijst kan weergeven, kunt u overwegen om de overgang tussen de twee geanimeerd te maken. En dit artikel laat zien hoe je dit gemakkelijk kunt bereiken 🙂.

Voorbeeldvoorbeeld. Je kunt een link naar het hele project vinden op GitHub aan het einde van het artikel.
  1. Ervan uitgaande dat je al RecyclerView uw lay-out zou er ongeveer zo uit moeten zien:

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 . Allereerst moeten we GridLayoutManager initialiseren voor onze RecyclerView . Ik heb een initialisatiecode in de onCreate() functie van mijn activiteit.

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. De volgende stap is het maken van een adapter . Ik heb de klasse SimpleAdapter geschreven die een link heeft naar layoutManager van onze recycler-weergave.

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 {
...
}
}

En voeg deze toe aan RecyclerView in onCreate() van activiteit. Nu zou het er als volgt uit moeten zien:

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. De laatste maar niet de minste stap – maak 2 weergavehouders voor verschillende modi.

en

Lay-out voor simple\_item.xml :

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

Lay-out voor detailed\_item.xml :


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

We zijn klaar met het voorbereidende werk en nu begint de magie

Om de weergave van de recycler geanimeerd te maken, moeten we de spanCoun t in onze layout manager en bel adapter.notifyItemRangeChanged() voor alle adapteritems. Ik heb een knop in het menu, dus mijn code om layoutwijzigingen af ​​te handelen ziet er als volgt uit:

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)
}

En in adapter maak de verschillende weergavehouders afhankelijk van de modus :

Voila! Je hebt een geanimeerde overgang tussen raster- en lijstmodi in de recyclerweergave 😀.

Het hele project kan hier worden gevonden – https://github.com/alla-dubovska/animation-example