김호쭈
DevForYou
김호쭈
전체 방문자
오늘
어제
  • 분류 전체보기 (321)
    • • 데이터베이스(DB) (9)
      • __SQL__ (9)
    • •알고리즘(Algorithm ) (117)
      • 문제풀이 (99)
      • 스터디 (14)
      • 알고리즘 팁 (4)
    • •Compter Science (57)
      • Operating System (25)
      • Computer Network (1)
      • Computer Vision (16)
      • Artificial Intelligence (14)
      • Software Technology (1)
    • • 독서 (36)
      • Design Pattern (24)
      • 객체지향의 사실과 오해 (1)
      • Object Oriented Software En.. (11)
    • • 개발 (26)
      • React (3)
      • node.js (6)
      • Django (11)
      • Spring boot (6)
    • • 개발Tip (4)
      • GitHub (0)
    • •프로젝트 (2)
      • 물물 (2)
    • •App (54)
      • 안드로이드 with Kotlin (50)
      • 코틀린(Kotiln) (4)
    • •회고 (8)
    • •취준일기 (3)
    • • 기타 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • local저장소
  • ㄱ
  • KMU_WINK
  • Remote저장소
  • 로컬저장소
  • 깃허브데스크탑
  • GitHubDesktop
  • 원격저장소

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김호쭈

DevForYou

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

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

2022. 5. 9. 01:08
 

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

# 결과물 미리보기  지금 까지는 액티비티만을 사용하여 화면을 구성했지만, 프래그먼트를 이용하여 자연스럽게 화면을 구성하고 있다. 하단메뉴바를 사용하면서 프래그먼트를 이용하여 메뉴

devforyou.tistory.com

 

 

# 결과물 미리보기

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

저작자표시 (새창열림)

'•App > 안드로이드 with Kotlin' 카테고리의 다른 글

[안드로이드&코틀린] 중고거래앱 만들기#4, 파일 접근 권한 얻기, 갤러리에서 이미지 가져오기, floatButton, 파이어베이스 동기 처리  (4) 2022.05.10
[안드로이드&코틀린] 중고거래앱 만들기#3, 프래그먼트에서 파이어베이스 연결하기, 파이어베이스 동기처리  (1) 2022.05.09
[안드로이드&코틀린] 중고거래앱 만들기#1, 프래그먼트 이용하여 하단메뉴바 만들기, setOnItemSelectedListener, supportFragmentManager, BottomNavigationView  (1) 2022.05.08
[안드로이드&코틀린] 틴더앱 만들기#6, 파이어베이스 리스너 이해하기 ,매칭상태 구현하기  (0) 2022.05.08
[안드로이드&코틀린] 틴더앱 만들기#5, 파이어베이스 읽어오기, 파이어베이스 변화 감지, 리스너 이해하기, addListenerForSingleValueEvent, addChildEventListener  (0) 2022.05.06
    '•App/안드로이드 with Kotlin' 카테고리의 다른 글
    • [안드로이드&코틀린] 중고거래앱 만들기#4, 파일 접근 권한 얻기, 갤러리에서 이미지 가져오기, floatButton, 파이어베이스 동기 처리
    • [안드로이드&코틀린] 중고거래앱 만들기#3, 프래그먼트에서 파이어베이스 연결하기, 파이어베이스 동기처리
    • [안드로이드&코틀린] 중고거래앱 만들기#1, 프래그먼트 이용하여 하단메뉴바 만들기, setOnItemSelectedListener, supportFragmentManager, BottomNavigationView
    • [안드로이드&코틀린] 틴더앱 만들기#6, 파이어베이스 리스너 이해하기 ,매칭상태 구현하기
    김호쭈
    김호쭈
    공부하고 정리하고 기록하기

    티스토리툴바