[안드로이드/인스타그램클론] # 9 사용자 페이지 만들기 1️⃣

이번에는 사용자 페이지를 만들어 볼 것이다. 사용자 페이지는

이렇게 생긴 부분이고 이제 만들어 보도록 하자

---

[ res / menu / bottom_navigation_main.xml ] 에 들어가서 각각의 title을 고쳐준다

 

고쳐주고 나면 menu의 item들이 이렇게 나옴

 

[ fragment_user.xml ] 을 아래와 같이 만들어준다.

[ CODE ] 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
        <ImageView
            android:id="@+id/account_iv_profile"
            android:layout_alignParentLeft="true"
            android:src="@drawable/ic_account"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <Button
            android:id="@+id/account_btn_follow_signout"
            android:text="@string/follow"
            android:layout_toRightOf="@id/account_iv_profile"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="40dp"/>
        <LinearLayout
            android:gravity="center"
            android:layout_toRightOf="@id/account_iv_profile"
            android:layout_above="@id/account_btn_follow_signout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content">
                <TextView
                    android:text="@string/post"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:id="@+id/account_tv_post_count"
                    android:text="@string/count_0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
            <LinearLayout
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content">
                <TextView
                    android:text="@string/follower"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:id="@+id/account_tv_follower_count"
                    android:text="@string/count_0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
            <LinearLayout
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content">
                <TextView
                    android:text="@string/following"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:id="@+id/account_tv_following_count"
                    android:text="@string/count_0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </LinearLayout>

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

---

[ UserFragment.kt ]

 - 사용할 변수들을 불러온다

 

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

        init {
            firestore?.collection("images")?.whereEqualTo("uid",uid)?.addSnapshotListener { querySnapshot, firebaseFirestore ->
                //Some times, 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()
            }
        }

🌿 detail에서도 사용했던 Recycleview를 위한 부분

 

[ init 부분 설명 ] 

🌿  whereEqualTo("uid",uid)부분은 사용자가 올린 이미지만 가지고 올 수 있게 쿼리를 만들어줌

🌿 if 문 : querySnapshot이 null이면 종료시킬수 있게 해줌

🌿 그렇지 않으면 for문에서 데이터를 받아와서 contentDTO에 넣어주고 

🌿 [ fragmentView?.account_tv_post_count?.text = contentDTOs.size.toString() ] - POST 개수를 넣어주고

🌿 notifyDataSetChanged()로 새로고침

 

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

            var imageview = ImageView(parent.context)
            imageview.layoutParams = LinearLayoutCompat.LayoutParams(width,width)
            return CustomViewHolder(imageview)
        }

🌿 width를 화면의 1/3만 가져와서 정사각형을 만든 후 return

마지막 CustomViewHolder가 빨간 밑줄이 생기지 않도록 class를 만들어주고 

inner class CustomViewHolder(var imageview: ImageView) : RecyclerView.ViewHolder(imageview) {

        }

이렇게 만들어 준다

 

[ 데이터를 매핑하는 부분 ]

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)
        }

🌿 Imageview를 불러오고 Glide로 이미지를 다운로드 시켜준다

 

OnCreate로 올라가서 

uid = arguments?.getString("destinationUid")
firestore = FirebaseFirestore.getInstance()
auth = FirebaseAuth.getInstance()

🌿 uid값을 이전 화면에서 넘어온 값으로 세팅해주고 나머지 변수들을 초기화해준다

 

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

🌿 adapter를 달아주고 한줄에 3개씩 뜰 수 있도록 3을 넘겨준다. 

 

[ CODE ] 

 

package com.example.mingstagram.navigation

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.LinearLayout
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.mingstagram.R
import com.example.mingstagram.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>(){
        var contentDTOs : ArrayList<ContentDTO> = arrayListOf()

        init {
            firestore?.collection("images")?.whereEqualTo("uid",uid)?.addSnapshotListener { querySnapshot, firebaseFirestore ->
                //Some times, 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 {
            var width = resources.displayMetrics.widthPixels / 3

            var 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)
        }

    }
}

 [ MainActivity.kt ] 

 

 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
            }

🌿 Bundle : 안드로이드에서 액티비티간에 데이터를 주고 받을 때 여러가지 타입의 값을 저장하는 Map 클래스 

 

 

---

동작화면

점점 글을 대충쓰는 것 같은 게 맞다 ㅎ,, 비슷한 코드도 많이 나오기도 하고 인프런 강의에서도 왜 이렇게 쓰는지 막 자세하게 알려주는 게 아니라서 뭐라고 써야할지 모르겠다,,ㅎㅎㅎ,,ㅎ,ㅎㅎ,ㅎ,,ㅎ 아무튼 이제 오늘도 여기서 끝 👩🏻‍💻‼️