Blog スタッフブログ

Android システム開発

[Android][Kotlin]カルーセル表示

システム開発担当のTFです。

※Android10対応（他バージョンの場合、細かい部分等が異なる事があります）

やり方

  • 表示部分のひな形のレイアウトの作成(今回は、CardViewを用いる)
  • カルーセル表示したい箇所に、ViewPager2を配置する
  • CardViewのListを作成し、ViewPager2にセットする

参考

　　ViewPager2とCardViewでカルーセル表示を行う
　　ViewPager2でカルーセルっぽいものを実装する

サンプル

<?xml version="1.0" encoding="utf-8"?>
<!-- 表示のひな形 -->
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="36dp"
    android:layout_marginEnd="36dp"
    app:cardCornerRadius="13dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical"
        >
        <TextView
			android:id="@+id/cardTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="テスト"
            />
    </LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".dashboard.DashboardFragment">
    <!-- カルーセル表示部分 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/cardPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="16dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<resources>
    <dimen name="card_offset">16dp</dimen>
    <dimen name="card_margin"> 20dp</dimen>
</resources>
// リスト設定
class CardRowData{
    var card_text : String = ""
}

class CardViewHolder: RecyclerView.ViewHolder{
    lateinit var cardTextView: TextView

    constructor(itemView: View):super(itemView){
        this.cardTextView = itemView.findViewById(R.id.cardTextView)
    }
}

class CardSlideAdapter: RecyclerView.Adapter<CardViewHolder>{
    lateinit var list:MutableList<CardRowData>
    lateinit var m_context: Context

    constructor(list:MutableList<CardRowData>, context: Context?){
        this.list = list
        this.m_context = context!!
    }

    override fun onCreateViewHolder(p0: ViewGroup, p1: Int): CardViewHolder {
        var inflate:View = LayoutInflater.from(p0.context).inflate(R.layout.carousel_cardview, p0, false)
        return CardViewHolder(inflate)
    }

    override fun onBindViewHolder(p0: CardViewHolder, p1: Int) {
        p0.cardTextView.setText(list.get(p1).card_text)
    }

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

// カルーセルのセット
fun setCarousel()
{
	var cardRowDatas:MutableList<CardRowData> = mutableListOf()

	var cardRowData = CardRowData()
	cardRowData.card_text = "カードテキスト1"
	cardRowDatas.add(cardRowData)

	var cardRowData2 = CardRowData()
	cardRowData.card_text = "カードテキスト2"
	cardRowDatas.add(cardRowData2)

	var cardRowData3 = CardRowData()
	cardRowData.card_text = "カードテキスト3"
	cardRowDatas.add(cardRowData3)

	binding.cardPager.adapter = CardSlideAdapter(cardRowDatas, context)

	val margin = resources.getDimension(R.dimen.card_margin)
	val offset = resources.getDimension(R.dimen.card_offset)

	binding.cardPager.offscreenPageLimit = 2
	binding.cardPager.setPageTransformer { page, position ->
		val offset = position * (2 * offset + margin)
		page.translationX = -offset
	}
}
戻る一覧へ戻る