인스타그램 클론 (좋아요 버튼)

- 인스타그램의 좋아요 버튼 기능 추가

 

[1] DetailViewFragment.kt에 favoriteEvent라는 메소드 작성

 

fun favoriteEvent(position: Int){
            var tsDoc = firestore?.collection("images")?.document(contentUidList[position])

            firestore?.runTransaction { transaction ->

                var contentDTO = transaction.get(tsDoc!!).toObject(ContentDTO::class.java)

                if(contentDTO!!.favorites.containsKey(uid)){
                    // When the button is clicked
                    contentDTO.favoriteCount = contentDTO?.favoriteCount - 1
                    contentDTO.favorites.remove(uid)
                }else{
                    // When the button is not clicked
                    contentDTO.favoriteCount = contentDTO?.favoriteCount + 1
                    contentDTO.favorites[uid!!] = true
                }
                transaction.set(tsDoc,contentDTO)
            }
        }

 

[ 코드 설명 ]

 

- tsDoc: 유저가 선택한 컨텐츠의 uid를 받아와서 '좋아요'해주는 이벤트를 넣을 변수

( contentUidList[position] ☞ 내가 선택한 컨텐츠의 uid 값을 넣어주는 코드)

---

- 데이터를 입력하기 전에 트랜젝션을 불러와야 함

 

* 트랜젝션: 데이터베이스의 상태(추가, 삭제, 변경)를 변화시키기 해서 수행하는 작업

---

- 트랜젝션을 해주기 위해서 uid값을 받아오는 부분

 

+ 이후 uid를 전역변수로 선언하기 때문에 이 코드는 onCreateView 메소드에 추가

 

---

 

- 트랜젝션 데이터를 contentDTO로 캐스팅해주는 부분

---

 

- 좋아요 버튼이 이미 클릭되어있는 경우와 클릭되어있지 않은 경우로 나눠서 코드 작성

---

- 이 트랜젝션을 다시 서버로 돌려주는 코드

---

[2] 좋아요 버튼에 이벤트 만들기

 

- DetailViewFragment.kt에 있는 onBindViewHolder메소드 안에 아래와 같이 코드 작성

 

 // This code is when the button is clicked
            viewholder.detailviewitem_favorite_imageview.setOnClickListener {
                favoriteEvent(position)
            }
            // This code is when the page is loaded
            if(contentDTOs!![position].favorites.containsKey(uid)){
                // This is like status
                viewholder.detailviewitem_favorite_imageview.setImageResource(R.drawable.ic_favorite)
            }else{
                // This is unlike status
                viewholder.detailviewitem_favorite_imageview.setImageResource(R.drawable.ic_favorite_border)
            }

[ 코드 설명 ]

 

- 좋아요 클릭 이벤트 처리 부분

 

---

- 좋아요 카운트와 하트의 상태를 바꿔주는 부분

---

[3] 프로젝트 실행 후 로그인을 하고 사진에 좋아요를 누르면

좋아요 누르기 전

좋아요 누른 후

---

아래와 같이 firebase에 있는 데이터베이스의 상태로 변함

 

좋아요 누르기 전 ( favoriteCount = 0 )

 

좋아요 누른 후 ( favoriteCount = 1, uid 값 = true )