Как развернуть и свернуть CardView в Android?

Question

Видел как много людей использует CardView, как пример: В закрытом виде

В открытом

Но не могу понять каким образом его так развернуть и свернуть. Прошу помощи или примера кода.

P.S. Вроде как слышал, что делается с помощью Transition

Answer 1

Проще всего использовать уже готовую библиотеку по типу ExpandableView

Expandable RecyclerView

ExpandableView

Про transition хорошо описано на хабре но как по мне это не подходящее решение для развертывания карточки

Второй вариант это упаковать LinearLayout с аттрибутом android:animateLayoutChanges="true" в CardView

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/block1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>

        <TextView
            android:id="@+id/block2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:visibility="gone"/>

    </LinearLayout>
</android.support.v7.widget.CardView>

и при клике показывать/скрывать block2

Вариант по сложней это рисовать свою анимацию изменения размера как показано здесь

Answer 2

Как я написал в комментарии, чтобы это сделать можно создать два CardView в айтеме, если это раскрывающийся список(если нет - то еще проще). По нажатию менять видимость, а анимации прикрутить с помощью MaterialContainerTransform.

Вот работающий пример:

Activity:

class ExpActivity : AppCompatActivity() {

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

    exp_recycler.setHasFixedSize(true)
    exp_recycler.adapter = ExpAdapter(getItems()) { startView, endView, 
    rootLayout ->
        beginDelayedTransition(rootLayout, startView.getTransform(endView))
    }
}

private fun getItems() = listOf(
    Item(1, "Title1", getString(R.string.dummy_text)),
    Item(2, "Title2", getString(R.string.dummy_text)),
    Item(3, "Title3", getString(R.string.dummy_text)),
    Item(4, "Title4", getString(R.string.dummy_text))
)

private fun View.getTransform(mEndView: View) = 
MaterialContainerTransform().apply {
    startView = this@getTransform
    endView = mEndView
    addTarget(mEndView)
    pathMotion = MaterialArcMotion()
    duration = 550
    scrimColor = Color.TRANSPARENT
}
}

Adapter:

class ExpAdapter(
private val items: List<Item>,
private val clickListener: (View, View, ConstraintLayout) -> Unit
) : RecyclerView.Adapter<ExpAdapter.ExpViewHolder>() {

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = 
ExpViewHolder(
    LayoutInflater.from(parent.context).inflate(R.layout.item_exp, parent, false)
)

override fun onBindViewHolder(holder: ExpViewHolder, position: Int) {
    val item = items[position]

    with(holder) {
        shortText.text = item.shortText
        longText.text = item.longText

        shortCard.setOnClickListener {
            clickListener(shortCard, longCard, rootLayout)
            shortCard.visibility = GONE
            longCard.visibility = VISIBLE
        }

        longCard.setOnClickListener {
            clickListener(longCard, shortCard, rootLayout)
            longCard.visibility = GONE
            shortCard.visibility = VISIBLE
        }
    }
}

override fun getItemCount() = items.size

class ExpViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    val rootLayout: ConstraintLayout = view.root_layout
    val shortText: TextView = view.short_text
    val longText: TextView = view.long_text
    val shortCard: CardView = view.short_card
    val longCard: CardView = view.long_card
}
}

Макет айтема:

<?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/root_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<androidx.cardview.widget.CardView
    android:id="@+id/short_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/short_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:gravity="center"
        android:textSize="18sp"
        tools:text="@string/heading_text" />

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/long_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/long_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:gravity="center"
        android:textSize="18sp"
        tools:text="@string/dummy_text" />

</androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

БЛОГ НА HUSL

Как развернуть и свернуть CardView в Android?

Ответы (2 шт):