[Android 앱 개발 심화] 과제 - 이미지 검색 앱 (3) Glide로 이미지 Load하기

🍥구현 기능

• 카카오 이미지 검색 API의 응답으로 받은 이미지 URL을 RecyclerView에 표시하기

🍥구현하기

• 🔗github link

Image.kt

• 카카오 이미지 검색 API의 응답으로 받은 정보들 중, RecyclerView에 표시할 정보만을 담은 data class
• 이미지의 날짜,시간 정보 "yyyy-MM-dd HH:mm:ss" 포멧으로 변경

data class Image(
    var folder: ImageFolder? = null, //이미지 폴더 정보
    val thumbnailUrl: String,
    val source: String,
    val time: String
) {

    companion object {
        fun createFromImageDocument(imageDocument: Document): Image {
            val newImage = Image(
                thumbnailUrl = imageDocument.thumbnail_url,
                source = imageDocument.display_sitename,
                time = LocalDateTime
                    .parse(imageDocument.datetime, DateTimeFormatter.ISO_DATE_TIME)
                    .format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"))
            )
            Log.d("Image", "${newImage.toString()}")
            return newImage
        }
    }
}

ImageAdapter.kt

• RecyclerView의 어댑터로 사용할 클래스

interface OnImageClickListener{
    fun onImageClick(image: Image)
    fun onHeartClick(image: Image)
    fun onHeartLongClick(image: Image)
}

class ImageAdapter(var dataset: MutableList<Image>) :
    RecyclerView.Adapter<ImageAdapter.Holder>() {

    var onImageClickListener:OnImageClickListener? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding =
            RecyclerViewItemImageBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return Holder(binding)
    }

    override fun getItemCount(): Int = dataset.size

    override fun onBindViewHolder(holder: Holder, position: Int) {
        holder.itemView.setOnClickListener {
            onImageClickListener?.onImageClick(dataset[position])
        }
        holder.heartImageView.setOnClickListener {
            onImageClickListener?.onHeartClick(dataset[position])
        }
        holder.heartImageView.setOnLongClickListener {
            onImageClickListener?.onHeartLongClick(dataset[position])
            true
        }

        holder.bind(position)
    }

    private fun Holder.bind(position: Int) {
        with(dataset[position]) {
            Glide.with(binding.root.context)
                .load(this.thumbnailUrl)
                .apply(
                    RequestOptions()
                        .centerCrop()
                        .placeholder(R.drawable.icon_bad_wifi)
                        .error(R.drawable.icon_bad_wifi)
                )
                .into(imageView)
            imageView.clipToOutline = true

            sourceTextView.text = this.source
            timeTextView.text = this.time

            setHeartImageViewColor(this.folder)
        }
    }

    private fun Holder.setHeartImageViewColor(folder: ImageFolder?){
        heartImageView.imageTintList = ColorStateList.valueOf(
            binding.root.resources.getColor(
                folder?.colorId ?: R.color.gray
            )
        )
    }

    fun changeDataset(newDataset: MutableList<Image>) {
        dataset = newDataset
        notifyDataSetChanged()
    }

    inner class Holder(val binding: RecyclerViewItemImageBinding) :
        RecyclerView.ViewHolder(binding.root) {
        val imageView = binding.ivImage
        val sourceTextView = binding.tvImageSource
        val timeTextView = binding.tvImageTime
        val heartImageView = binding.ivHeart
    }
}