[안드로이드&코틀린] 중고거래앱 만들기#2, 중고 물품 정보 리사이클러 뷰 만들기, 프래그먼트에 리사이클러뷰 추가하기, 홈 화면 구성하기, 뷰바인딩

[안드로이드&코틀린] 중고거래앱 만들기#1, 프래그먼트 이용하여 하단메뉴바 만들기, setOnItemSelect

 

 

# 결과물 미리보기

 home 화면에 리사이클러뷰를 배치시켰다. 아직은 서버와 연결하지 않았기 때문에 데이터가 존재하지 않는다. 또한 상세 페이지도 아직 존재하지 않는다. 

 안드로이드 공부를 하면서 느끼는건데, 리사이클러뷰를 진짜 엄청 많이 사용한다. 스크롤이 들어가는 곳은 무조건 리사이클러뷰가 있는 것 같다. 이게 그냥 하다보니까 코드도 외워지게 되는듯 ...

 

# 구현 순서

1. 홈 프래그먼트 뷰바인딩 연결하기
2. 레이아웃 매니저 연결하기
3. 어댑터 연결하기
4. 어댑터 만들기
5. 모델 만들기

뷰 바인딩을 사용했다. gradle에 속성을 잊지 말고 추가해주자, 또 글라이드를 사용해서 이미지를 받아와야 하기 때문에 같이 추가해주자

implementation "com.github.bumptech.glide:glide:4.12.0"

viewBinding {
    enabled = true
}

 

# 뷰 바인딩 사용하기

class HomeFragment : Fragment(R.layout.fragment_home) {

    private lateinit var binding: FragmentHomeBinding
    private val articleAdapter = ArticleAdapter()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val fragmentHomeBidning = FragmentHomeBinding.bind(view)
        binding = fragmentHomeBidning
    }
}

 

# 홈 프레그먼트 레이아웃 구성하기

너무 칙칙해서 적당한 로고를 찾는데, 시간을 날렸다.. ㅋㅋ 당근마켓꺼 그대로 가져오려 했는데 벡터이미지를 구할 수 없어서, 그냥 안드로이드에 있는 기본 벡터를 활용했다. 꽤나 괜찮다 ㅎ

 

# 리사이클러뷰 만들기

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

액티비티로 구성할때는 LinearLayoutManager(this) 를 사용했지만, 프래그먼트는 context가 될 수 없다고 한다. 그러기 때문에 getContext()를 사용해서 context를 받아와야 한다. 코틀린에서는 이러한 get, set을 생략하여 사용할 수 있기 때문에 context를 통해서 가져온다. 이제 어댑터를 만들어 보자

 

# 어댑터 만들기

class ArticleAdapter : ListAdapter<ArticleModel, ArticleAdapter.ViewHolder>(diffUtil){
    inner class ViewHolder (private val binding: ItemArticleBinding): RecyclerView.ViewHolder(binding.root){
        fun bind(articleModel: ArticleModel){
            val format = SimpleDateFormat("MM년dd일")
            val date = Date(articleModel.createdAt)

            binding.titleTextView.text = articleModel.title
            binding.dateTextView.text = format.format(date).toString()
            binding.priceTextView.text = articleModel.price
            if(articleModel.imageUrl.isNotEmpty()){
                Glide.with(binding.thumbnailImageView)
                    .load(articleModel.imageUrl)
                    .into(binding.thumbnailImageView)
            }
        }
    }

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

    override fun onBindViewHolder(holder: ViewHolder, 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
            }
        }
    }
}

특별한 것은 없다. Glide를 사용해서 이미지를 받아오는 것과, 날짜를 포맷팅해서 사용한다는 것, 뷰바인딩을 썼다는 점만 다르다.

리사이클러뷰에 들어가는 아이템 생략하도록 하겠다.

# 모델 정의하기

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

 

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

//임시 데이터로 확인해보기
articleAdapter.submitList(mutableListOf<ArticleModel>().apply {
    add(ArticleModel("1","맥북 프로16인치",100000,"1,000,000",""))
    add(ArticleModel("1","갤럭시S22",101010,"800,000",""))
})

위 데이터로 확인해보면, 위에서 봤던 결과물이 잘 나온다!

# 마치며

이번 파트에서는 xml디자인 하는곳에서, 또 어댑터를 안보고 만들어보다가 시간을 좀 많이 썼다.. 얼른 프래그먼트를 다양하게 활용해보고 싶다. 난 이번 여름방학때 어플하나 플레이스토어에 출시하는게 목표다..