숨참고 개발다이브

[안드로이드/Kotlin] RecyclerView를 이용한 GridView 생성하기 (GridLayoutManager) 본문

개발/Android

[안드로이드/Kotlin] RecyclerView를 이용한 GridView 생성하기 (GridLayoutManager)

사라 Sarah 2022. 5. 26. 14:24
728x90

 

 

안드로이드에는 격자 형태로 아이템을 보여주는 GridView 라는 위젯이 존재한다.

하지만 GridView를 사용하는 대신 RecyclerView에 GridLayoutManager 를 설정하여 사용할 수 있다.

 

val gridLayoutManager = GridLayoutManager(this, 3)
mBinding.recyclerItem.layoutManager = gridLayoutManager
mBinding.recyclerItem.adapter = RecyclerAdapter()

 

GridLayoutManager 를 생성할 때 파라미터로 context 와 한 줄에 표시해줄 아이템 수인 spanCount 를 입력하면 된다.

 

GridLayoutManager(this, 3) -> 한 줄에 3개의 아이템을 표시

 

그 외의 어댑터 연결은 일반 리스트형 RecyclerView 와 같은 방식으로 작성해 연결하면 된다.

또한 아이템의 간격은 RecyclerView에 addItemDecoration()으로 ItemDecoration을 추가해주면 된다.

 

 

 

코드 전체

class MainActivity : AppCompatActivity() {

    private lateinit var mBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(mBinding.root)

        val gridLayoutManager = GridLayoutManager(this, 4)
        mBinding.recyclerItem.layoutManager = gridLayoutManager
        mBinding.recyclerItem.addItemDecoration(RecyclerItemDecoration(30, 30, 4))

        mBinding.recyclerItem.adapter = RecyclerAdapter()

    }


    inner class RecyclerAdapter() :
        RecyclerView.Adapter<RecyclerAdapter.ItemViewHolder>() {

        inner class ItemViewHolder(val binding: RecyclerGridItemBinding) : RecyclerView.ViewHolder(
            binding.root
        )

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
            val binding = RecyclerGridItemBinding.inflate(
                LayoutInflater.from(this@MainActivity),
                parent,
                false
            )

            return ItemViewHolder(binding)
        }

        override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
            val item = resources.getStringArray(R.array.count)[position]

            holder.binding.textItem.text = item
        }

        override fun getItemCount(): Int = resources.getStringArray(R.array.count).size

    }

    inner class RecyclerItemDecoration(
        private val spacing: Int,
        private val topSpacing: Int,
        private val spanCount: Int
    ) : RecyclerView.ItemDecoration() {

        override fun getItemOffsets(
            outRect: Rect,
            view: View,
            parent: RecyclerView,
            state: RecyclerView.State
        ) {
            super.getItemOffsets(outRect, view, parent, state)

            val index = (view.layoutParams as GridLayoutManager.LayoutParams).spanIndex
            val position = parent.getChildLayoutPosition(view)

            outRect.left = spacing
            outRect.right = spacing

            if (position < spanCount)
                outRect.top = 0
            else
                outRect.top = topSpacing
        }
    }
}

 

300x250
Comments