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

일일 회고

 

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

 

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

 

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

 

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

 

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

---

오늘의 키워드

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

---

1. 알고리즘

[programmers] [Kotlin] 행렬의 곱

2. 숙련 과제 수정 및 마무리

2.1. RecyclerView 아이템 디자인 구조 변경

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

 

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

 

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

2.2. RecyclerView 구분선 생성 방식 변경

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

 

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

 

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

 

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

 

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

 

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

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

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

 

 

사용법

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

      

      

      

    
    

      <kotlin />
    
val decoration = DividerItemDecoration(this@MainActivity, RecyclerView.VERTICAL)
recyclerView.addItemDecoration(decoration)

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

 

2. 커스텀 구분선 만들기

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

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

ex)

      

      

      

    
    

      <kotlin />
    
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