[Android] Glide 글라이드 사용해서 저장한 회원 이미지 불러오기

728x90

🟦 Glide 글라이드 사용해서 Storage에 저장했던 회원들의 이미지를 화면에 불러오기

▶️ 글라이드 사용해서 저장한 회원 이미지 불러오기

  • 1) manifest파일에 INTERNET 권한 추가
<uses-permission android:name="android.permission.INTERNET"/>
  • 2) 모듈 수준의 gradle 파일에 Android Glide 사용 위한 의존 추가
implementation 'com.github.bumptech.glide:glide:4.13.2'
annotationProcessor 'com.github.bumptech.glide:compiler:4.13.2'
  • 3) 모듈 수준의 gradle 파일의 defaultConfig() 안에 다음을 추가
multiDexEnabled true

🟧 CardStackAdapter.kt

  • 이 곳에서 Glide 를 사용하여 ViewHlder 클래스 내부의 binding() 메소드 내부에서 화면 데이터 처리를 위한 내용을 작성한다.
//뷰 홀더 클래스
    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        //사용자 user가 지정한 프로필 이미지를 Storage에서 가져와서 화면에 띄울 용도
        val image = itemView.findViewById<ImageView>(R.id.profileImageArea)

        //우선 화면에 띄워줄 뷰 데이터 가져옴
        var nickname = itemView.findViewById<TextView>(R.id.itemNickname)
        var age = itemView.findViewById<TextView>(R.id.itemAge)
        var city = itemView.findViewById<TextView>(R.id.itemCity)

        //binding으로 화면에 데이터 처리 위함
        fun binding(data: UserDataModel) {
            //파이어베이스의 Realtime DB 데이터셋에서 받아뒀던 데이터 모델의 데이터들을 하나씩 받아서 처리

            val storageRef = Firebase.storage.reference.child(data.uid + ".png")
            storageRef.downloadUrl.addOnCompleteListener(OnCompleteListener { task ->
                if(task.isSuccessful) {
                    Glide.with(context)
                        .load(task.result)
                        .into(image)
                }

            })

🟧 실행 화면

  • 모든 회원의 프로필 이미지가 화면 상에 떠있다.


🟦 회원의 마이페이지 만들기

▶️ 회원의 마이페이지 만들기

  • 1) SettingActivity.kt 에서 마이페이지, 로그아웃 버튼 생성한 뒤, 화면 전환 이벤트 처리.
class SettingActivity : AppCompatActivity() { //설정 액티비티 

    lateinit var binding : ActivitySettingBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivitySettingBinding.inflate(layoutInflater)

        setContentView(binding.root)

        //마이페이지 버튼
        binding.myPageBtn.setOnClickListener {
            val intent = Intent(this, MyPageActivity::class.java)
            startActivity(intent)
        }
        //logout 버튼
        binding.logoutBtn.setOnClickListener {
            var auth = Firebase.auth
            auth.signOut()//로그아웃 처리

            val intent = Intent(this, IntroActivity::class.java)

            startActivity(intent)
        }

    }
}
  • 2) MyPageActivity.kt 에서 마이페이지 회원 페이지에 표시되어야 하는 ‘로그인한 사용자’의 회원 정보를 Storage에서 get 하여 화면에 표시한다.
class MyPageActivity : AppCompatActivity() { // 회원 마이페이지 액티비티

    private val TAG = "MyPageActivity"

    private val uid = FirebaseAuthUtils.getUid()

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_my_page)

        getMyData() // 여기서 호출

    }

    //로그인한 사용자 Data 정보 get
    private fun getMyData(){
        //view에 바인딩시켜서 보여줄 데이터 변수 언언
        val myImage = findViewById<ImageView>(R.id.myImage)
        val myUid = findViewById<TextView>(R.id.myUid)
        val myNickname = findViewById<TextView>(R.id.myNickname)
        val myAge = findViewById<TextView>(R.id.myAge)
        val myCity = findViewById<TextView>(R.id.myCity)
        val myGender = findViewById<TextView>(R.id.myGender)

        val postListener = object : ValueEventListener {
            override fun onDataChange(dataSnapshot: DataSnapshot) {

                //데이터 가져와서
               val data = dataSnapshot.getValue(UserDataModel::class.java)
                //화면 뷰에 회원 정보 출력시키기
                myUid.text = data!!.uid
                myNickname.text = data!!.nickname
                myAge.text = data!!.age
                myCity.text = data!!.city
                myGender.text = data!!.gender

                //이미지 받아오기
                val storageRef = Firebase.storage.reference.child(data.uid + ".png")
                storageRef.downloadUrl.addOnCompleteListener(OnCompleteListener { task ->

                    if(task.isSuccessful) {
                        Glide.with(baseContext)
                            .load(task.result)
                            .into(myImage) //myImage 영역에 담아줄 것이다.
                    }

                })
            }

            override fun onCancelled(databaseError: DatabaseError) {
                // Getting Post failed, log a message
                Log.w(TAG, "loadPost:onCancelled", databaseError.toException())
            }
        }
        FirebaseRef.userInfoRef.child(uid).addValueEventListener(postListener)

    }
}

728x90