如何在Android中实现圆形阴影CircleImageView OutlineProvider原理与elevation实战【免费下载链接】CircleImageViewA circular ImageView for Android项目地址: https://gitcode.com/gh_mirrors/ci/CircleImageViewCircleImageView 是一款轻量级 Android 圆形图片控件天生适合做用户头像。它通过内部的 OutlineProvider 定义圆形轮廓再配合系统的elevation属性就能轻松让头像带上一圈自然的圆形投影。本文从原理到实战带你一次性搞定 Android 圆形阴影效果。上图正是示例工程 sample/src/main/res/drawable-nodpi/hugh.png 中的头像素材被 CircleImageView 裁剪成圆形后呈现出干净的圆边效果。为什么圆形头像需要阴影在 Material Design 中阴影elevation是层级的语言头像卡片微微浮起视觉焦点立刻就有了。但问题来了普通ImageView设置android:elevation后阴影是矩形的——圆形头像套着方方正正的投影非常违和。而 CircleImageView 的答案是让系统阴影跟着轮廓Outline走轮廓是圆的阴影自然就是圆的。快速上手一行依赖搞定圆形头像在模块build.gradle中加入依赖即可implementation de.hdodenhof:circleimageview:3.1.0布局文件中直接使用控件并通过app:civ_前缀的自定义属性配置边框属性定义见 attrs.xmlde.hdodenhof.circleimageview.CircleImageView android:idid/profile_image android:layout_width96dp android:layout_height96dp android:srcdrawable/profile app:civ_border_width2dp app:civ_border_color#FF000000/四个常用属性一览属性作用civ_border_width边框宽度dpciv_border_color边框颜色civ_border_overlay边框是否覆盖在图片之上civ_circle_background_color圆形背景色核心原理OutlineProvider 如何让阴影变成圆形 秘密藏在 CircleImageView.java 里整个过程分两步第一步安装圆形轮廓提供者。控件在初始化时检测系统版本只要 API ≥ 21Lollipop就把自己交给一个自定义的 OutlineProvider 管理轮廓见 init() 方法。第二步告诉系统我的轮廓是一个正圆。内部类OutlineProvider重写了getOutline()见 源码 L496-L510先取出边框区域mBorderRect取整为Rect再调用outline.setRoundRect(bounds, radius)把圆角半径设为宽度的一半——一个圆角矩形当半径等于半边长时就变成了一个完美的圆如果调用过setDisableCircularTransformation(true)则退回ViewOutlineProvider.BACKGROUND轮廓跟随背景3.0.2 版本还专门修复了这里禁用后轮廓错误的问题。理解到这里就通了elevation 的阴影形状完全由 Outline 决定。CircleImageView 不需要自己画任何阴影它只是把轮廓是圆这件事告诉了系统剩下交给硬件加速的渲染管线。这也是它性能极佳的原因之一——不复制位图、不用 clipPath。实战一行 elevation 让头像浮起来在上面的控件上加上android:elevation即可例如android:elevation8dp完整的示例页面可以对照 activity_main.xml它用上下两个深浅背景分别展示边框颜色对比结构一目了然。几个让阴影更好看的参数建议elevation 取值 4dp ~ 12dp太小看不见太大会像漂浮的贴纸给头像四周留 padding阴影会绘制在控件边界之外父布局或自身留出空间避免投影被裁掉深色背景用大一点、浅色背景用小一点浅底上阴影对比弱需要稍高的 elevation 才明显。⚠️ 避坑指南阴影不出现的常见原因系统版本低于 21Outline 机制是 Lollipop 才有的低版本不会报错只是没有阴影。代码里Build.VERSION_CODES.LOLLIPOP的判断源码 L135正是为此服务ScaleType 被强行修改CircleImageView 固定使用CENTER_CROP改动会抛异常setScaleType 方法图片加载库的淡入动画配合 Picasso 请用noFade()Glide 请用dontAnimate()否则圆形边缘会闪点击区域也是圆的从 3.0 起触摸事件被限制在圆形范围内onTouchEvent中的inTouchableArea判断圆外点击会穿透这是设计行为而非 Bug。关键文件速查文件说明CircleImageView.java核心控件圆形绘制 OutlineProvider 阴影轮廓attrs.xmlciv_自定义属性声明activity_main.xml官方示例布局hugh.png示例头像素材MainActivity.java示例入口 Activity小结圆形 BitmapShader 画圆圆形阴影 OutlineProvider 定轮廓二者各司其职阴影本身一行elevation就够重点在轮廓与留白依赖极少、零绘制开销是 Android 头像场景的终极轻量方案。【免费下载链接】CircleImageViewA circular ImageView for Android项目地址: https://gitcode.com/gh_mirrors/ci/CircleImageView创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在Android中实现圆形阴影：CircleImageView OutlineProvider原理与elevation实战
如何在Android中实现圆形阴影CircleImageView OutlineProvider原理与elevation实战【免费下载链接】CircleImageViewA circular ImageView for Android项目地址: https://gitcode.com/gh_mirrors/ci/CircleImageViewCircleImageView 是一款轻量级 Android 圆形图片控件天生适合做用户头像。它通过内部的 OutlineProvider 定义圆形轮廓再配合系统的elevation属性就能轻松让头像带上一圈自然的圆形投影。本文从原理到实战带你一次性搞定 Android 圆形阴影效果。上图正是示例工程 sample/src/main/res/drawable-nodpi/hugh.png 中的头像素材被 CircleImageView 裁剪成圆形后呈现出干净的圆边效果。为什么圆形头像需要阴影在 Material Design 中阴影elevation是层级的语言头像卡片微微浮起视觉焦点立刻就有了。但问题来了普通ImageView设置android:elevation后阴影是矩形的——圆形头像套着方方正正的投影非常违和。而 CircleImageView 的答案是让系统阴影跟着轮廓Outline走轮廓是圆的阴影自然就是圆的。快速上手一行依赖搞定圆形头像在模块build.gradle中加入依赖即可implementation de.hdodenhof:circleimageview:3.1.0布局文件中直接使用控件并通过app:civ_前缀的自定义属性配置边框属性定义见 attrs.xmlde.hdodenhof.circleimageview.CircleImageView android:idid/profile_image android:layout_width96dp android:layout_height96dp android:srcdrawable/profile app:civ_border_width2dp app:civ_border_color#FF000000/四个常用属性一览属性作用civ_border_width边框宽度dpciv_border_color边框颜色civ_border_overlay边框是否覆盖在图片之上civ_circle_background_color圆形背景色核心原理OutlineProvider 如何让阴影变成圆形 秘密藏在 CircleImageView.java 里整个过程分两步第一步安装圆形轮廓提供者。控件在初始化时检测系统版本只要 API ≥ 21Lollipop就把自己交给一个自定义的 OutlineProvider 管理轮廓见 init() 方法。第二步告诉系统我的轮廓是一个正圆。内部类OutlineProvider重写了getOutline()见 源码 L496-L510先取出边框区域mBorderRect取整为Rect再调用outline.setRoundRect(bounds, radius)把圆角半径设为宽度的一半——一个圆角矩形当半径等于半边长时就变成了一个完美的圆如果调用过setDisableCircularTransformation(true)则退回ViewOutlineProvider.BACKGROUND轮廓跟随背景3.0.2 版本还专门修复了这里禁用后轮廓错误的问题。理解到这里就通了elevation 的阴影形状完全由 Outline 决定。CircleImageView 不需要自己画任何阴影它只是把轮廓是圆这件事告诉了系统剩下交给硬件加速的渲染管线。这也是它性能极佳的原因之一——不复制位图、不用 clipPath。实战一行 elevation 让头像浮起来在上面的控件上加上android:elevation即可例如android:elevation8dp完整的示例页面可以对照 activity_main.xml它用上下两个深浅背景分别展示边框颜色对比结构一目了然。几个让阴影更好看的参数建议elevation 取值 4dp ~ 12dp太小看不见太大会像漂浮的贴纸给头像四周留 padding阴影会绘制在控件边界之外父布局或自身留出空间避免投影被裁掉深色背景用大一点、浅色背景用小一点浅底上阴影对比弱需要稍高的 elevation 才明显。⚠️ 避坑指南阴影不出现的常见原因系统版本低于 21Outline 机制是 Lollipop 才有的低版本不会报错只是没有阴影。代码里Build.VERSION_CODES.LOLLIPOP的判断源码 L135正是为此服务ScaleType 被强行修改CircleImageView 固定使用CENTER_CROP改动会抛异常setScaleType 方法图片加载库的淡入动画配合 Picasso 请用noFade()Glide 请用dontAnimate()否则圆形边缘会闪点击区域也是圆的从 3.0 起触摸事件被限制在圆形范围内onTouchEvent中的inTouchableArea判断圆外点击会穿透这是设计行为而非 Bug。关键文件速查文件说明CircleImageView.java核心控件圆形绘制 OutlineProvider 阴影轮廓attrs.xmlciv_自定义属性声明activity_main.xml官方示例布局hugh.png示例头像素材MainActivity.java示例入口 Activity小结圆形 BitmapShader 画圆圆形阴影 OutlineProvider 定轮廓二者各司其职阴影本身一行elevation就够重点在轮廓与留白依赖极少、零绘制开销是 Android 头像场景的终极轻量方案。【免费下载链接】CircleImageViewA circular ImageView for Android项目地址: https://gitcode.com/gh_mirrors/ci/CircleImageView创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考