5分钟上手 ArcLayout：Android 弧形裁剪布局快速开始教程

ArcLayout 是一个轻量级 Android 开源库，只需几行 XML 就能为任意 View 添加平滑的弧形裁剪（Arc Crop）效果，是打造 Material Design 风格页面底部弧线过渡、电影应用式海报布局的利器。本教程面向新手，带你 5 分钟完成引入、配置参数和效果验证。

一、ArcLayout 能做什么？

传统的 ImageView 或容器都是直角矩形，而 Material Design 讲究流动感。ArcLayout 通过裁剪路径（ClipPath）技术，让容器的上、下、左、右任意一边变成平滑的圆弧边：

• cropOutside（外弧裁剪）：圆弧向外凸出，像海报底部自然延伸的波浪
• cropInside（内弧裁剪）：圆弧向内凹陷，形成柔和的"兜"状缺口
• 支持 top / bottom / left / right 四个方向的弧线位置
• 配合 android:elevation 可获得带阴影的卡片层次感

项目灵感正来自一款电影院 App 的概念设计——白色内容卡片底部弯曲、与海报图自然衔接，整体视觉更加生动：

二、快速引入 ArcLayout

方式一：添加依赖（参考 README.md 中的 Download 部分）：

compile 'com.github.florent37:arclayout:1.0.3'

方式二：本地模块引入。仓库内已包含完整示例工程，模块结构见 settings.gradle，直接在 build.gradle 中加入：

implementation project(':arclayout')

三、核心属性一览

ArcLayout 的全部 XML 属性定义在 attrs.xml 中，一共只有 3 个，非常好记：

属性	可选值	说明
arc_height	尺寸值，如 90dp	弧线的高度（弯曲深度）
arc_position	top / bottom / left / right	弧线所在边
arc_cropDirection	cropInside / cropOutside	弧线朝内凹还是朝外凸

四、3 步实现弧形效果

第 1 步：在布局文件中声明 ArcLayout

<com.github.florent37.arclayout.ArcLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:arc_cropDirection="cropOutside"
        app:arc_height="90dp"
        android:elevation="5dp">

        <!-- 你的内容 -->

</com.github.florent37.arclayout.ArcLayout>

第 2 步：放入子 View

ArcLayout 是容器，可以包裹 ImageView、图片、按钮等任意内容：

<ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:scaleType="centerCrop"
      android:src="@drawable/road" />

第 3 步：运行查看效果

外弧效果（cropOutside）——容器底部平滑向外鼓出；把方向改为 cropInside 则会变为向内凹陷的弧形。示例工程中的完整用法可参考 arclayout_activity_main.xml，其中还搭配了 KenBurns 动图效果，营造电影海报的沉浸感：

五、工作原理（30 秒了解）

ArcLayout 的源码非常精炼，核心类为 ArcLayout.java，它在 onSizeChanged 时根据 arcPosition + cropDirection 的组合，用 quadTo（二次贝塞尔曲线）绘制出一条裁剪路径，再交由 ClipPathManager.java 应用裁剪。也就是说：

4 个位置 × 2 个方向 = 8 种组合，全部由同一段路径计算逻辑生成，性能开销极低。

六、实战小贴士 🎨

• 想要卡片感：加上 android:elevation="5dp"，弧线边缘会带出柔和阴影，层次感立刻出来
• 底部弧线最常用：arc_position="bottom" + cropOutside 是海报类页面的首选组合
• 配合动图：内嵌 KenBurnsView 等带动效的 View，静态海报也能"活"起来（参考 README 的 KenBurns 章节）
• 调整弯曲深度：arc_height 值越大弧线越夸张，建议从 50dp ~ 90dp 开始微调

总结

项目	说明
引入成本	1 行依赖，纯 XML 配置
核心属性	arc_height、arc_position、arc_cropDirection
适用场景	Material Design 页面、海报卡片、沉浸式 App 首页
源码规模	3 个核心类，易于阅读与二次改造

现在你就可以打开示例 App 运行体验，或在自己的项目里复制第 4 节的三步配置——5 分钟，让页面拥有平滑优雅的弧形设计。✨