在Android中使用卡片视图实现可折叠的视图
CardView对于在容器中显示数据非常有用。它可以包含关于单个对象的内容和动作。一个CardView可以以一种易于视觉化的方式显示适量的数据。
卡片有助于在同一页面上呈现大量的对象。卡片的立面给你的移动应用带来了一个三维的外观，从而丰富了它的外观和感觉。
在这篇文章中，你将了解CardView以及如何设计和定制它。你将实现一个可折叠的视图，当你点击卡片上的图片时，可以展开显示更多信息。
前提条件
在你开始之前，你应该具备以下条件
- 使用Java编程语言的Android开发的基本知识。
- 一个Android IDE。
- 迁移你的项目以使用AndroidX库。
第一步：创建一个新的Android Studio项目
使用Empty活动模板创建一个新的Android Studio项目。命名该项目为折叠卡片视图。选择Java作为语言，API 21作为最小SDK，然后点击完成。
第二步：添加所需的依赖项
要使用CardView ，你必须添加CardView依赖项。要添加CardView 依赖项，你需要将Google的Maven仓库添加到你的项目中。
在你的项目级build.gradle 文件中，添加谷歌的Maven仓库。
buildscript {
repositories {
google()
}
}
要添加 material CardView 依赖项，请在你的应用级build.gradle 文件中添加以下依赖项。
dependencies {
implementation 'com.google.android.material:material:1.4.0'
}
你可以在这里获得最新版本的 material CardView 库。
第三步：创建根布局
将你的根布局改为constraint 布局。在约束布局里面，添加CardView 。
注意：将卡片视图约束到父方的顶部和底部以及父方的开始和结束。
第四步：设计卡片视图的样式
给予CardView一个高度和宽度为0dp的位置。在约束布局中，这使得视图与它的约束尺寸一致。在我们的例子中，CardView 的宽度将和父对象一样大。
给予CardView一个16dp的水平边距，和一个5dp的角半径。最后，你将使CardView成为其他视图的父布局。要做到这一点，给卡片视图一个开始和结束标签。
<com.google.android.material.card.MaterialCardView
android:id="@+id/base_cardview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="@color/teal_200"
android:layout_marginHorizontal="16dp"
app:strokeWidth="2dp" >
</com.google.android.material.card.MaterialCardView>
伟大的工作!
第五步：将视图添加到CardView布局中
在CardView ，添加一个约束性布局。把它的宽度设置为与父级匹配，高度设置为包裹内容。你要在这个约束性布局中添加视图。
你的代码应该是这样的。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.card.MaterialCardView
android:id="@+id/base_cardview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
app:cardCornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="@color/teal_200"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
在你开始添加更多的视图之前，这里有一个小提示。
为了方便使用设计模式，把所有包裹内容的父视图改为匹配父视图。这样，你就可以看到一个元素的准确定位。但是，不要忘记把它改回wrap content😊。
在约束布局内，为视图的四边添加指引。让它们每个都远离视图16dp。
准则是设计布局时使用的帮助工具。如果你在同一个布局中的许多项目都有相同的边距值，那么它是最有帮助的。我发现指南的一个特点是，它们可以是屏幕的一个百分比。
这里是你如何创建一个准则。
这就是准则代码应该有的样子。
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="16dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
第六步：设计折叠式卡片的用户界面
接下来，我们将建立折叠式卡片的用户界面。
添加一个ImageView来表示一个信息图标。用一个TextView来表示标签。最后，一个显示更多的图标，当点击时，它将展开或折叠卡片。
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/guideline3"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@android:drawable/ic_menu_info_details"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Why should you drink water?"
android:textColor="#00255E"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="@+id/imageView2"
app:layout_constraintStart_toEndOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/imageView2"
app:layout_constraintVertical_bias="0.5" />
<ImageView
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:padding="4dp"
app:layout_constraintBottom_toBottomOf="@+id/textView14"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="@+id/textView14"
app:layout_constraintTop_toTopOf="@+id/textView14"
app:srcCompat="@android:drawable/arrow_down_float"
app:tint="@color/teal_200" />
请注意我是如何将这些视图限制在指南中的。
当你点击id为show 的imageView时，卡片视图会展开，显示出更多的细节。
这就是布局的样子。
第七步。为扩展的卡片视图设计用户界面
在这一步，我们将为卡片添加更多的视图。这个视图将代表卡片在扩展状态下的样子。
使用一个高度为1dp ，背景为#CECECE （或任何你选择的）的视图元素来实现将标题文本与其他可折叠视图分开的直线。
把它的顶部限制在TextView的底部，并给它一个顶部边距16dp 。在水平方向上，把视图限制在开始和结束准则上，并给它一个宽度0dp ，这样它就和卡片一样宽。
在这个视图的下面，添加一个TextView和一些要点。你可以使用ImageViews作为子弹。随意添加任何你想要的东西。
下面是代码的样子。
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="16dp" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/guideline3"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@android:drawable/ic_menu_info_details"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Why should you drink water?"
android:textColor="#00255E"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="@+id/imageView2"
app:layout_constraintStart_toEndOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/imageView2"
app:layout_constraintVertical_bias="0.5" />
<ImageView
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:padding="4dp"
app:layout_constraintBottom_toBottomOf="@+id/textView14"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="@+id/textView14"
app:layout_constraintTop_toTopOf="@+id/textView14"
app:srcCompat="@android:drawable/arrow_down_float"
app:tint="@color/teal_200" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="#CECECE"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/textView14" />
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="It's no magic bullet, but the benefits of water are many."
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/view3" />
<ImageView
android:id="@+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/textView16"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView16"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Maintain the Balance of Body Fluids."
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@+id/imageView9"
app:layout_constraintTop_toBottomOf="@+id/textView15" />
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/textView17"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView17"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Energize Muscles"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@+id/imageView10"
app:layout_constraintTop_toBottomOf="@+id/textView16" />
<ImageView
android:id="@+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/textView18"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView18"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Keep Skin Looking Good"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@+id/imageView11"
app:layout_constraintTop_toBottomOf="@+id/textView17" />
<TextView
android:id="@+id/textView19"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="If you think you need to be drinking more, here are some tips to increase your fluid intake and reap the benefits of water:"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/textView18" />
<View
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="#CECECE"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/textView19" />
<ImageView
android:id="@+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView20"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Have a beverage with every snack or meal, Eat more fruits and vegetables, and Keep a bottle of water with you.
"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toEndOf="@+id/imageView12"
app:layout_constraintTop_toBottomOf="@+id/view4" />
<androidx.constraintlayout.widget.Group
android:id="@+id/card_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="textView15,view3,imageView9,textView16,imageView10,textView17,imageView11,textView18,textView19,view4,imageView12,textView20" />
</androidx.constraintlayout.widget.ConstraintLayout>
呜呼!当你运行该项目时，布局应该是这样的。
当卡片被折叠时，你会想隐藏这些视图。这里有一个问题。控制这12个视图中的每一个的可见性将是一种负担和重复的工作。
现在，这就是组出现的地方。有了组，你可以将所有这些视图分组，并作为一个视图处理它们的可见性。你可以通过设置组的可见性来设置所有12个视图的可见性。
第八步：为隐藏的视图创建一个组
这里是如何创建组的。
很酷，对吗？
现在给该组一个idcard_group 。
你的整个布局代码应该看起来像这样。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.card.MaterialCardView
android:id="@+id/base_cardview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
app:cardCornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="@color/teal_200"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="16dp" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/guideline3"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@android:drawable/ic_menu_info_details"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Why should you drink water?"
android:textColor="#00255E"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="@+id/imageView2"
app:layout_constraintStart_toEndOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="@+id/imageView2"
app:layout_constraintVertical_bias="0.5" />
<ImageView
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:padding="4dp"
app:layout_constraintBottom_toBottomOf="@+id/textView14"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="@+id/textView14"
app:layout_constraintTop_toTopOf="@+id/textView14"
app:srcCompat="@android:drawable/arrow_down_float"
app:tint="@color/teal_200" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="#CECECE"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/textView14" />
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="It's no magic bullet, but the benefits of water are many.
"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/view3" />
<ImageView
android:id="@+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/textView16"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView16"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Maintain the Balance of Body Fluids."
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@+id/imageView9"
app:layout_constraintTop_toBottomOf="@+id/textView15" />
<ImageView
android:id="@+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/textView17"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView17"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Energize Muscles"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@+id/imageView10"
app:layout_constraintTop_toBottomOf="@+id/textView16" />
<ImageView
android:id="@+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="@+id/textView18"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView18"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Keep Skin Looking Good"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintStart_toEndOf="@+id/imageView11"
app:layout_constraintTop_toBottomOf="@+id/textView17" />
<TextView
android:id="@+id/textView19"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="If you think you need to be drinking more, here are some tips to increase your fluid intake and reap the benefits of water:"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/textView18" />
<View
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="#CECECE"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toBottomOf="@+id/textView19" />
<ImageView
android:id="@+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="@+id/guideline1"
app:layout_constraintTop_toTopOf="@+id/textView20"
app:srcCompat="@android:drawable/presence_invisible"
app:tint="@color/teal_200" />
<TextView
android:id="@+id/textView20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:text="Have a beverage with every snack or meal, Eat more fruits and vegetables, and Keep a bottle of water with you.
"
android:textColor="#838383"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toEndOf="@+id/imageView12"
app:layout_constraintTop_toBottomOf="@+id/view4" />
<androidx.constraintlayout.widget.Group
android:id="@+id/card_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="textView15,view3,imageView9,textView16,imageView10,textView17,imageView11,textView18,textView19,view4,imageView12,textView20"
tools:visibility="gone" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
你都准备好了!现在是使用JAVA的时候了。
第九步：给ImageView添加OnClick监听器
在这一步，我们将为显示imageView ，设置一个onClick 的监听器。
在你的MainActivity.java 文件中，添加以下几行代码。
public class MainActivity extends AppCompatActivity {
CardView cardView;
ImageView arrow;
Group hiddenGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cardView = findViewById(R.id.base_cardview);
arrow = findViewById(R.id.show);
hiddenGroup = findViewById(R.id.card_group);
arrow.setOnClickListener(view -> {
if(hiddenGroup.getVisibility() == View.VISIBLE){
TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
hiddenGroup.setVisibility(View.GONE);
arrow.setImageResource(android.R.drawable.arrow_down_float);
}
else {
TransitionManager.beginDelayedTransition(cardView, new AutoTransition());
hiddenGroup.setVisibility(View.VISIBLE);
arrow.setImageResource(android.R.drawable.arrow_up_float);
}
});
}
}
让我们来驳斥这段代码。
首先，我们引用了执行动作的视图。这些视图是base_cardView 、show ImageView和card_group 。记住，你不需要再引用所有12个视图。这是因为你已经把它们分组到了card_group 。
接下来，在show ImageView上设置一个onClickListener 。当这个图片被点击时，你会希望显示或隐藏card_group 。
在onClickListener 里面，将CardView 作为根视图来运行过渡，这将使卡片的折叠和扩展变得更漂亮，并给它一个动画效果。
最后，检查该组的可见性是否可见。如果是，你就把它的可见性设置为消失，并把ImageView的图像资源改为arrow_down_float 。这看起来有点像一个显示更多的图标。
否则，如果该组是不可见的，那么你就会想显示它。因此将组的可见性改为可见。将ImageView的图像资源设置为arrow_up_float ，这看起来像一个不显示的图标。
干得好
让我们运行我们的应用程序。我们的可折叠的CardView看起来应该是这样的。
总结
CardView丰富了你的应用程序的用户界面的外观。阴影和圆角的默认实现是一个很大的优点。然而，CardView的设计是为了在其内部容纳一个子视图。
你可以在卡片视图中添加另一个布局来管理子视图，就像我们在这里做的。
