중고거래앱만들기(2) - 리사이클러 뷰 ,홈 화면 구성하기

• HomeFragment

HomeFragment : Fragment(R.layout.fragment_home) {
    private lateinit var articleAdapter: ArticleAdapter
    private var binding: FragmentHomeBinding? = null

    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val fragmentHomeBinding = FragmentHomeBinding.bind(view)
        binding = fragmentHomeBinding

• 홈화면에 리사이클러뷰 보여주기
• item_Article 레이아웃 그리기.
• recylcerview사용

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
   <LinearLayout
       android:id="@+id/toolbarLayout"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       android:layout_width="wrap_content"
       android:gravity="center_vertical"
       android:layout_height="?attr/actionBarSize"
       tools:ignore="MissingConstraints">
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="20dp"
           android:text="중고거래"
           android:textColor="@color/black"
           android:textSize="20dp"
           android:textStyle="italic"/>
   </LinearLayout>
    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbarLayout"
        android:background="@color/teal_700"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/articleRecyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbarLayout"
        app:layout_constraintVertical_bias="1.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

• 리사이클러뷰 만들기

// 리사이클러뷰를 통해서 데이터를 하나씩연결해준다
// 레이아웃 매니저와 어댑터를 만들어줘야한다.
fragmentHomeBinding.articleRecyclerView.layoutManager = LinearLayoutManager(context)
fragmentHomeBinding.articleRecyclerView.adapter = articleAdapter

액티비로 구성할때는 LinearLAyoutManager(this)를 사용햇지만, 프래그먼트는 context가 될수없다고한다,

그러기 때문에 getContext()를 사용해서 context를 받아와야한다, 코틀린에서는 이러한 get,set을 생략하여 사용할수있기때문에 context를 통해서 가져온다.

 

• 어댑터  만들기
• ArticleAdapter

package com.example.secondhandtrade.home


import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.Toast
import androidx.recyclerview.widget.DiffUtil
import androidx.recyclerview.widget.ListAdapter
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide

import com.example.secondhandtrade.databinding.ItemArticleBinding
import java.text.SimpleDateFormat
import java.util.Date
import kotlin.coroutines.coroutineContext

//어댑터 준비
class ArticleAdapter : ListAdapter<ArticleModel, ArticleAdapter.ArticleViewHolder>(diffUtil) {
    //뷰홀더 준비
    inner class ArticleViewHolder(private val binding: ItemArticleBinding) :
        RecyclerView.ViewHolder(binding.root) {
        fun bind(articleModel: ArticleModel) {
                val format = SimpleDateFormat("yyyy년 MM월 dd일")
            val date = Date(articleModel.createdAt)

            binding.titleTextView.text = articleModel.title
            binding.priceTextView.text = articleModel.price
            binding.dateTextView.text= format.format(date).toString()

            if (articleModel.imageUri.isNotEmpty())
            Glide.with(binding.thumbnailImageView)
                .load(articleModel.imageUri)
                .into(binding.thumbnailImageView)

        }
    }


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ArticleViewHolder {
        return ArticleViewHolder(
            ItemArticleBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            )
        )
    }

    override fun onBindViewHolder(holder: ArticleViewHolder, position: Int) {
        holder.bind(currentList[position])

    }

    companion object {
        val diffUtil = object : DiffUtil.ItemCallback<ArticleModel>() {
            override fun areItemsTheSame(oldItem: ArticleModel, newItem: ArticleModel): Boolean {
               //현재 보여주고있는 아이템과 새로운 아이템이 같은지 비교.
               return oldItem.createdAt == newItem.createdAt
            }
             
            override fun areContentsTheSame(oldItem: ArticleModel, newItem: ArticleModel): Boolean {
                return oldItem == newItem
            }

        }
    }
}

 다음은 어댑터 정의입니다. 리스트 어댑터를 사용햇으며 diffUti 은 동일한 아이템을비교하기위해 정의합니다

 

bind()에서는 우리가 정의해준 모델 클래스를 받아와서 뷰에 바인딩해줍니다.

각각 제목, 가격,날짜를 대입해주고있으며 날짜의 경우 포멧을사용해서 변환해줍니다. 이미지는 glide라이브러리를

사용해서 불러와주고 아이템 클릭 리스너는 해당 어댑터 생성자에서 람다로 받아처리합니다.

 

 

ㅇ  Glide 이미지 받아와서 사용하기!

implementation 'com.github.bumptech.glide:glide:4.14.2'

• 모델 만들기.
• ArticleModel

package com.example.secondhandtrade.home

import android.icu.text.CaseMap.Title
import android.net.Uri

data class ArticleModel (
   val sellerId: String,
   val title: String,
   val createdAt : Long,
   val price: String,
   val imageUri: String
        )

 

• 더미데이터 넣어 확인해보기!

articleAdapter = ArticleAdapter()
articleAdapter.submitList(mutableListOf<ArticleModel>().apply {
    add(ArticleModel("0", "안녕하세요", 2000000, "50000원", ""))
    add(ArticleModel("0", "어서오세요", 1000000, "51000원", ""))
})

데이터를확인해보고 애뮬레이터를 실행해보자