[kotlin]Recyclerview Adpater부분에서 Glide를 통해 이미지 표시하는법

Fragment에 있는 리사이클러뷰에 이미지를 넣고싶었는데 잘 안되서 좀 해멨었기 때문에 기록해보려한다

 

 

 

일단 이미지를 불러오기위해 Glide를 사용할것이기 때문에 아래와 같이 gradle에 라이브러리를 추가해준다

implementation ("com.github.bumptech.glide:glide:4.12.0") // 이미지로딩 라이브러리

gradle(app)

 

 

먼저 Fragment에 있는 리사이클러뷰에 텍스트나 이미지를 넣는 작업은 Adapter쪽에서 해줘야한다

 

Adapter의 viewHolder부분에서 findViewId를 통해 이미지를 넣을부분을 초기화해준다

그다음 Glide를 사용해서 이미지를 보이게 적용해주는데, Fragment와 연결을 해줄것이기때문에 context를 사용해서 

Glide.with(context)라고 써줘야한다

그런데 그냥 context를 써주면 오류가 뜨기 때문에 

Fragment로 가서 어뎁터와 리사이클러뷰를 연결하는 부분에 requireContext()를 추가해준다

// 어뎁터와 리사이클러뷰 연결
recipeRVAdapter = RecipeRVAdapter(requireContext(), recipeboardList as ArrayList<RecipeBoardModel>)
binding.rv2.adapter = recipeRVAdapter

RecipebookFragment.kt

 

 

이렇게 추가해준뒤 어뎁터에서 Glide에 context를 적용하면 잘 적용되는것을 볼수있다

그리고 load에는 불러올 이미지 url을 넣어준다. 나는 데이터모델에 있는 imageUrl을 가져왔다

into에는 이미지를 넣을 뷰를 지정해준다 

    // 내가 작성한 데이터 넣어주기(연결)
    inner class ViewHolder(itemView1 : View) : RecyclerView.ViewHolder(itemView1){

        private lateinit var binding: RecipebookListItemBinding

        fun bindItems1(item : RecipeBoardModel) : View {


            // 내가 작성한 레시피이름이 recipename1에 적용되게
            val name = itemView.findViewById<TextView>(R.id.recipename2)
            name.text = item.recipename   // 데이터모델과 연결

			
            val iamgeView = itemView.findViewById<ImageView>(R.id.foodImage1)

			// 내가 넣어준 이미지가 foodImage1에 적용되게
            // 이미지 보이게 적용
            Glide.with(context)
                .load(item.imageUrl)		// 이미지 url
                .into(iamgeView)			// 이미지를 넣을 뷰


            return itemView

        }

RecipeRVAdapter.kt

 

 

 

 

#  Adapter에서 context를 쓰기위해서는 Fragment에서도 어뎁터와 리사이클러뷰 연결하는 부분에 requireContext()를 써줘야한다!!