인스타그램 클론 (사용자 페이지 1)

- 사용자 페이지 화면 추가 (사용자 페이지를 관리하기 위함)

 

[1] fragment_user.xml에 레이아웃을 아래와 같이 만듦

 

사용자 페이지 레이아웃

---

[2] UserFragment.kt 로 이동해서 아래와 같이 코드를 작성함

 

package com.example.hyealsinstargram.navigation

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.appcompat.widget.LinearLayoutCompat
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.GridLayoutManager
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.fragment_user.view.*

class UserFragment :Fragment(){
    var fragmentView: View? = null
    var firestore: FirebaseFirestore? = null
    var uid: String? = null
    var auth: FirebaseAuth? = null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        fragmentView = LayoutInflater.from(activity).inflate(R.layout.fragment_user,container,false)
        uid = arguments?.getString("destinationUid")
        firestore = FirebaseFirestore.getInstance()
        auth = FirebaseAuth.getInstance()

        fragmentView?.account_recyclerview?.adapter = UserFragmentRecyclerViewAdapter()
        fragmentView?.account_recyclerview?.layoutManager = GridLayoutManager(activity!!, 3 )
        return fragmentView
    }

    inner class UserFragmentRecyclerViewAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

        val contentDTOs: ArrayList<ContentDTO> = arrayListOf()

        init {

            firestore?.collection("images")?.whereEqualTo("uid", uid)?.addSnapshotListener { querySnapshot, firebaseFirestoreException ->
                    contentDTOs.clear()

                    // Sometimes, This code return null of querySnapshot when it signout
                    if (querySnapshot == null)
                        return@addSnapshotListener

                    // Get data
                    for (snapshot in querySnapshot?.documents!!) {
                        contentDTOs.add(snapshot.toObject(ContentDTO::class.java)!!)
                    }

                    fragmentView?.account_tv_post_count?.text = contentDTOs.size.toString()
                    notifyDataSetChanged()

                }

        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
            val width = resources.displayMetrics.widthPixels / 3

            val imageView = ImageView(parent.context)
            imageView.layoutParams = LinearLayoutCompat.LayoutParams(width,width)

            return CustomViewHolder(imageView)
        }

        inner class CustomViewHolder(var imageView: ImageView) : RecyclerView.ViewHolder(imageView)

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

        override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
            var imageView = (holder as CustomViewHolder).imageView
            Glide.with(holder.itemView.context).load(contentDTOs[position].imageUrl).apply(RequestOptions().centerCrop()).into(imageView)
        }
    }

}

 

[ 코드 설명 ] 

 

 

- UserFragment 에서 사용할 글로벌 변수들

---

 

- RecyclerView가 사용할 어댑터

---

 

- ContentDTO들을 담을 배열

---

 

- 생성자를 만들어서 데이터 값들을 가져오는 부분

 

- 쿼리 부분: 사용자가 올린 이미지만 갖고올 수 있도록 쿼리를 만들어줌 (whereEqualTo("uid", uid) 부분)

 

- if 식 부분: 프로그램의 안정성을 위해서 querySnapshot이 null일 경우 바로 종료시키는 부분

 

- for 문: 데이터 값을 받아오는 부분 ( 데이터를 받아와서 contentDTOs에 넣어주는 부분)

 

- notifyDataSetChanged 부분: RecyclerView가 새로고침될 수 있도록 만들어주는 부분

---

 

- 화면의 폭을 가져오는 부분

 

- 폭의 1/3 값을 가져오게 됨

---

 

- 폭의 1/3 크기의 정사각형이 만들어짐

---

 

- oncreatViewHolder 메소드에서 리턴해준 imageView를 RecyclerView.ViewHolder로 넘겨주는 부분

---

 

- 데이터를 매핑해주는 부분에 imageView를 불러옴

 

- holder값을 CustomViewHolder로 캐스팅해줌.  그 후 imageView를 받아옴

 

- Gilde부분: 이미지를 다운로드해오는 부분

---

 

- uid부분: uid값을 세팅해주는 부분, 이전 화면에서 넘어온 값을 받아오는 부분.

 

- 그 아래 부분: firestore와 auth를 초기화해주는 부분

---

 

- account_recyclerview어뎁터에 어뎁터를 달아주는 부분

 

- spanCount: 3 부분: 한 라인에 3개씩 사진이 뜨도록 하는 부분

---

[3] MainActivity.kt로 이동해서 onNavigationItemSelected 메소드에 아래와 같은 코드 작성

 

R.id.action_account ->{
                var userFragment = UserFragment()
                var bundle = Bundle()
                var uid = FirebaseAuth.getInstance().currentUser?.uid

                bundle.putString("destinationUid", uid)
                userFragment.arguments = bundle
                supportFragmentManager.beginTransaction().replace(R.id.main_content, userFragment).commit()
                return true
            }

 

[ 코드 설명 ]

 

 

- uid값을 받아오는 부분

---

 

- UserFragment에 uid를 넘겨주는 부분

 

* Bundle 객체: 안드로이드에서 Activity 간에 데이터를 주고 받을 때 사용하는 클래스. 여러가지 데이터를 전송할 수 있음 (문자열로 된 키와 여러 타입의 값을 저장하는 일종의 Map 클래스임)

---

[4] 프로젝트를 실행한 후 로그인을 해서 우측 맨 아래 버튼을 누르면 아래와 같이 사용자 페이지 화면이 나타남

 

사용자 페이지