CardStackView

https://github.com/yuyakaido/CardStackView

1. dependency 추가

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

만약 라이브러리가 제대로 동작하지 않는다면,
setting.gradle 에

dependencyResolutionManagement {
    repositories {
    	..
        jcenter()
        ..
    }
}

2. Layout 만들기

activity_main.xml

<?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"
    tools:context=".MainActivity">

    <com.yuyakaido.android.cardstackview.CardStackView
        android:id="@+id/cardStackView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

item_card.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_margin="20dp"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/cardId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="50dp"/>

    <FrameLayout
        android:id="@+id/left_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:src="@drawable/nope"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"/>


    </FrameLayout>

    <FrameLayout
        android:id="@+id/right_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:src="@drawable/okay"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"/>


    </FrameLayout>

</androidx.cardview.widget.CardView>

item_card.xml 에서 id = left_overlay id = right_overlay는 그대로 사용해야 합니다.

왼쪽으로 넘길 때, 오른쪽으로 넘길 때 보여질 레이아웃을 정의하면 됩니다.

3. Adapter 생성

package com.example.firebasefcmex.slider

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.firebasefcmex.R

class CardStackAdapter(val context : Context, val items : List<String>) : RecyclerView.Adapter<CardStackAdapter.ViewHolder>() {

    inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView) {

       val cardIdTextView = itemView.findViewById<TextView>(R.id.cardId)


    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardStackAdapter.ViewHolder {

        val inflater = LayoutInflater.from(parent.context)
        val view : View = inflater.inflate(R.layout.item_card, parent, false)
        return ViewHolder(view)

    }

    override fun onBindViewHolder(holder: CardStackAdapter.ViewHolder, position: Int) {
        holder.cardIdTextView.text = items[position]
    }

    override fun getItemCount(): Int {
        return items.size
    }


}

4. cardStackView에 layoutManager, adapter 달아주기

package com.example.firebasefcmex

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.example.firebasefcmex.slider.CardStackAdapter
import com.yuyakaido.android.cardstackview.CardStackLayoutManager
import com.yuyakaido.android.cardstackview.CardStackListener
import com.yuyakaido.android.cardstackview.CardStackView
import com.yuyakaido.android.cardstackview.Direction

class MainActivity : AppCompatActivity() {

    lateinit var cardStackAdapter : CardStackAdapter
    lateinit var manager : CardStackLayoutManager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val cardStackView = findViewById<CardStackView>(R.id.cardStackView)

        manager = CardStackLayoutManager(baseContext, object : CardStackListener {
            override fun onCardDragging(direction: Direction?, ratio: Float) {

            }

            override fun onCardSwiped(direction: Direction?) {

            }

            override fun onCardRewound() {

            }

            override fun onCardCanceled() {

            }

            override fun onCardAppeared(view: View?, position: Int) {

            }

            override fun onCardDisappeared(view: View?, position: Int) {

            }

        })

        val cardStackList= mutableListOf<String>()
        cardStackList.add("card 1")
        cardStackList.add("card 2")
        cardStackList.add("card 3")

        cardStackAdapter = CardStackAdapter(baseContext, cardStackList)
        cardStackView.layoutManager = manager
        cardStackView.adapter = cardStackAdapter

    }
}

layoutManager의 각 메서드에 동작을 정의하면 됩니다.

• onCardDragging(direction: Direction?, ratio: Float): 이 메서드는 사용자가 카드를 드래그하면 호출됩니다. direction 매개변수는 드래그 방향을 나타내며, ratio 매개변수는 드래그 진행 상황을 나타냅니다.

• onCardSwiped(direction: Direction?): 이 메서드는 사용자가 카드를 스와이프할 때 호출됩니다. direction 매개변수는 스와이프 방향을 나타냅니다.

• onCardRewound(): 이 메서드는 사용자가 카드를 되감을 때 호출됩니다. (카드를 스와이프 한 뒤 되감기 작업)

• onCardCanceled(): 이 메서드는 사용자가 카드 스와이프 작업을 취소할 때 호출됩니다.

• onCardAppeared(view: View?, position: Int): 이 메서드는 새로운 카드가 화면에 나타날 때 호출됩니다. view 매개변수는 나타난 카드의 뷰이며, position 매개변수는 해당 카드의 위치를 나타냅니다.

• onCardDisappeared(view: View?, position: Int): 이 메서드는 카드가 화면에서 사라질 때 호출됩니다. view 매개변수는 사라진 카드의 뷰이며, position 매개변수는 해당 카드의 위치를 나타냅니다.

실행 화면