댓글 바텀시트로 구현하기

오늘은 youtube 댓글화면처럼 처음에 모든 댓글을 보여주지 않고 최근댓글 하나만 보여주고, 클릭시 댓글 바텀시트가 올라와서 모든 댓글을 볼 수 있도록 만들어봤다.

xml 및 본문에서 연결

단순히 바텀시트를 만들어주고 그안에 원하는 내용을 넣어준다. 이내용은
바텀시트 사용법
위 내용에서 다루고있다.

초기 세팅

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/comment_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="30dp"
android:padding="10dp"
android:background="@drawable/shape_rounded_corner_background_r6"
app:layout_constraintStart_toStartOf="@id/tv_comment"
app:layout_constraintTop_toBottomOf="@id/tv_comment"
app:layout_constraintBottom_toBottomOf="parent">

<TextView
    android:id="@+id/comment_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/white"
    android:textSize="12sp"
    android:layout_marginStart="10dp"
    android:text="@string/camp_detail_comment"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>
<TextView
    android:id="@+id/comment_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/white"
    android:textSize="12sp"
    android:text="11"
    android:layout_marginStart="5dp"
    app:layout_constraintStart_toEndOf="@id/comment_title"
    app:layout_constraintTop_toTopOf="@id/comment_title"
    app:layout_constraintBottom_toBottomOf="@id/comment_title"/>
<TextView
    android:id="@+id/comment_content"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginTop="5dp"
    android:textSize="12sp"
    android:textColor="@color/white"
    android:ellipsize="end"
    android:maxLines="2"
    android:text="여기 뭐가뭐가 어째서 저째요 그래서 얘가 이렇게했는데 저렇게해서 뭐라뭐라뭐라무라뭐라 뭐라뭐라뭐라무라뭐라 뭐라뭐라뭐라무라뭐라"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/comment_title"/>

</androidx.constraintlayout.widget.ConstraintLayout>

각각 id를 지정해줘야지 가장 최근 댓글의 내용, 댓글 총 개수를 가져올 수 있다.

사용

commentBottomSheet.setOnClickListener {
     behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
}

먼저 위에서 만든 레이아웃을 클릭시 만들어둔 바텀시트가 화면의 절반까지 올라오게 만들었다.
그리고 화면 첫 진입시

viewModel.checkComment(myId!!)

함수를 불러줬다.

여기서는

private val _checkLastComment: MutableLiveData<String?> = MutableLiveData()
val checkLastComment: LiveData<String?> get() = _checkLastComment
private val _commentCount: MutableLiveData<String?> = MutableLiveData()
val commentCount: LiveData<String?> get() = _commentCount
...
fun checkComment(myId: String) {
    val db = Firebase.firestore
    var baseQuery: Query = db.collection("camps").whereEqualTo("contentId", myId)
    baseQuery.get()
        .addOnSuccessListener { documents ->
            if (documents.isEmpty) {
                _checkLastComment.value = "등록된 댓글이 없습니다. 첫 댓글을 작성해보세요!"
            } else {
                val lastCommentList = documents.documents.lastOrNull()?.get("commentList") as? List<Map<*, *>>
                if (!lastCommentList.isNullOrEmpty()) {
                    val lastComment = lastCommentList.lastOrNull()?.get("content") as? String
                    val commentSize = lastCommentList.size ?: 0
                    _commentCount.value = commentSize.toString()
                    if (lastComment != null) {
                        _checkLastComment.value = lastComment
                    } else {
                        _checkLastComment.value = "등록된 댓글이 없습니다. 첫 댓글을 작성해보세요!"
                    }
                } else {
                    _checkLastComment.value = "등록된 댓글이 없습니다. 첫 댓글을 작성해보세요!"
                }
            }
        }
        .addOnFailureListener { exception ->
        }
}

firestore에서 해당 id의 데이터를 찾아서 저장된 field이름인 commentList의 데이터를 가져왔다. 해당 내용의 크기를 가져와서 옵저빙해주고(총 댓글수) 마지막에 있는 content를 가져와 옵저빙 해주었다.(마지막 댓글 내용)
위 내용들은 본문에서

checkLastComment.observe(this@CampDetailActivity){
    if(it != null){
        binding.commentContent.text = it
    }
}
commentCount.observe(this@CampDetailActivity){
    binding.commentCount.text = it
}

위와같이 옵저빙해서 사용해줬다.
위 방식은 유튜브 댓글 모양을 참고해서 구현했다.