[Clone] 인스타그램 클론 프로젝트(6) - 상세화면 페이지

7강 하울스타그램 상세화면 페이지 만들기

1. Glide 라이브러리 추가

build.gradle(:app)

//glide
    implementation 'com.github.bumptech.glide:glide:4.11.0'

2. RecyclerView Item 생성

사용자의 id, profile 이미지, 업로드 한 이미지, 좋아요 버튼, 댓글 버튼, 좋아요 갯수, 글 내용에 대한 정보들을 담는 item을 생성해준다.

<?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:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/detailviewitem_profile_image"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="7.5dp"
            android:src="@mipmap/ic_launcher" />

        <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:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="fitXY" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/detailviewitem_favorite_imageview"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_marginStart="8dp"
            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:text="like 0" />

    <TextView
        android:id="@+id/detailviewitem_explain_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="8dp"
        android:text="Explain content" />

</LinearLayout>

3. Recyclerview Adapter 생성

RecyclerView Adapter를 생성하고 그 안에 사용자 정보 List인 contentUIDList와 업로드 내용들의 정보가 담긴 contentDTOs를 만들어준다.

처음에 만들어 질 때 아래와 같이 firestore에 올라간 정보들을 얻어서 리스트에 넣어준다.

init {
    firestore?.collection("images")?.orderBy("timestamp")
                ?.addSnapshotListener { querySnapshot, firebaseFirestorException ->
                    contentDTOs.clear()
                    contentUIDList.clear()
                    for (snapshot in querySnapshot!!.documents) {
                        var item = snapshot.toObject(ContentDTO::class.java)
                        contentDTOs.add(item!!)
                        contentUIDList.add(snapshot.id)
                    }
                    notifyDataSetChanged()
                }
    }

이미지의 경우에는 Glide를 사용하여 로드해준다.

Glide.with(holder.itemView.context).load(contentDTOs[position].imageUrl)
                .into(binding.detailviewitemImageviewContent)

DetailViewRecylcerViewAdapter에 대한 코드이다.

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

        init {
            firestore?.collection("images")?.orderBy("timestamp")
                ?.addSnapshotListener { querySnapshot, firebaseFirestorException ->
                    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 {
            binding = ItemDetailBinding.inflate(LayoutInflater.from(parent.context), parent, false)
            return CustomViewHolder(binding)
        }

        inner class CustomViewHolder(binding: ItemDetailBinding) :
            RecyclerView.ViewHolder(binding.root) {

        }

        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
            //user id
            binding.detailviewitemProfileTextview.text = contentDTOs[position].userId

            //image
            Glide.with(holder.itemView.context).load(contentDTOs[position].imageUrl)
                .into(binding.detailviewitemImageviewContent)

            //explain of content
            binding.detailviewitemExplainTextview.text = contentDTOs[position].explain

            //likes
            binding.detailviewitemFavoritecounterTextview.text =
                "Likes  ${contentDTOs[position].favoriteCount}"

            //profile
            Glide.with(holder.itemView.context).load(contentDTOs[position].imageUrl)
                .into(binding.detailviewitemProfileImage)

        }

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

4. RecyclerView setAdpater

DetailViewFragment에서 Recyclerview에 위에서 생성한 Adapter를 set해주고
layoutManager를 지정해준다.

binding.detailviewfragmentRecyclerview.adapter = DetailViewRecyclerViewAdapter()
binding.detailviewfragmentRecyclerview.layoutManager = LinearLayoutManager(activity)