내일배움캠프 7기 Android TIL 33일차 (2023.08.30)

일일 회고

 

오늘은 과제 수정을 위주로 진행해보았다.

 

내가 짠 코드를 쭉 돌아보면서 하드코딩되있는 부분이 있는 지, 일전에 수정을 생각해둔 부분이 있었는 지를 확인하였다.

 

그러면서 RecyclerView와 관련된 한 부분을 수정하였다.

 

구분선을 그리는 RecyclerView.ItemDecoration이라는 클래스인데 처음 사용해보았다. 기존에는 직접 구분선을 그려주었지만 코드로 간단하게 넣을 수 있는 방법이 있었다.

 

이제 RecyclerView에 구분선을 그릴 필요가 있을 때는, 이 클래스를 많이 활용할 것 같다.

---

오늘의 키워드

• 알고리즘
• 숙련 과제 수정 및 마무리

---

알고리즘

[programmers] [Kotlin] 행렬의 곱

숙련 과제 수정 및 마무리

RecyclerView 아이템 디자인 구조 변경

기존에 RecyclerView 아이템의 이미지의 사이즈를 비율을 어떻게 다룰까 하다가 일단 특정사이즈(150dp)로 하드코딩했었는데, 비율 다루는 방법을 생각하게 되어 디자인 구조를 변경

 

Constraint Layout의 constraintHorizontal_weight 속성을 통해 아이템의 부모에서 이미지뷰와 텍스트뷰 뭉치를 일정 비율로 나눔 --> 이미지뷰의 크기를 0dp로 한 후, 비율을 정하면 정한대로 뷰의 사이즈가 결정되어 해상도가 바뀌어도 이미지가 고정사이즈로 보이게 되지 않음

 

비율은 과제 예시를 보면 약 1(이미지뷰):2(텍스트뷰 뭉치) 정도로 보여서 1:2 비율로 나누었음

RecyclerView 구분선 생성 방식 변경

기존에는 RecyclerView 아이템에 View라는 컴포넌트로 직접 추가해서 만들었는데,  몇 가지 문제점이 있다는 것을 알게 되었다.

 

1. 성능에 영향을 줌 - 직접 레이아웃에 추가하는 방식이기 때문에 레이아웃 계층이 늘어나게 되고, 아이템이 많아질수록 성능상에 좋지 못한 영향을 줄 수 있음

 

2. 아이템에 스와이프 동작이 있을 때, 구분선이 같이 움직임 - 아이템 레이아웃에 고정되어 있는 형태이기 떄문에 같이 움직이게됨

 

위와 같은 이유들로 이슈가 생길 수 있기 때문에 직접 추가하는 것이 아닌 다른 방식으로 추가하는 것이 필요하였다.

 

여기서 RecyclerView.ItemDecoration을 찾을 수 있었다.

 

공식문서에는 다음과 같이 설명하고 있다.

ItemDecoration을 사용하면 응용 프로그램이 어댑터의 데이터 세트에서 특정 항목 보기에 특수 도면 및 레이아웃 오프셋을 추가할 수 있습니다. 이는 항목 간의 구분선, 하이라이트, 시각적 그룹 경계 등을 그리는 데 유용할 수 있습니다.

항목 간, 즉 아이템 간의 구분선을 코드로 넣는 것이 가능해진다.

 

 

사용법

1. 정의 되어있는 클래스 사용

val decoration = DividerItemDecoration(this@MainActivity, RecyclerView.VERTICAL)
recyclerView.addItemDecoration(decoration)

DividerItemDecoration 클래스를 사용하여 데코레이션 객체를 만들고 리사이클러뷰의 addItemDecoration의 인자로 지정해주면 끝이다.  

 

2. 커스텀 구분선 만들기

RecyclerView.ItemDecoration() 클래스를 상속 받는 클래스를 만들어 onDraw를 오버라이딩하여 커스텀하게 만들 수 있다.

그리는 방법은 다양하므로 원하는 방식으로 onDraw와 getItemsOffest 메서드를 작성하고 addItemDecoration의 인자로 커스텀 클래스를 넣어주면 된다,

ex)

package com.sparta.applemarket.util

import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Rect
import android.view.View
import androidx.recyclerview.widget.RecyclerView
import com.sparta.applemarket.util.FloatUtil.fromDpToPx

class RecyclerViewDecoration : RecyclerView.ItemDecoration() {
    private val margin = 12f.fromDpToPx()
    
    // 그리기
    override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDraw(c, parent, state)
        val paint = Paint().apply {
            color = Color.GRAY
        }
        // 좌우 기본 값
        val left = parent.paddingLeft.toFloat()
        val right = parent.width - parent.paddingRight.toFloat()
        
       
        for (i in 0 until parent.childCount) {
            val child = parent.getChildAt(i)
            val params = child.layoutParams as RecyclerView.LayoutParams
            val top =
                child.bottom.toFloat() + params.bottomMargin + margin
            val bottom = top + 1.5f.fromDpToPx()
            c.drawRect(left + margin, top, right - margin, bottom, paint)
        }
    }

    // 여백 설정
    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)
        // 바텀 마진
        outRect.bottom = margin
    }
}

 

 

 

ref.

RecyclerView.ItemDecoration  |  Android Developers

[Android] RecyclerView에 divider 넣기 - ItemDecoration