[Android] RecyclerView-animoitu siirtyminen ruudukko- ja luetteloasettelujen välillä .

(Alla Dubovska) (8. lokakuuta 2018)

Jos sinulla on RecyclerView, joka voi näyttää tietoja sekä ruudukossa että luettelossa, voit ajatella siirtymistä niiden välillä animoituna. Ja tässä artikkelissa kerrotaan, kuinka tämä voidaan saavuttaa helposti 🙂.

Esimerkiesimerkki. Löydät linkin koko projektiin GitHubista artikkelin lopusta.
  1. Olettaen, että sinulla on jo RecyclerView ulkoasun tulisi näyttää tältä:

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 . Ensinnäkin meidän on alustettava GridLayoutManager RecyclerView . Minulla on alustuskoodi toimintani onCreate() -toiminnossa.

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. Seuraava vaihe on luoda -sovitin . Olen kirjoittanut luokan ” SimpleAdapter` , jolla on linkki kierrätysnäkymämme layoutManageriin.

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

Ja liitä se RecyclerView-kansioon onCreate() toimintaa. Nyt sen pitäisi näyttää tältä:

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. Viimeinen mutta ei vähäisin vaihe – luo 2 näkymänpitimää eri tiloille.

ja

simple\_item.xml -asettelun asettelu:

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

detail\_item.xml -asettelun asettelu:


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

Valmistelutyö on saatu päätökseen ja nyt -taika alkaa

Kierrätysnäkymän animoimiseksi meidän on muutettava spanCoun t omassa layout manager ja soita adapter.notifyItemRangeChanged() kaikille sovittimen kohteille. Minulla on valikossa painike, joten koodi, jolla käsittelen asettelumuutoksia, näyttää tältä:

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

Ja -sovittimessa luo eri näkymänpitimet tilasta riippuen :

Voila! Sinulla on animoitu siirtyminen ruudukko- ja luettelotilojen välillä kierrätysnäkymässä .

Koko projekti löytyy täältä – https://github.com/alla-dubovska/animation-example