23.12.27 게시물 리스트, 더보기 버튼

KSang·2023년 12월 28일
0

TIL

목록 보기
20/101

layoutInflater

LayoutInflater는 Android에서 XML 레이아웃 파일을 실제 View 객체로 변환하는데 사용된다

이 클래스의 인스턴스는 일반적으로 getSystemService(Context.LAYOUT_INFLATER_SERVICE)를 통해 얻게된다

이아웃 파일을 프로그램에서 사용하려면 먼저 LayoutInflater를 사용하여 XML 레이아웃 파일을 View 객체로 변환해야 합니다. 이렇게 함으로써 프로그램은 이 View를 화면에 그리거나, 다른 View의 내부에 추가하는 등의 작업을 수행할 수 있다

이번에 sns앱을 만들면서

게시물을 출력하는데 다수의 게시물을 xml에 일일히 적어서 넣으면

게시물의 양도 고정되어 있고 추가적으로 게시물 추가하려면

레이아웃도 추가하고 함수도 일일히 적어야하니

불편해서 알아 봤는데 레이아웃 인플래터를 사용해

레이아웃안에 view객체로 다른 레이아웃을 반복문을 통해 넣으니

다수의 게시물을 정해진 틀로 생성할 수 있었다.
image

private val inflater: LayoutInflater by lazy {
        LayoutInflater.from(this)
    }
    private fun setPostList() {
        for (post in userData.userPosts.reversed()) {
            val postView: View = inflater.inflate(R.layout.post_item, detailPostLayout, false)

            val ivDetailPostListImg: ImageView = postView.findViewById(R.id.iv_detail_post_list_img)
            val tvDetailPostListContents: TextView =
                postView.findViewById(R.id.tv_detail_post_list_contents)
            val ivDetailPostCommentIcon: ImageView =
                postView.findViewById(R.id.iv_detail_post_comment_icon)
            val tvDetailPostComment: TextView = postView.findViewById(R.id.tv_detail_post_comment)
            val ivDetailPostLikeBtn: ImageView = postView.findViewById(R.id.iv_detail_post_like_btn)
            val tvDetailPostLikeCount: TextView =
                postView.findViewById(R.id.tv_detail_post_like_count)
            val tvDetailPostShowMore: TextView =
                postView.findViewById(R.id.tv_detail_post_show_more)

            tvDetailPostListContents.text = post.postContent

            ivDetailPostListImg.setImageResource(post.postImage)

            ivDetailPostCommentIcon.setImageResource(post.commentIcon)

            tvDetailPostComment.text = post.comment

            detailPostLayout.addView(postView)

            if (post.likeSelectedUser.any { it == myId }) {
                ivDetailPostLikeBtn.setImageResource(img_heart)
            }

            tvDetailPostLikeCount.text = post.like.toString()

            setLikeButton(post, ivDetailPostLikeBtn, tvDetailPostLikeCount)
            setShowMoreVisible(post, tvDetailPostListContents, tvDetailPostShowMore)
        }
    }

inflate() 메서드는 resource, root, attachToRoot 이 세가지 인자를 받는데

레이아웃 인플래터로 inflate해 post_item.xml레이아웃 파일을 인플레이트하고

detailPostLaout(클래스 레이아웃에서 LinearLaout)안에 넣는다

false한 건 attachToRoot를 설정한건데 root에 뷰를 즉시 첨부할지 여부를 결정한다

true일경우 즉시첨부되고

false일경우 인플레이트 된 뷰는 root뷰에 첨부 되지 않는데 이경우 inflate메서드는 인플레이트된 최상위 뷰를 반환한다.

그렇기 때문에 레이아웃을 생성하고 이를 나중에 다른 곳에 추가하려는 경우에 유용하게 쓸수 있다.

maxLine

안드로이스 스튜디오에선 editText등의 텍스트 길이를 조절할 수 있다.

말그대로 몇줄까지 쓸수 있는지를 정해주는건데

사용자가 게시물을 쓸 때 글을 길게 적으면 보통

레이아웃이 깨지거나 editText의 넓이와 길이를 정하게 되면 스크롤이 생기게 된다

이경우 maxLine을 설정해 정해진 길이를 넘기면 아예 안보이게 할 수 있는데

여기서 더보기 버튼과 연동해서 글을 펼치고 닫을수 있게 만들 수 있다.

더보기 버튼 구현

image

    private fun setShowMoreVisible(post: Post, detailContent: TextView, showMore: TextView) {
        detailContent.post {
            if (detailContent.lineCount > detailContent.maxLines) showMore.visibility = View.VISIBLE
            else showMore.visibility = View.INVISIBLE
        }

        setShowMoreButton(post, detailContent, showMore)
    }

이번에 앱을 만들면서 사용한 코드이다

lineCount를 이용해 maxLines과 비교하고 더크면 ..더보기 버튼을 보여주고

그렇지 않으면 숨기게 했다

visibility가 visible이 된다면 버튼을 활성화한다.

    private fun setShowMoreButton(post: Post, detailContent: TextView, showMore: TextView) {
        showMore.setOnClickListener {
            if (detailContent.maxLines == Integer.MAX_VALUE) {
                detailContent.maxLines = 1
                showMore.setText(DetailPageMessage.SHOWMORE.message)
            } else {
                detailContent.maxLines = Integer.MAX_VALUE
                showMore.setText(DetailPageMessage.SHOWCLOSE.message)
            }
        }
    }

버튼을 눌렀을 때 코드인데

더보기 버튼을 누르면 maxLine의 제한이 해제되며 접기로 변하게 했다

0개의 댓글