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

- 자동 로그인 기능, 유저 페이지 추가 기능

 

<자동 로그인 기능>

 

[1] LoginActivity.kt에 아래와 같이 코드를 작성함

 

---

[2] moveMainPage 메소드의 마지막 라인에 finish()메소드 추가

 

 

☞ LoginActivity.kt 가 꺼지면서 MainActivity.kt 가 실행됨

---

 

<유저 페이지 추가 기능>

 

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

 

activity_main.xml

 

- UserFragment를 광범위하게 사용할 수 있게 하기 위해서 Back 버튼을 만듦

---

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

 

package com.example.hyealsinstargram.navigation

import android.content.Intent
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.LoginActivity
import com.example.hyealsinstargram.MainActivity
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.activity_main.*
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
    var currentUserUid: String? = 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()
        currentUserUid = auth?.currentUser?.uid

        if(uid == currentUserUid) {
            // MyPage
            fragmentView!!.account_btn_follow_signout.text = getString(R.string.signout)
            fragmentView?.account_btn_follow_signout?.setOnClickListener {
                activity?.finish()
                startActivity(Intent(activity, LoginActivity::class.java))
                auth?.signOut()
            }
        }else{
            fragmentView!!.account_btn_follow_signout.text = getString(R.string.follow)

            var mainActivity = (activity as MainActivity)
            mainActivity.toolbar_username.text = arguments!!.getString("userId")

            mainActivity.toolbar_btn_back.setOnClickListener {
                mainActivity.bottom_navigation.selectedItemId = R.id.action_home
            }

            mainActivity.toolbar_title_image.visibility = View.GONE
            mainActivity.toolbar_btn_back.visibility = View.VISIBLE
            mainActivity.toolbar_username.visibility = View.VISIBLE
            }

        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는 크게 두 가지 용도로 사용할 수 있음

1. 자신의 계정에 대한 정보를 띄움
2. 다른 사람의 계정에 대한 정보를 띄움

☞ 이 용도를 구분하기 위해서 currentUserUid라는 변수를 만듦

 

[ 코드 설명 ]

 

 

- uid == currentUserUid: 자신의 유저 페이지

☞ 로그아웃 버튼을 활성화 해주고, 로그아웃 버튼을 누르면 엑티비티를 종료한 후 로그인 화면으로 돌아가게 함. 그리고 firebase에 auth값을 signout해줌

 

- else: 다른 사람의 유저 페이지

☞ 누구의 유저 페이지인지 보여주는 text와 back버튼을 활성화 시켜줌

---

[3] DetailViewFragment.kt로 이동해서 상대방의 프로필 이미지를 누르면 해당 유저 페이지로 넘어가는 기능을 추가함

 

 onBindViewHolder 메소드에 아래와 같은 코드 작성

// This code is when the profile image is clicked
            viewholder.detailviewitem_profile_image.setOnClickListener {

                val fragment = UserFragment()
                val bundle = Bundle()

                bundle.putString("destinationUid", contentDTOs[position].uid)
                bundle.putString("userId", contentDTOs[position].userId)

                fragment.arguments = bundle
                activity!!.supportFragmentManager.beginTransaction()
                    .replace(R.id.main_content, fragment)
                    .commit()
            }

 

[ 코드 설명 ]

 

 

- 선택된 Uid 값

---

 

- 선택된 이메일 값

---

[4] MainActivity.kt로 이동해서 툴바에 있는 userId와 back버튼을 기본적으로 숨겨진 상태가 되도록 만듦

 

- 아래와 같은 메소드를 만듦

fun setToolbarDefault(){
        toolbar_username.visibility = View.GONE
        toolbar_btn_back.visibility = View.GONE
        toolbar_title_image.visibility = View.VISIBLE
    }

 

- 이 메소드가 onNavigationItemSelected메소드에서 작동하도록 세팅해줌

 

---

[5] 프로젝트를 실행시킴

 

1. 자신의 유저 페이지

 

 

---

2. 상세 페이지에서 프로필 이미지를 누른 다른 사람의 유저 페이지