[안드로이드&코틀린] 틴더앱 만들기#4, CardStackView 사용하기, 깃허브 라이브러리 사용하기, 리사이클러뷰

[안드로이드&코틀린] 틴더앱 만들기#3, 파이어베이스 리얼타임데이터베이스 사용, 초간단 editText

 

# github에서 card view 소스 사용하기

implementation "com.yuyakaido.android:card-stack-view:2.3.4"

GitHub - yuyakaido/CardStackView: 📱Tinder like swipeable card view for Android

val cardStackView = findViewById<CardStackView>(R.id.card_stack_view)
cardStackView.layoutManager = CardStackLayoutManager()
cardStackView.adapter = CardStackAdapter()

 위 라이브러리를 사용하기 위해 깃허브의 리드미를 읽어보면 CardStackLayoutManger와 CardStackAdapter가 사용됨을 알 수 있다. CardStackLayoutManager()는 import하여 사용하고 필요한 기능을 override해서 사용하면 되고, Adapter()는 따로 만들어 줘야한다. 리사이클러뷰를 만드는것과 형태가 똑같았으나, 오랜만에 사용하게 되서 기억이 잘 나지 않았다. 기억을 더듬어보면, 어댑터에 매니저를 연결해주면 되는데, 그 어댑터를 생성할때에는 서버에서 받아온 데이터들의 리스트를 어댑터의 인자로 넣어줘야 했다. 그러면 어댑터에서는 받아온 리스트들을 어떻게 사용할지를 정해주면 된다.

 그렇다면 현재 만들어야 할 것은, 

1. CardItem --> data class
2. CardItemAdapter
3. item_card.xml

을 새로 만들어줘야한다. 하나씩 천천히 기억을 더듬어가며 만들어보자.

 

# activity_like에 cardView 추가하기

 깃허브에서 원하는 라이브러리를 검색하고 사용하는 방법에 대해서 배웠다. 찾아온 깃허브 라이브러리를 build.gradle에 추가해주고 Sync now를 하면 사용이 가능하다. 위의 과정을 잘 맞췄다면, cardstackview라는 새로운 view를 사용할 수 있다.

<com.yuyakaido.android.cardstackview.CardStackView
  android:id="@+id/cardStackView"
  android:layout_width="0dp"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"
  android:layout_height="300dp"/>

 

# LayoutManger에서 추가 기능 override하기

private val adpater = CardItemAdapter()
private val cardItemList = mutableListOf<CardItem>()

private fun initCardStackView() {
    val cardStackView = findViewById<CardStackView>(R.id.cardStackView)
    cardStackView.layoutManager = CardStackLayoutManager(this,object : CardStackListener {
        override fun onCardDragging(direction: Direction?, ratio: Float) {}

        override fun onCardSwiped(direction: Direction?) {
			// TODO 스와이프 시 기능 구현!
        }

        override fun onCardRewound() {}
        override fun onCardCanceled() {}
        override fun onCardAppeared(view: View?, position: Int) {}
        override fun onCardDisappeared(view: View?, position: Int) {}

    })

    cardStackView.adapter = adpater
}

일단은 위처럼 임시방편으로 전역으로 adpater와 cardItemList를 만들어 놓는다. 어댑터는 따로 클래스를 정의해야 한다.

LayoutManager에서 두번째 익명객체의 람다식을 이용해서 override를 해야할 것들을 추가시켜 놓는다.  그러나 현재 액티비티 상에서 마치 라이프사이클을 오버라이드 하는것처럼 사용할 수도 있었다. 인자에 익명객체를 만들지 말고, this를 준 후, 현재 액티비티에 CardStackListener를 상속받으면 됐다.

cardItemList에 CardItem이 들어갈 것이기 떄문에 CardItem을 만들어 주자

 

# CardItem 만들기

data class CardItem(
    val name : String,
    val userId : String
)

이 객체들은 파이어베이스에서 받아온 정보들이 맵핑 되어 객체화 될 것 이다.

 

# CardItemAdapter만들기

넘겨준 데이터들의 리스트들을 어떻게 처리할지를 결정하는 어댑터를 만들어야 한다. 해당 어댑터는 리사이클러뷰를 만드는거와 똑같이 만들면 됐다.

viewHolder를 만들어주고, onCreateViewHolder와 onBindViewHolder를 각각 재정의 해주면 된다. 그리고 diffUtil을 통해서 각각의 view가 어떤 기준에서 달라지는지를 추가적으로 제공해주자.

class CardItemAdapter: ListAdapter<CardItem, CardItemAdapter.ViewHolder>(diffUtil) {

// 각각의 View에는 어떤 정보가 맵핑되야하는지를 알려줌
    inner class ViewHolder(private val view : View): RecyclerView.ViewHolder(view) {
        fun bind(cardItem: CardItem){
            view.findViewById<TextView>(R.id.userNameTextView).text = cardItem.name
        }
    }

// viewHolder를 생성함
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val inflater = LayoutInflater.from(parent.context).inflate(R.layout.item_card,parent,false)
        return ViewHolder(inflater)
    }

// bind해줌
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(currentList[position])
    }

// 어떤기준에서 달라지는지 정의
    companion object  {
        val diffUtil = object : DiffUtil.ItemCallback<CardItem>() {
            override fun areItemsTheSame(oldItem: CardItem, newItem: CardItem): Boolean {
                return oldItem.userId == newItem.userId
            }

            override fun areContentsTheSame(oldItem: CardItem, newItem: CardItem): Boolean {
                return oldItem == newItem
            }
        }
    }
}

 

# item_card.xml 만들기

 이제 각각의 카드의 레이아웃을 만들어주자. 

난 이렇게 디자인 했다.

 

# 느낀점

 시간이 부족해서 강의를 많이 듣고 있지 못한다. 다음시간에 리얼타임데이터베이스에서 값을 받아와 카드스택뷰의 어댑터의 값을 넘겨주고 실제로 카드를 사용하는 것을 포스팅하도록 하겠다.

 일단 어댑터, 리스너, 매니저 같은 용어들이 어디서 파생됐고 어떤 역할을 하는지에 대해서 조금 찾아봐야하는 필요성을 느꼈다. 다른 사람들은 이런거를 어디서 뭘 보고 공부하는지... 모르겠다.

 실제로 안드로이드 프로젝트에서 깃허브에서 라이브러리를 찾아서 쓰는 경우를 처음 봤다. 앞으로 개발할때 내가 다 짜기보다는 이렇게 가져와서 사용해봐야겠다.

 

 

# 에러

## Failed to resolve: com.yuyakaido.android:card-stack-view:2.3.4

Android Gradle project sync failed due to unresolved dependency

jcenter()를 settings.gradle에 추가해주자

 

# 참고

전에 리사이클러뷰를 만들었던 게시글을 다시 참고해보자.

[안드로이드&코틀린] 명언앱 만들기, 리사이클러뷰 만들기, ViewPager2, 파이어베이스 remote config ,se

 

 

 

[안드로이드&코틀린] 인터파크API이용하여 도서리뷰앱 만들기#2, 어댑터에 버튼 구현하기, 인탠트