TextView 더보기 기능 구현해보기

✨ 오늘 공부한 것

- 알고리즘 가장 큰 수 풀이
- 팀 프로젝트 선택 기능 구현

개요

SNS 앱이라면 절대 빼먹을 수 있는 기능이 있다. 바로 말줄임표를 통해 내용이 더 있다는 것을 나타내주는 더보기 기능이다! 안드로이드에서는 xml 속성으로 말줄임 기능까지는 엄청 쉽게 구현할 수 있었다.

말줄임표

다음 2가지 속성만 지정해주면 지정한 너비안에 텍스트가 모두 들어가지 않을 때 자동으로 말줄임표로 표시된다.

<TextView
    android:maxLines="2"
    android:ellipsize="end" />

• maxLines: 텍스트가 길어질 때 최대 몇 줄까지 줄바꿈해서 보여줄 지 설정한다.
• ellipsize: 말줄임표의 위치를 설정한다.
  • ex. ...어쩌구, 어쩌...구, 어쩌구...

더보기 기능

더보기는 어떤 버튼을 눌렀을 때 말줄임 된 텍스트뷰의 maxLines 값을 변경하는 식으로 구현할 수 있다.

• getEllipsisCount(line: Int)
  • 해당 라인이 생략될 길이는 반환한다.
• maxLines
  • xml에서 설정해준 maxLines 값
• lineCount
  • 텍스트가 차지하는 줄

그런데 주의할 점이 있다. 텍스트뷰가 그려지기 전에는 텍스트가 몇 줄을 차지하고, 몇 줄이 생략될 지 알 수 없다. 그래서 post()를 사용해서 내부의 코드의 실행을 텍스트뷰가 다 그려질 때까지 지연시켜줘야 한다.

✨ post()

• 현재 진행 중인 모든 레이아웃 계산, 측정, 그리기 작업이 완료된 후에 전달한 Runnable 객체가 실행된다.
• 뷰가 완전히 그려진 상태에서 코드를 실행할 수 있게 해준다.

private fun setMoreBtn(view: TextView, btn: TextView, desc: String, maxLine: Int = 3) {
    view.apply {
        text = desc
        post {
            if (layout.lineCount > maxLine - 1 && layout.getEllipsisCount(lineCount - 1) > 0) {
                btn.visibility = View.VISIBLE
                btn.setOnClickListener {
                    btn.text =
                        if (maxLines == maxLine) getString(R.string.detail_fold) else getString(
                            R.string.detail_more
                        )
                    maxLines = if (maxLines == maxLine) Int.MAX_VALUE else maxLine
                }
            } else btn.visibility = View.GONE
        }
    }
}

마치며

post의 존재를 몰랐을 때 냅다 getEllipsisCount를 사용했었는데, 계속 NPE가 발생해서.. 안드로이드 스튜디오를 죽일 뻔 했다. 그렇지만 오늘도 갓팀원분의 도움으로 잘 설명되어진 글을 보게 되었고, 안드로이드 스튜디오의 생명도 살릴 수 있었다. 최고..