ShapeOfView

教师这门职业要求于一个人的东西很多，其中一条要求自制。在你叫喊以前，先忍耐几秒钟，想一下：你是教师，这样会帮助你压抑一下当时就要发作的脾气，转而心平气和地跟你的学生谈话。——赞可夫

https://github.com/florent37/ShapeOfView

ShapeOfView：为 Android 视图添加酷炫形状的神器

在 Android 开发中，UI 设计效果越来越丰富，单一的矩形控件已经难以满足现代 App 的视觉需求。比如圆角卡片、圆形头像、波浪遮罩、星形按钮……想要让一个 View 显示出各种自定义形状，如果靠手写 Canvas 绘制，工作量巨大、兼容性还难以保障。

@florent37/ShapeOfView 是一个轻量级的开源 Android 库，让你只需几行代码即可让任何 View 拥有圆角、圆形、三角形、切角、波浪、星形等各种炫酷的“外形”，极大地提升 UI 开发效率与界面表现力。

---

ShapeOfView 能做什么？

• 支持多种形状：圆角、圆形、三角形、切角、波浪、星形、椭圆等常见或不常见的形状。
• 支持任意 View：不仅可以包裹 ImageView，还可以包裹 LinearLayout、Button、CardView、ConstraintLayout 等任何 View。
• 易用性极强：直接在 XML 布局中包裹目标 View 并设置 shape 属性即可。
• 性能优秀：底层高效实现，对 UI 性能影响极小。
• 支持阴影：支持为自定义形状添加阴影效果。

---

快速上手

1. 引入依赖

在 build.gradle 中添加：

implementation 'com.github.florent37:shapeofview:1.4.7'

使用最新版本请参考 ShapeOfView Releases。

---

2. 在 XML 中使用

ShapeOfView 提供了多种形状 View，只需将它们像普通布局一样包裹你的控件即可：

圆角布局（RoundRectView）

<com.github.florent37.shapeofview.shapes.RoundRectView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:shape_roundRect_bottomLeftRadius="40dp"
    app:shape_roundRect_topRightRadius="40dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/your_image" />

</com.github.florent37.shapeofview.shapes.RoundRectView>

圆形布局（CircleView）

<com.github.florent37.shapeofview.shapes.CircleView
    android:layout_width="100dp"
    android:layout_height="100dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/your_avatar" />

</com.github.florent37.shapeofview.shapes.CircleView>

波浪布局（WaveView）

<com.github.florent37.shapeofview.shapes.WaveView
    android:layout_width="200dp"
    android:layout_height="100dp"
    app:shape_wave_height="20dp"
    app:shape_wave_length="100dp">

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

</com.github.florent37.shapeofview.shapes.WaveView>

星形布局（StarView）

<com.github.florent37.shapeofview.shapes.StarView
    android:layout_width="120dp"
    android:layout_height="120dp"
    app:shape_star_points="5"
    app:shape_star_innerRadius="30dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/star_content" />

</com.github.florent37.shapeofview.shapes.StarView>

还有更多形状：CutCornerView（切角）、OvalView（椭圆）、TriangleView（三角）、ArcView（弧形）等。

---

高级玩法

• 多边形/自定义形状：可通过 ClipPathManager 实现自定义形状。
• 阴影效果：所有 ShapeOfView 都支持添加阴影属性（app:shadowRadius, app:shadowColor 等）。
• 动态切换形状：可在代码中动态更改属性，实时切换形状。

---

适用场景举例

1. 个性化头像：让头像变为圆形、星形等。
2. 卡片式 UI：实现圆角、切角、波浪等卡片边框样式。
3. Banner/按钮美化：按钮、Banner 加上波浪、圆角，更加吸引眼球。
4. 自定义遮罩：任意 View 加上自定义形状蒙版。

---

与其他方案对比

特性	ShapeOfView	传统自定义View	使用Shape Drawable
易用性	⭐⭐⭐⭐⭐	⭐	⭐⭐⭐
支持形状	多	自定义为主	有限
包裹任何View	是	否	否
阴影支持	是	需手写	有限制
性能	高	高	高

ShapeOfView 关注于“零代码、低门槛”，让设计师和开发者都能轻松美化界面。

---

总结

@florent37/ShapeOfView 是一个极其实用的 Android UI 工具库，可以让你的 App UI 快速实现各种炫酷的形状效果，无需手写复杂自定义 View，非常适合追求美观和高效开发的团队和个人开发者。

项目地址：https://github.com/florent37/ShapeOfView

如果你觉得 ShapeOfView 有用，欢迎为项目点个 ⭐️，让更多开发者受益！