TIL 39일차

Multi View Type RecyclerView

한 개의 리사이클러뷰 안에서 여러 개의 View 형태를 가지는 형태이다

카드의 색깔이 각각 다르도록 구현해보았다

멀티뷰 타입 리사이클러뷰 사용 예제

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardview_main_back"
        android:layout_width="70dp"
        android:layout_height="40dp"
        app:cardCornerRadius="40dp"
        app:cardBackgroundColor="@color/blue"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="40dp"
        android:layout_marginStart="40dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageButton
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>

    <TextView
        android:id="@+id/tx_main_name"
        android:layout_width="130dp"
        android:layout_height="40dp"
        android:text="Select a Card"
        android:gravity="center"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="40dp"/>
    
    <TextView
        android:id="@+id/tx_main_intro"
        android:layout_width="150dp"
        android:layout_height="40dp"
        android:text="Avaliable Balance"
        android:textColor="@color/gray"
        android:textSize="18dp"
        android:textStyle="bold"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="@id/cardview_main_back"
        app:layout_constraintTop_toBottomOf="@id/cardview_main_back"
        android:layout_marginTop="40dp" />

    <TextView
        android:id="@+id/tx_main_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="$2,85,856,20"
        android:textSize="35dp"
        android:textStyle="bold"
        android:textColor="@color/blue"
        app:layout_constraintStart_toStartOf="@id/tx_main_intro"
        app:layout_constraintTop_toBottomOf="@id/tx_main_intro" />
    
    <TextView
        android:id="@+id/tx_main_intro2"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="Please, select a card you are willing to do the money transfer with or add a new card
using the plus button below."
        android:textSize="15dp"
        android:textColor="@color/gray"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@id/tx_main_price"
        app:layout_constraintStart_toStartOf="@id/tx_main_price" />

    <TextView
        android:id="@+id/tx_main_select"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select a Card"
        android:gravity="center"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@id/tx_main_intro2"
        app:layout_constraintStart_toStartOf="@id/tx_main_intro2"
        android:layout_marginTop="40dp"/>

    <ImageButton
        android:id="@+id/btn_main_plus"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/button"
        app:layout_constraintStart_toEndOf="@id/tx_main_select"
        app:layout_constraintTop_toTopOf="@id/tx_main_select"
        app:layout_constraintBottom_toBottomOf="@id/tx_main_select"
        android:layout_marginStart="210dp" />
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/main_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="340dp"
        android:padding="40dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

 

• activity_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DetailActivity">

    <TextView
        android:id="@+id/tx_detail_nametx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        android:textSize="20dp"
        android:layout_marginStart="40dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="40dp"
        android:text="이름: " />

    <TextView
        android:id="@+id/tx_detail_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/tx_detail_nametx"
        app:layout_constraintTop_toTopOf="@id/tx_detail_nametx"
        app:layout_constraintBottom_toBottomOf="@id/tx_detail_nametx"
        android:text="name"
        android:textSize="20dp" />

    <TextView
        android:id="@+id/tx_detail_numbertx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@id/tx_detail_nametx"
        app:layout_constraintTop_toBottomOf="@id/tx_detail_nametx"
        android:layout_marginTop="10dp"
        android:text="카드 번호: "
        android:textSize="20dp" />

    <TextView
        android:id="@+id/tx_detail_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="number"
        app:layout_constraintStart_toEndOf="@id/tx_detail_numbertx"
        app:layout_constraintTop_toTopOf="@id/tx_detail_numbertx"
        app:layout_constraintBottom_toBottomOf="@id/tx_detail_numbertx" />

    <TextView
        android:id="@+id/tx_detail_expirationtx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="유효기간: "
        app:layout_constraintStart_toStartOf="@id/tx_detail_numbertx"
        app:layout_constraintTop_toBottomOf="@id/tx_detail_numbertx"
        android:layout_marginTop="10dp" />

    <TextView
        android:id="@+id/tx_detail_expiration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="expiration"
        app:layout_constraintStart_toEndOf="@id/tx_detail_expirationtx"
        app:layout_constraintTop_toTopOf="@id/tx_detail_expirationtx"
        app:layout_constraintBottom_toBottomOf="@id/tx_detail_expirationtx" />

    <TextView
        android:id="@+id/tx_detail_pricetx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="가격: "
        app:layout_constraintStart_toStartOf="@id/tx_detail_expirationtx"
        app:layout_constraintTop_toBottomOf="@id/tx_detail_expirationtx"
        android:layout_marginTop="10dp" />

    <TextView
        android:id="@+id/tx_detail_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="price"
        app:layout_constraintStart_toEndOf="@id/tx_detail_pricetx"
        app:layout_constraintTop_toTopOf="@id/tx_detail_pricetx"
        app:layout_constraintBottom_toBottomOf="@id/tx_detail_pricetx" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

