在移动应用开发中，卡片式布局（CardView）是非常常用的一种布局方式。而 Material Design 的 CardView 更是让人眼前一亮，具有非常好的用户体验。今天，我们要介绍的是 CardView 的高级用法，即实现卡片折叠效果。
效果展示
先看一下我们要实现的效果：
实现方式
实现卡片折叠效果，需要用到 CardView 的 setRadius() 方法和 setOutlineProvider() 方法。
setRadius()
setRadius() 方法可以设置 CardView 的圆角半径，我们可以根据需要设置不同的半径大小，来实现不同效果的卡片。
setOutlineProvider()
setOutlineProvider() 方法可以设置 CardView 的轮廓提供者，可以用来实现一些高级的效果。
具体实现方式如下：
- 创建一个 CardView，设置 CardView 的半径大小为 20dp。
-- -------------------- ---- -------
----------------------------------
---------------------------
-----------------------------------
------------------------------------
---------------------------
-----------------------
-------------------------------
--------------------------
---- -------- --- ---
------------------------------------- 自定义一个轮廓提供者，实现卡片折叠效果。
class FoldOutlineProvider(private val foldHeight: Int) : ViewOutlineProvider() {
override fun getOutline(view: View, outline: Outline) {
val rect = Rect(0, 0, view.width, view.height)
outline.setRoundRect(rect, view.width.toFloat())
outline.offset(0, foldHeight)
}
}其中，foldHeight 表示卡片折叠的高度。
- 在 CardView 中设置轮廓提供者。
val cardView = findViewById<CardView>(R.id.card_view) cardView.outlineProvider = FoldOutlineProvider(100) cardView.clipToOutline = true
其中，clipToOutline 表示是否要裁剪卡片内容以适应轮廓提供者的形状。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----------------------------------
---------------------------
-----------------------------------
------------------------------------
---------------------------
-----------------------
-------------------------------
--------------------------
---------
-----------------------------------
------------------------------------
---------------------
----------------------- --
-------------------------------------- -------------------- ---- -------
----- --------------------------- --- ----------- ---- - --------------------- -
-------- --- ---------------- ----- -------- -------- -
--- ---- - ------- -- ----------- ------------
-------------------------- ---------------------
----------------- -----------
-
-
--- -------- - --------------------------------------
------------------------ - ------------------------
---------------------- - ----总结
通过设置 CardView 的半径大小和轮廓提供者，我们可以实现卡片折叠效果，为用户带来更好的体验。在实际开发中，可以根据需要，灵活运用 CardView 的高级用法，打造出更加出色的应用界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d6e2095b1f8cacd7222bb