인스타그램 클론 (상세화면 페이지)

- 상세 화면 페이지가 보이는 기능 추가

 

[1] 이미지를 다운로드 받을 수 있는 이미지로더 라이브러리를 추가함

 

- Open Module Settings에서 com.github.bumptech.glide 라이브러리를 추가해줌

---

[2] 상세 페이지에서 사용할 수 있는 아이템 디자인을 만듦

 

- item_detail 이라는 레이아웃 xml 파일을 만듦

 

- xml 파일을 아래와 같이 만들어줌

 

item_detail.xml

---

[3] fragment_detail.xml 파일에 아래와 같은 코드를 추가함 (RecyclerView 추가)

 

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/detailviewfragment_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>

 

* RecyclerView: 어댑터의 ViewHolder를 이용해서 RecyclerView내의 뷰를 재활용하는 것

---

[4] DetailViewFragement.kt 파일로 이동해서 DetailViewRecyclerView를 만들어줌

 

- DetailViewRecyclerView를 만드는 코드를 추가한 현재까지의 DetailViewFragment.kt 코드

 

package com.example.hyealsinstargram.navigation

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide
import com.example.hyealsinstargram.R
import com.example.hyealsinstargram.navigation.model.ContentDTO
import com.google.firebase.firestore.FirebaseFirestore
import kotlinx.android.synthetic.main.fragment_detail.view.*
import kotlinx.android.synthetic.main.item_detail.view.*

class DetailViewFragment :Fragment(){
    var firestore: FirebaseFirestore? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        var view = LayoutInflater.from(activity).inflate(R.layout.fragment_detail,container,false)
        firestore = FirebaseFirestore.getInstance()

        view.detailviewfragment_recyclerview.adapter = DetailViewRecyclerViewAdapter()
        view.detailviewfragment_recyclerview.layoutManager = LinearLayoutManager(activity)
        return view
    }
    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 getItemCount(): Int {
           return contentDTOs.size
        }

        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
           var viewholder = (holder as CustomViewHolder).itemView

            // User Id
            viewholder.detailviewitem_profile_textview.text = contentDTOs!![position].userId

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

            // Explain
            viewholder.detailviewitem_explain_textview.text = contentDTOs!![position].explain

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

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

    }
}

 

[ 코드 설명 ]

 

- firestore: 데이터베이스에 바로 접근할 수 있는 변수

---

- firestore 변수 초기화 부분 ( OncreateView에서 초기화)

---

- DB에 접근해서 데이터를 받아올 수 있게 하는 쿼리 ( orderBy("timestamp")를 이용해서 시간순으로 받아오도록 함)

 

- notifyDataSetChanged(): 값이 새로고침 되도록 하는 부분

---

- RecyclerView를 사용할 때 메모리를 적게 사용하기 위해서 CustomViewHolder 클래스를 만듦

---

- RecyclerView 개수를 넘겨주는 부분

---

- 서버에서 넘어온 데이터들을 매핑시켜주는 부분

---

[5] MainActivity.kt 로 이동해서 Oncreat 메소드에 아래의 코드를 추가함

 

 bottom_navigation.selectedItemId = R.id.action_home

- 메인 화면으로 DetailViewFragment가 보이도록 하는 부분

---

[6] 프로젝트를 실행해서 로그인을 하게 되면 아래와 같은 화면이 뜸

 

상세화면 페이지