• CardData.kt (interface)

package com.android.standardhomework3

interface CardData {
    val name: String
    val number: String
    val expiration: String
    val price: String
}

 

• MyCard.kt (data class)

package com.android.standardhomework3

data class MyCard1(override val name: String, override val number: String, override val expiration: String, override val price: String) : CardData

data class MyCard2(override val name: String, override val number: String, override val expiration: String, override val price: String) : CardData

data class MyCard3(override val name: String, override val number: String, override val expiration: String, override val price: String) : CardData

 

• MyAdapter.kt

package com.android.standardhomework3

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.android.standardhomework3.databinding.Card1RecyclerviewBinding
import com.android.standardhomework3.databinding.Card2RecyclerviewBinding
import com.android.standardhomework3.databinding.Card3RecyclerviewBinding

class MultiViewTypeAdapter(val dataList: MutableList<CardData>): RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    companion object {
        private val CARD1 = 0
        private val CARD2 = 1
        private val CARD3 = 2
    }

    interface ItemClick {
        fun onClick(view: View, position: Int)
    }
    var itemClick: ItemClick? = null

    override fun getItemViewType(position: Int): Int {
        return when(dataList[position]) {
            is MyCard1 -> CARD1
            is MyCard2 -> CARD2
            is MyCard3 -> CARD3
            else -> throw IllegalArgumentException("nothing")
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            CARD1 -> {
                var binding = Card1RecyclerviewBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
                return Card1Holder(binding)
            }

            CARD2 -> {
                var binding = Card2RecyclerviewBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
                return Card2Holder(binding)
            }

            CARD3 -> {
                var binding = Card3RecyclerviewBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
                return Card3Holder(binding)
            }

            else -> throw IllegalArgumentException("nothing")
        }
    }

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

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        holder.itemView.setOnClickListener {
            itemClick?.onClick(it, position)
        }

        when(holder) {
            is Card1Holder -> {
                holder.name.text = dataList[position].name
                holder.number.text = dataList[position].number
                holder.expiration.text = dataList[position].expiration
                holder.price.text = dataList[position].price
            }
            is Card2Holder -> {
                holder.name.text = dataList[position].name
                holder.number.text = dataList[position].number
                holder.expiration.text = dataList[position].expiration
                holder.price.text = dataList[position].price
            }
            is Card3Holder -> {
                holder.name.text = dataList[position].name
                holder.number.text = dataList[position].number
                holder.expiration.text = dataList[position].expiration
                holder.price.text = dataList[position].price
            }
        }
    }


    inner class Card1Holder(val binding: Card1RecyclerviewBinding) : RecyclerView.ViewHolder(binding.root) {
        val name = binding.txCardName
        val number = binding.txCardNumber
        val expiration = binding.txCardExpiration
        val price = binding.txCardPrice
    }
    inner class Card2Holder(val binding: Card2RecyclerviewBinding) : RecyclerView.ViewHolder(binding.root) {
        val name = binding.txCardName
        val number = binding.txCardNumber
        val expiration = binding.txCardExpiration
        val price = binding.txCardPrice
    }
    inner class Card3Holder(val binding: Card3RecyclerviewBinding) : RecyclerView.ViewHolder(binding.root) {
        val name = binding.txCardName
        val number = binding.txCardNumber
        val expiration = binding.txCardExpiration
        val price = binding.txCardPrice
    }
}

 

