[Android] RecyclerView animált átmenet a rács és a lista elrendezés között .

(Alla Dubovska) (2018. október 8.)

Ha rendelkezik olyan RecyclerView-val, amely képes adatokat megjeleníteni egy rácsban és egy listában is, akkor fontolóra veheti az animáció közötti átmenetet. Ez a cikk bemutatja, hogyan lehet ezt könnyen elérni 🙂.

Minta példa. A cikk végén megtalálhatja a teljes projektre mutató linket a GitHubon.
  1. Feltéve, hogy már rendelkezik RecyclerView az elrendezésnek körülbelül így kell kinéznie:

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 . Először is inicializálnunk kell a GridLayoutManager elemet a RecyclerView . Inicializáló kódom van a tevékenységem onCreate() funkciójában.

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. A következő lépés az adapter létrehozása . Írtam egy `SimpleAdapter` osztályt, amely hivatkozik az újrahasznosító nézet layoutManagerére.

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

És csatolja a RecyclerView-hez a onCreate() tevékenység. Most így kell kinéznie:

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. Az utolsó, de nem utolsósorban létre kell hozni 2 nézőtartót különböző módokhoz.

és

Az simple\_item.xml elrendezése:

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

Az detail\_item.xml elrendezése:


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

Befejeztük az előkészítő munkát, és most kezdődik a varázslat

Az újrahasznosító nézet animációjához módosítanunk kell a spanCoun t a elrendezéskezelő és hívja a adapter.notifyItemRangeChanged() t az összes adapterelemhez. Van egy gomb a menüben, így az elrendezés változásainak kezelésére szolgáló kódom így néz ki:

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

És a adapterben hozza létre a különböző nézettartókat a módtól függően:

Voila! Animált átmenet van a rács és a listamódok között az újrahasznosító nézetben 😀.

A teljes projekt itt található – https://github.com/alla-dubovska/animation-example