[Android] Grid 및 List 레이아웃 간의 RecyclerView 애니메이션 전환 .

(Alla Dubovska) (2018 년 10 월 8 일)

그리드와 목록 모두에 데이터를 표시 할 수있는 RecyclerView가있는 경우 애니메이션 간 전환을 고려할 수 있습니다. 이 기사에서는이를 쉽게 달성하는 방법을 보여줍니다. 🙂.

샘플 예. 문서 끝 부분에서 GitHub의 전체 프로젝트에 대한 링크를 찾을 수 있습니다.
  1. 이미 RecyclerView 레이아웃은 다음과 같아야합니다.

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 . 먼저 RecyclerView iv id에 대해 GridLayoutManager 를 초기화해야합니다. = “ab96e01df1″>

. 내 활동의 onCreate() 기능에 초기화 코드가 있습니다.

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. 다음 단계는 어댑터 를 만드는 것입니다. 리사이클 러 뷰의 layoutManager에 대한 링크가있는`SimpleAdapter` 클래스를 작성했습니다.

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

그리고 의 활동. 이제 다음과 같이 표시됩니다.

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. 마지막 단계는 아니지만 다양한 모드에 대해 2 개의 뷰 홀더 를 만듭니다.

simple\_item.xml 의 레이아웃 :

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

detailed\_item.xml 의 레이아웃 :


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

준비 작업을 마쳤으며 이제 마법이 시작됩니다

리사이클 러보기를 애니메이션으로 만들려면 spanCoun t를 레이아웃 관리자를 선택하고 모든 어댑터 항목에 대해 adapter.notifyItemRangeChanged()를 호출합니다. 메뉴에 버튼이 있으므로 레이아웃 변경을 처리하는 코드는 다음과 같습니다.

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

그리고 어댑터 모드에 따라 다른 뷰 홀더 생성 :

Voila! 리사이클 러보기에서 그리드 모드와 목록 모드간에 애니메이션 전환이 있습니다. 😀.

전체 프로젝트는 여기에서 찾을 수 있습니다. — https://github.com/alla-dubovska/animation-example