[Android, Kotlin] firebase sns 앱 만들기 5(게시글 세부 기능)

이번에는 게시물의 세부 기능들을 만들어보겠다.

---

게시글 리스트 recycler view item

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/post_user"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="28dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/post_img"
        app:layout_constraintBottom_toTopOf="@+id/post_main_img"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/post_user_text"
        android:layout_width="230dp"
        android:layout_height="wrap_content"
        android:fontFamily="@font/cafe24ssurround"
        android:text="username"
        android:textSize="17sp"
        android:maxLines="1"
        android:ellipsize="end"
        android:layout_marginStart="20dp"
        app:layout_constraintBottom_toBottomOf="@+id/post_user"
        app:layout_constraintStart_toEndOf="@+id/post_user"
        app:layout_constraintTop_toTopOf="@+id/post_user" />

    <TextView
        android:id="@+id/post_timestamp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/cafe24ssurround"
        android:text="time"
        android:textSize="10sp"
        android:layout_marginEnd="30dp"
        app:layout_constraintBottom_toBottomOf="@+id/post_user_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/post_user_text" />

    <androidx.cardview.widget.CardView
        android:id="@+id/post_main_img"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:layout_marginTop="65dp"
        app:cardCornerRadius="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/post_main_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/post_img" />

    </androidx.cardview.widget.CardView>

    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#9A9A9A"
        android:layout_marginTop="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/post_main_img" />

    <ImageView
        android:id="@+id/like"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/hanger_unselected"
        app:layout_constraintStart_toStartOf="@+id/post_main_img"
        app:layout_constraintTop_toBottomOf="@+id/line" />

    <ImageView
        android:id="@+id/star"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginStart="12dp"
        android:src="@drawable/star_unselected"
        app:layout_constraintBottom_toBottomOf="@+id/like"
        app:layout_constraintStart_toEndOf="@+id/like"
        app:layout_constraintTop_toTopOf="@+id/like"
        app:layout_constraintVertical_bias="1.0" />

    <ImageView
        android:id="@+id/comment"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginStart="15dp"
        android:src="@drawable/comment_unselected"
        app:layout_constraintBottom_toBottomOf="@+id/star"
        app:layout_constraintStart_toEndOf="@+id/star"
        app:layout_constraintTop_toTopOf="@+id/star" />

    <ImageView
        android:id="@+id/bookmark"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/tag_unselected"
        app:layout_constraintEnd_toEndOf="@+id/post_main_img"
        app:layout_constraintTop_toTopOf="@+id/comment" />

    <TextView
        android:id="@+id/like_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/cafe24ssurround"
        android:text="0"
        app:layout_constraintEnd_toEndOf="@+id/like"
        app:layout_constraintStart_toStartOf="@+id/like"
        app:layout_constraintTop_toBottomOf="@+id/like" />

    <TextView
        android:id="@+id/post_str"
        android:layout_width="350dp"
        android:layout_height="100dp"
        android:text="설명"
        android:fontFamily="@font/cafe24ssurround"
        android:textSize="20dp"
        android:textColor="@color/black"
        android:layout_marginTop="70dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/line" />

    <TextView
        android:id="@+id/hasi1_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:fontFamily="@font/cafe24ssurround"
        android:text="#셔츠"
        android:textSize="15dp"
        app:layout_constraintStart_toStartOf="@+id/post_str"
        app:layout_constraintTop_toBottomOf="@+id/post_str" />

    <TextView
        android:id="@+id/hasi2_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:fontFamily="@font/cafe24ssurround"
        android:text="#맨투맨"
        android:layout_marginStart="15dp"
        android:textSize="15dp"
        app:layout_constraintStart_toEndOf="@+id/hasi1_text"
        app:layout_constraintTop_toBottomOf="@+id/post_str" />

    <TextView
        android:id="@+id/hasi3_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:fontFamily="@font/cafe24ssurround"
        android:text="#꾸안꾸"
        android:layout_marginStart="15dp"
        android:textSize="15dp"
        app:layout_constraintStart_toEndOf="@+id/hasi2_text"
        app:layout_constraintTop_toBottomOf="@+id/post_str" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="25dp"
        android:background="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/hasi1_text" />

</androidx.constraintlayout.widget.ConstraintLayout>

게시글 리스트 recycler view 아이템

이번에는 옷걸이(좋아요 카운트), 북마크 기능만 구현해 보겠다.

 

원래 있던 recyclerView Adapter 코드에서

. . .
override fun onBindViewHolder(holder: MainPageFragmentRecyclerAdapter.CustomViewHolder, position: Int) {
	. . .
		// like 버튼 이벤트
        holder.like.setOnClickListener {
            favoriteEvent(position)
        }

        holder.bookMark.setOnClickListener {
            bookMarkEvent(position)
        }

        // like count, like image 이벤트
        // like를 클릭한 경우
        if (postDto[position].favorite.containsKey(uid)) {
            holder.like.setImageResource(R.drawable.hanger_selected)
        } else {    // like를 클릭하지 않은 경우
            holder.like.setImageResource(R.drawable.hanger_unselected)
        }

        if (postDto[position].bookmark.containsKey(uid)) {
            holder.bookMark.setImageResource(R.drawable.tag_selected)
        } else {
            holder.bookMark.setImageResource(R.drawable.tag_unselected)
        }
	. . .
}

viewHolder 부분에 클릭 이벤트를 설정해 준다.

클릭하면 이미지가 바뀔 수 있게 해 줬다.

 

좋아요 카운트 세기

private fun favoriteEvent(position: Int) {
    val tsDoc = fireStore.collection("posts").document(postUidList[position])
    fireStore.runTransaction { transition ->
        val postDto = transition.get(tsDoc).toObject(PostDto::class.java)

        // 좋아요가 눌린 경우
        if (postDto!!.favorite.containsKey(uid)) {
            postDto.favoriteCount -= 1
            postDto.favorite.remove(uid)
        } else {    // 눌리지 않은 경우
            postDto.favoriteCount += 1
            postDto.favorite[uid!!] = true
        }

        transition.set(tsDoc, postDto)
    }
}

fireStore에서 posts의 해당되는 post에 접근해

누가 좋아요를 눌렀는지 해당 유저의 uid를 불러와서 true로 지정해 주었고,

좋아요 카운트를 증가시켰다.

 

북마크 데이터베이스에 저장하기

private fun bookMarkEvent(position: Int) {
    val tsDoc = fireStore.collection("posts").document(postUidList[position])
    fireStore.runTransaction {
        val post = it.get(tsDoc).toObject(PostDto::class.java)

        if (post!!.bookmark.containsKey(uid)) {
            post.bookmark.remove(uid)
        } else {
            post.bookmark[uid!!] = true
        }

        it.set(tsDoc, post)
    }
}

fireStore에서 posts의 해당되는 post에 접근해

누가 북마크를 눌렀는지 true로 나타나게 했다.

---

결과

좋아요를 누른 화면

좋아요 이미지가 잘 변경되었고, 좋아요 카운트와 좋아요를 누른 유저의 uid가 정상적으로 들어왔다.

 

북마크

북마크 이미지 색 변경도 잘 되었고, 누른 유저의 정보도 잘 들어왔다.

---

다음 포스팅에는 북마크 리스트를 만들어 보겠다.