인스타 클론코딩(5)

RecyclerView

리사이클러뷰를 이용하여 피드를 띄워보자. 
home fragment를 다음과 같이 변경하자.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/detailViewItem_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</LinearLayout>

리사이클러뷰에 띄워질 아이템들을 만들자.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <ImageView
            android:id="@+id/detailViewItem_profile_image"
            android:src="@mipmap/ic_launcher"
            android:layout_margin="7.5dp"
            android:layout_width="35dp"
            android:layout_height="35dp"/>
        <TextView
            android:id="@+id/detailViewItem_profile_textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User name"/>
    </LinearLayout>
    <ImageView
        android:id="@+id/detailViewItem_imageView_content"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="5dp">
        <ImageView
            android:id="@+id/detailViewItem_favorite_imageView"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/ic_favorite_border"
            />
        <ImageView
            android:id="@+id/detailViewItem_comment_imageView"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/ic_chat_black"
            />
    </LinearLayout>
    <TextView
        android:id="@+id/detailViewItem_favoriteCounter_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="like 0"/>
    <TextView
        android:id="@+id/detailViewItem_explain_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp"

        android:text="Explain content"/>

</LinearLayout>

이와 같은 아이템들이 하나씩 띄워진다고 생각하면 된다.

home fragment에서 리사이클러뷰에 어댑터와 매니저를 등록한다.
이때 어댑터를 custom 해서 등록하자.

 inner class DetailViewRecyclerViewAdapter: RecyclerView.Adapter<RecyclerView.ViewHolder>(){
        var contentDTOs: ArrayList<ContentDTO> = arrayListOf()
        var contentUidList: ArrayList<String> = arrayListOf()

        init {
            firestore?.collection("images")?.orderBy("timestamp")?.addSnapshotListener { querySnapshot, firebaseFirestoreException ->
                contentDTOs.clear()
                contentUidList.clear()
                for(snapshot in querySnapshot!!.documents){
                    var item = snapshot.toObject(ContentDTO::class.java)
                    contentDTOs.add(item!!)
                    contentUidList.add(snapshot.id)
                }
                notifyDataSetChanged()
            }
        }
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
            var view = LayoutInflater.from(parent.context).inflate(R.layout.item_detail, parent, false)
            return CustomViewHolder(view)
        }

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

        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
            var viewHolder = (holder as CustomViewHolder).itemView
            var detailViewItem_profile_textView = viewHolder.findViewById<TextView>(R.id.detailViewItem_profile_textView)
            var detailViewItem_profile_image = viewHolder.findViewById<ImageView>(R.id.detailViewItem_profile_image)
            var detailViewItem_imageView_content = viewHolder.findViewById<ImageView>(R.id.detailViewItem_imageView_content)
            var detailViewItem_explain_textView = viewHolder.findViewById<TextView>(R.id.detailViewItem_explain_textView)
            var detailViewItem_favoriteCounter_textView = viewHolder.findViewById<TextView>(R.id.detailViewItem_favoriteCounter_textView)
            var detailViewItem_favorite_imageView = viewHolder.findViewById<ImageView>(R.id.detailViewItem_favorite_imageView)

            //favorite button click event
            detailViewItem_favorite_imageView.setOnClickListener {
                favoriteEvent(position)
            }
            if(contentDTOs!![position].favorite.containsKey(uid)){
                //like status
                detailViewItem_favorite_imageView.setImageResource(R.drawable.ic_favorite)
            }else{
                //not yet like
                detailViewItem_favorite_imageView.setImageResource(R.drawable.ic_favorite_border)
            }

            //UserId
            detailViewItem_profile_textView.text = contentDTOs!![position].userId

            //Image
            Glide.with(holder.itemView.context).load(contentDTOs!![position].imageUrl).into(detailViewItem_imageView_content)

            //Explain
            detailViewItem_explain_textView.text = contentDTOs!![position].explain

            //likes
            detailViewItem_favoriteCounter_textView.text = "Likes "+ contentDTOs!![position].favoriteCount

            //ProfileImage
            Glide.with(holder.itemView.context).load(contentDTOs!![position].imageUrl).into(detailViewItem_profile_image)
        }

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

        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!!.favorite.containsKey(uid)){
                    //clicked
                    contentDTO?.favoriteCount = contentDTO.favoriteCount - 1
                    contentDTO?.favorite.remove(uid)
                }else{
                    //unclicked
                    contentDTO?.favoriteCount = contentDTO.favoriteCount + 1
                    contentDTO?.favorite[uid!!] = true
                }
                transaction.set(tsDoc, contentDTO)
            }
        }
    }

inner class로 RecyclerView.Adapter를 상속받아 정의한다.
CustomViewHolder를 새로 만든 이유는 메모리 관리에 있어 안드로이드에서 권장하는 방법이기 때문이다.

onBindViewHolder에서 각각의 item에 띄워질 정보들을 할당한다.
favoriteEvent에서는 좋아요 버튼이 눌렸을 때 처리하는 transaction을 만들어 set 한다.