인스타그램 클론 (댓글 페이지)

- 댓글 기능 추가

 

[1] res폴더에 있는 layout폴더에 item_comment라는 xml파일을 만듦

 

- 아래와 같이 레이아웃을 만듦

 

item_comment.xml

---

[2] navigation폴더에 CommnetActivity라는 Activity추가

 

- activity_comment.xml 파일로 이동해서 아래와 같이 레이아웃을 만듦

 

activity_comment.xml

 

- SEND 버튼: 메세지를 전송할 버튼

---

[3] CommentActivity로 이동해서 SEND 버튼에 대한 이벤트를 만듦

 

- Oncreate 메소드에 아래와 같은 코드 추가

 

package com.example.hyealsinstargram.navigation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide
import com.bumptech.glide.request.RequestOptions
import com.example.hyealsinstargram.R
import com.example.hyealsinstargram.navigation.model.ContentDTO
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.firestore.FirebaseFirestore
import kotlinx.android.synthetic.main.activity_comment.*
import kotlinx.android.synthetic.main.item_comment.view.*

class CommentActivity : AppCompatActivity() {
    var contentUid: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_comment)
        contentUid = intent.getStringExtra("contentUid")

        comment_recyclerview.adapter = CommentRecyclerViewAdapter()
        comment_recyclerview.layoutManager = LinearLayoutManager(this)

        comment_btn_send?.setOnClickListener {
            var comment = ContentDTO.Comment()
            comment.userId = FirebaseAuth.getInstance().currentUser?.email
            comment.comment = comment_edit_message.text.toString()
            comment.uid = FirebaseAuth.getInstance().currentUser!!.uid
            comment.timestamp = System.currentTimeMillis()


            FirebaseFirestore.getInstance().collection("images").document(contentUid!!)
                .collection("comments").document().set(comment)

            comment_edit_message.setText("")
        }
    }
    }

 

[ 코드 설명 ]

 

- comment라는 변수를 만들어서 댓글을 적은 사람의 정보를 데이터 베이스에 넣어주는 과정

---

 

- 댓글을 쓴 후에 comment_edit_message를 초기화 시킴

---

[4] DetailViewFragment로 이동해서 말풍선 아이콘을 클릭하면 CommentActivity가 띄워지도록 하는 코드를 작성함

 

- onBindViewHolder 메소드에 아래와 같은 코드 추가

 

viewholder.detailviewitem_comment_imageview.setOnClickListener { v ->
                var intent = Intent(v.context, CommentActivity::class.java)
                intent.putExtra("contentUid",contentUidList[position])
                startActivity(intent)

 

- contentUidList[position]: 내가 선택한 이미지의 uid값이 담김

---

[5] CommentActivity에 입력된 댓글을 출력하는 RecyclerView를 만듦

 

- 아래와 같은 코드를 추가함

 

inner class CommentRecyclerViewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
        var comments: ArrayList<ContentDTO.Comment> = arrayListOf()

        init {
            FirebaseFirestore.getInstance().collection("images").document(contentUid!!).collection("comments").orderBy("timestamp")
                .addSnapshotListener { querySnapshot, firebaseFirestoreException ->
                    comments.clear()

                    if (querySnapshot == null)
                        return@addSnapshotListener

                    for (snapshot in querySnapshot.documents!!) {
                        comments.add(snapshot.toObject(ContentDTO.Comment::class.java)!!)
                    }

                    notifyDataSetChanged()

                }
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
           var view = LayoutInflater.from(parent.context).inflate(R.layout.item_comment, parent,false)
            return CustomViewHolder(view)
        }

        private inner class CustomViewHolder(view: View): RecyclerView.ViewHolder(view)

        override fun getItemCount(): Int {
            return comments.size
        }

        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
            var view = holder.itemView
            view.commentviewitem_textview_comment.text = comments[position].comment
            view.commentviewitem_textview_profile.text = comments[position].userId

            FirebaseFirestore.getInstance().collection("profileImages").document(comments[position].uid!!).get().addOnCompleteListener { task ->

                if(task.isSuccessful){
                    var url = task.result!!["image"]
                    Glide.with(holder.itemView.context).load(url).apply(RequestOptions().circleCrop()).into(view.commentviewitem_imageview_profile)
                }
            }
        }
    }

 

[ 코드 설명 ]

 

 

- 댓글을 담을 arraylist

---

 

- Firebase 데이터를 시간순으로 읽어오는 부분

 

- 값이 중복으로 쌓일 수 있기 때문에 comments.clear()를 해줌

 

- 코드 안정성을 위해서 querySnapshot이 널일 때 리턴해줌

 

- for문을 통해서 스냅샷을 하나씩 읽어옴. → commets안에 이 스냅샷을 ContentDTO.Comment로 캐스팅해서 넣어줌

 

- notifyDataSetChanged(): RecyclerView를 새로고침해줌

---

 

- 서버에서 넘어온 아이디나 메세지, 프로필 이미지를 매핑해줌

 

- comments[position].uid를 하면 댓글을 단 프로필 사진의 주소가 넘어옴

 

- url변수에 이미지 주소를 받아옴

---

 [6] comment_recyclerview와 어댑터를 연결시켜줌

 

- Oncreate 메소드에 아래와 같은 코드 추가

comment_recyclerview.adapter = CommentRecyclerViewAdapter()
comment_recyclerview.layoutManager = LinearLayoutManager(this)

---

[7] 프로젝트를 실행해서 아래에 빨간 동그라미로 표시한 부분을 누르고 댓글을 남기게 되면 아래와 같은 결과를 확인할 수 있음

 

댓글 버튼

 

댓글 달기

 

댓글 단 후 화면

---

Firebase에 images 컬렉션에 comment 컬렉션 추가됨

 

 

comments 컬렉션에 댓글정보가 들어가짐