在前端开发中，卡片布局是经常用到的一种布局方式。而在 Material Design 中，卡片布局被广泛应用在各种场景中，比如展示新闻、商品、活动等信息。在 Android 中，ConstraintLayout 是其中一种流行的布局方式，它能够快速、灵活地实现复杂的界面布局。本文将介绍如何使用 ConstraintLayout 制作 Material Design 中的 Card 布局。
1. 背景知识
在介绍如何使用 ConstraintLayout 制作 Card 布局之前，我们需要了解一些基本的概念和术语：
- ConstraintLayout：是一种灵活的布局方式，在 Android Studio 中可视化操作起来比较方便，它可以通过添加约束关系实现界面布局。
- Guideline：是 ConstraintLayout 中一种特殊的跟随布局，其本质上是一个不可见的参考线。
- Margin：是指控件与其父布局或其他控件之间的空隙距离。
- Elevation：是指控件在 Z 轴上的高度，决定了控件所在位置的层次关系，高于其他控件的控件会覆盖低于它的控件。
2. 制作 Card 布局
首先，我们需要创建一个新的布局文件，比如 card_item.xml，然后在文件中添加一个 ConstraintLayout，作为 Card 的主布局容器。
-- -------------------- ---- ------- ----- ------------- ------------------ -------------------------------------------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------ ----------------------- ----------------------------------------- ----------------------- ---- ----- --- ---- ------- ---- --- ----------------------------------------------------展开代码
在 ConstraintLayout 中，我们添加了一些属性来配置 Card 的样式，比如 elevation 设置 Card 的高度，background 设置 Card 的背景颜色，padding 设置 Card 内容与边框之间的间距。接下来，我们需要向 Card 中添加内容。
2.1. 添加 Card 图片
在 Material Design 的 Card 布局中，通常需要展示一张图片作为 Card 的主视觉元素。我们可以使用 ImageView 来实现这个效果。
-- -------------------- ---- ------- ---------- --------------------------------- -------------------------- ----------------------------- ------------------------------ -------------------------------- --------------------------------------------------------- ----------------------------------------- -----------------------------------------------展开代码
ImageView 的属性设置如下：
layout_width和layout_height设置为 0dp，表示占满剩余空间。scaleType设置为 centerCrop，表示图片会铺满整个 ImageView 区域并居中显示，可能会产生裁剪。src是需要展示的图片资源。layout_constraintBottom_toTopOf表示 ImageView 底部的约束是 Card 标题的顶部。layout_constraintEnd_toEndOf表示 ImageView 右侧的约束是父布局的右侧。layout_constraintStart_toStartOf表示 ImageView 左侧的约束是父布局的左侧。
2.2. 添加 Card 标题
在 Card 中有一个必要的元素是标题，通常作为 Card 的分隔线，使内容更加清晰明了。我们可以使用 TextView 来实现这个效果。
-- -------------------- ---- ------- --------- --------------------------------- -------------------------- ------------------------------------ ------------------ ------ ----------------------- ------------------------ ----------------------- -------------------- --------------------------------------------------------------- ----------------------------------------- --------------------------------------------- -----------------------------------------------------------展开代码
TextView 的属性设置如下：
layout_width设置为 0dp，表示占满剩余空间。layout_height设置为 wrap_content，表示根据内容自适应高度。text是需要展示的文本内容。textSize和textStyle分别设置字体大小和样式。ellipsize设置为 end，表示当文本内容过长时，省略号出现在末尾。maxLines设置为 2，表示最多显示两行文本。layout_constraintBottom_toTopOf表示 TextView 底部的约束是 Card 描述的顶部。layout_constraintStart_toStartOf和layout_constraintEnd_toEndOf分别表示 TextView 左侧和右侧的约束是父布局的左侧和右侧。layout_constraintTop_toBottomOf表示 TextView 顶部的约束是 Card 图片的底部。
2.3. 添加 Card 描述
Card 中除了标题之外，还需要展示一些详细的描述信息。我们同样可以使用 TextView 来实现这个效果。
-- -------------------- ---- ------- --------- --------------------------------------- -------------------------- ------------------------------------ ------------------ ------------ ----------------------- ----------------------- -------------------- ----------------------------------------------------------- ----------------------------------------- --------------------------------------------- -----------------------------------------------------------展开代码
TextView 的属性设置和标题类似，不同的地方在于它的顶部约束是标题的底部，底部约束是 Card 操作区域的顶部。
2.4. 添加 Card 操作区域
最后，我们需要添加一些操作按钮，比如“购买”、“分享”等等。在操作区域中，通常使用一些 Material Design 的元素，比如 FloatingActionButton、Button、Menu 等。
-- -------------------- ---- ------- ------- -------------------------------------- -------------------------- ------------------------------------ ------------------------------ -------------------------------------------------- ----------------- ---- ---------------------------------------- ----------------------------------------------- --------------------------------------------------------------- --------------------------------------------- ----------------------------------------------------------------- ------- ---------------------------------------- -------------------------- ------------------------------------ --------------------------------------------------- -------------------- ---------------------------------------- ----------------------------------------------- ----------------------------------------- ------------------------------------------------------------- -----------------------------------------------------------------展开代码
在这个示例中，我们使用了两个 Button，分别代表购买和分享操作。Button 的属性设置如下：
layout_width设置为 0dp，表示占满剩余空间。layout_height设置为 wrap_content，表示根据内容自适应高度。text是需要展示的文本内容。background设置按钮的背景颜色。textColor设置按钮的文字颜色。layout_marginEnd设置按钮之间的间距。layout_constraintBottom_toBottomOf表示按钮底部的约束是父布局的底部。layout_constraintEnd_toEndOf表示右侧按钮右侧的约束是父布局的右侧。layout_constraintStart_toStartOf和layout_constraintStart_toEndOf分别表示左侧按钮左侧的约束是父布局的左侧，右侧按钮左侧的约束是左侧按钮的右侧。layout_constraintTop_toBottomOf表示按钮顶部的约束是 Card 描述的底部。
3. 总结
在本篇文章中，我们介绍了如何使用 ConstraintLayout 制作 Material Design 中的 Card 布局，其中涵盖了 ImageView、TextView、Button 等常见控件的使用方法。当然，这只是一种简单的实现方式，根据具体需求还可以做出更加复杂的 Card 布局，比如添加 Chip、ProgressBar 等控件，实现更加丰富的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c88bb15ad90b6d0413e3f8