• card1_recyclerview.xml (card2_recyclerview.xml, card3_recyclerview.xml 색깔만 다르고 나머지 동일)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="330dp"
    android:layout_height="205dp"
    android:background="@color/white"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="330dp"
        android:layout_height="190dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:cardBackgroundColor="@color/blue"
        android:elevation="20dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/tx_card_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Anderson"
                android:textSize="12dp"
                android:textColor="@color/white"
                android:layout_marginTop="15dp"
                android:layout_marginStart="15dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tx_card_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="@id/tx_card_name"
                app:layout_constraintTop_toBottomOf="@id/tx_card_name"
                android:text="2423  3581  9503  2412"
                android:textColor="@color/white"
                android:textSize="18dp"
                android:textStyle="bold"
                android:layout_marginTop="5dp" />

            <TextView
                android:id="@+id/tx_card_balance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Your Balance"
                android:textSize="12dp"
                android:textColor="@color/lightgray"
                app:layout_constraintStart_toStartOf="@id/tx_card_number"
                app:layout_constraintTop_toBottomOf="@id/tx_card_number"
                android:layout_marginTop="65dp" />

            <TextView
                android:id="@+id/tx_card_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="$3,100.30"
                android:textColor="@color/white"
                app:layout_constraintStart_toStartOf="@id/tx_card_balance"
                app:layout_constraintTop_toBottomOf="@id/tx_card_balance"
                android:textSize="25dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tx_card_debit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toEndOf="@id/tx_card_name"
                app:layout_constraintTop_toTopOf="@id/tx_card_name"
                app:layout_constraintBottom_toBottomOf="@id/tx_card_name"
                android:text="A Debit Card"
                android:textSize="12dp"
                android:textColor="@color/white"
                android:layout_marginStart="170dp" />

            <TextView
                android:id="@+id/tx_card_expiration"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="@id/tx_card_debit"
                app:layout_constraintTop_toBottomOf="@id/tx_card_debit"
                android:textColor="@color/white"
                android:text="21 / 24"
                android:textSize="18dp"
                android:textStyle="bold"
                android:layout_marginTop="5dp" />

            <TextView
                android:id="@+id/tx_card_visa"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@id/tx_card_expiration"
                app:layout_constraintEnd_toEndOf="@id/tx_card_expiration"
                android:layout_marginTop="92dp"
                android:text="Visa"
                android:textColor="@color/white" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>

 

• MainActivity.kt

package com.android.standardhomework3

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.android.standardhomework3.databinding.ActivityMainBinding
import java.text.DecimalFormat

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val dataList = init()

        val adapter = MultiViewTypeAdapter(dataList)
        binding.mainRecyclerview.adapter = adapter
        binding.mainRecyclerview.layoutManager = LinearLayoutManager(this)

        adapter.itemClick = object : MultiViewTypeAdapter.ItemClick {
            override fun onClick(view: View, position: Int) {
                val intent = Intent(this@MainActivity, DetailActivity::class.java)
                intent.putExtra("_name", dataList[position].name)
                intent.putExtra("_number", dataList[position].number)
                intent.putExtra("_expiration", dataList[position].expiration)
                intent.putExtra("_price", dataList[position].price)
                startActivity(intent)
            }
        }
    }

    private fun init(): MutableList<CardData> {
        val dataList = mutableListOf<CardData>()
        val decimal = DecimalFormat("$#,###.00")
        dataList.add(MyCard1("Anderson", "2423 3581 9503 2412", "21 / 24", decimal.format(3100.30)))
        dataList.add(MyCard2("Anderson", "2423 3581 9503 2412", "21 / 24", decimal.format(3100.30)))
        dataList.add(MyCard3("Anderson", "2423 3581 9503 2412", "21 / 24", decimal.format(3100.30)))
        return dataList
    }
}

 

• DetailActivity.kt

package com.android.standardhomework3

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.android.standardhomework3.databinding.ActivityDetailBinding

class DetailActivity : AppCompatActivity() {
    private lateinit var binding: ActivityDetailBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityDetailBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.txDetailName.text = intent.getStringExtra("_name")
        binding.txDetailNumber.text = intent.getStringExtra("_number")
        binding.txDetailExpiration.text = intent.getStringExtra("_expiration")
        binding.txDetailPrice.text = intent.getStringExtra("_price")
    }
}