1. 为什么圆角需求看着简单实际做起来却总是不顺手圆角在Android开发里属于那种看起来五分钟能搞定、实际上经常要折腾一下午的需求。卡片要圆角、按钮要圆角、Dialog要圆角、头像要圆角连TabLayout的指示器有时候也要圆角。最近我在做一个界面的视觉改版设计师给的稿子里几乎每个卡片都带8dp圆角个别卡片还要只圆上方两个角。一开始我也觉得这就是给background换一个shape而已但真正落地的时候问题一个接一个冒出来。1.1 圆角控件的真实应用场景先梳理一下我们在开发中会遇到哪些圆角需求不同场景对圆角的要求其实完全不一样场景典型控件圆角要求隐藏难点卡片容器CardView / LinearLayout / FrameLayout四角统一圆角或异形圆角子View可能会凸出圆角边界按钮TextView / Button背景圆角 点击涟漪圆角水波纹还是方形的很违和弹窗Dialog弹窗白色底圆角系统Window背景默认是方形黑边图片/头像ImageView圆角或圆形图片裁剪和内存开销输入框EditText只有边框圆角、内部透明光标、提示文字和圆角的关系要处理每一项需求单独拆开看都不算难但组合在一起时方案选择稍有不慎就会留下隐患。1.2 新手最容易掉进去的三个误区我见过太多同学包括早期的我自己在圆角这件事上踩同样的坑基本可以归纳成三类第一个误区是一个shape打天下。很多人习惯在drawable里写一个rounded_shape.xml需要圆角就设置android:backgrounddrawable/rounded_shape。这种做法的致命问题在于圆角值和View是绑死的得按圆角大小复制N个文件而且shape drawable只能作用在背景上它解决不了图片裁剪、子View凸出、点击涟漪形状这些问题。改一处圆角尺寸你可能要翻好几个xml文件。第二个误区是只看背景圆角不看控件轮廓。最典型的就是给按钮设置了圆角背景但点击时默认的涟漪效果还是矩形的手指按下去的时候能明显看到那个方形水波纹从圆角里溢出来非常掉价。还有设置了圆角背景的LinearLayout里放了一个ImageView图片上下角还是方形的直接戳穿圆角背景。第三个误区是以为设置了ViewOutlineProvider就完事了。这个问题我后面会细讲很多人在API 21之后用setOutlineProvider做圆角结果发现要么没生效、要么阴影怪的离谱根本原因是对outline机制理解不透。这三个误区基本覆盖了圆角需求里90%的坑。所以这篇文章我就围绕怎么选方案怎么快速落地遇到坑怎么排查来写尽量一次性把圆角这件事讲透。2. 主流圆角实现方案对比与选型在动手写代码之前我习惯先把方案摆到桌面上比一比。圆角实现方案大致可以分为五类各有各的适用场景没有银弹。2.1 五种方案的优缺点对比下面这个表格是我在实际开发里总结出来的不敢说绝对权威但至少踩过坑之后回头看维度还是比较全的方案实现方式优点缺点适用场景shape drawablegradientdrawable 的 rounded corner 配置写法简单、零代码只作用于背景异形圆角要维护多个xml无法裁剪子View静态背景、按钮背景CardViewMaterial库自带圆角卡片系统级实现、自带阴影和裁剪依赖Material库圆角样式固定做异形圆角很别扭卡片式列表、商品卡第三方库各种圆角布局库、圆形图片库功能全、API友好项目重量增加遇到特殊需求反而不好改源码图片头像、快速原型ViewOutlineProviderAndroid 5.0原生API裁切轮廓轻量、性能好、可裁剪所有内容API 21才支持低版本要另外处理对背景样式有限制列表卡片、容器裁剪Canvas剪裁自定义View重写dispatchDraw用clipPath/clipOutRect兼容所有版本、逻辑完全可控可能触发软件渲染、有性能风险抗锯齿需要额外处理异形控件、低版本兼容这里额外说一句很多同学会把CardView当作圆角容器的万能解但CardView的本质是一个FrameLayout加圆角裁剪它只保证自己裁剪范围内的内容被切掉。一旦你的子View超出CardView的边界或者你需要在卡片里叠放悬浮按钮CardView的圆角就管不住了。所以我把CardView归为够用但不够灵活的那一类。2.2 我的选型建议两条路线够用就好经过反复折腾我现在的选型策略其实非常简单两条路线第一条路线API 21以上优先用ViewOutlineProvider。它性能好裁剪的是整个控件的绘制内容无论是背景还是子View都会被裁到圆角轮廓里。配合setClipToOutline(true)基本能做到一个工具类解决所有圆角容器。第二条路线API 21以下或者需要兼容老旧设备时用自定义View做Canvas剪裁。虽然性能不如outline但只要你控制好使用范围不要全屏大面积裁实际影响完全可以接受。图片和头像的圆角我倾向于单独处理用BitmapShader配合自定义ImageView这个后面会说。至于第三方库如果你只是为了圆角一个容器就去引一个库我其实不太推荐一来增加依赖体积二来遇到问题你还是要回头理解系统API。一句话总结先搞懂系统原生方案再决定要不要引库。原生方案没有某些人说的那么难用缺的只是正确的用法。3. 一套基于ViewOutlineProvider的通用圆角工具这一节是整个方案的核心。我会直接给出一套可以直接抄走的通用工具类然后解释它的机制、局限和适配细节。3.1 工具代码与基本用法先直接上代码。这是一个基于ViewOutlineProvider的圆角工具类API 21及以上可用public class RoundCornerHelper { /** * param view 需要设置圆角的任意View / ViewGroup * param radiusDp 圆角半径单位dp */ public static void apply(View view, final float radiusDp) { if (view null || Build.VERSION.SDK_INT Build.VERSION_CODES.LOLLIPOP) { return; } final float radiusPx dp2px(view.getContext(), radiusDp); view.setOutlineProvider(new ViewOutlineProvider() { Override public void getOutline(View v, Outline outline) { if (v.getWidth() 0 v.getHeight() 0) { outline.setRoundRect(0, 0, v.getWidth(), v.getHeight(), radiusPx); } else { // 宽高还没测量出来时先给一个空轮廓 outline.setEmpty(); } } }); view.setClipToOutline(true); } private static float dp2px(Context context, float dp) { return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics()); } }调用方法非常直接// 在onCreate或onViewCreated里 RoundCornerHelper.apply(llCard, 8); // llCard 是一个LinearLayout // 或者对按钮 RoundCornerHelper.apply(btnSubmit, 12);很多人在这一步就开始踩坑了我先说两个关键点第一为什么getOutline里要判断宽高是否为0。ViewOutlineProvider的getOutline方法是在View尺寸变化时回调的如果你在onCreate里直接设置当时控件的宽高很可能还是0此时outline会被设成空轮廓表现为圆角没生效、控件整个消失。加了宽高判断之后系统会在layout完成后再次回调圆角就能正常出现。这个细节是我一开始漏掉的后来排查了很久。第二setClipToOutline(true)是裁剪所有子View内容的关键。只设置outline而不开启裁剪那你只是拿到了一个圆角阴影轮廓控件内部绘制的内容仍然是方形的。很多同学只调了setOutlineProvider忘了setClipToOutline结果圆角背景还是方的就是这个原因。3.2 为什么setOutlineProvider有时不生效这个坑特别典型值得单独拿出来说。场景是这样的你给一个LinearLayout设置了圆角背景shape drawable然后又调用了RoundCornerHelper.apply()结果发现圆角没变化或者阴影变得很奇怪。原因在于View的背景drawable也会参与outline的生成。Android的ViewOutlineProvider默认逻辑是如果View有background并且background自带outline那么系统会优先使用背景的outline而不是你设置的Provider返回的轮廓。也就是说当你的背景shape和你的自定义outline不一致时系统可能按背景的形状来生成阴影你的Provider反而被忽略了。这个问题的正确解法是二选一要么统一用代码设置圆角轮廓背景只用纯色或透明要么用shape drawable做背景就别再叠加自定义outline。我现在的习惯是容器圆角全部交给代码背景用ColorDrawable或干脆不设置outline里既管裁剪又管阴影。另外还有一个隐藏问题如果View的背景色需要动态变化在自定义outline方案下你不能再依赖shape去画那个圆角背景而是要用代码设置背景颜色比如view.setBackgroundColor(Color.WHITE)。这样背景虽然是方形的但控件已经被setClipToOutline裁成圆角了视觉上就是圆角背景。3.3 低版本与特殊View的兜底方案上面工具类里我用了一个API 21的提前返回但实际项目如果还要兼容低版本完全放弃又不合适。这里给一个兜底方案继承目标ViewGroup重写dispatchDraw做Canvas裁剪。public class RoundFrameLayout extends FrameLayout { private Path mPath new Path(); private float[] mRadii; public RoundFrameLayout(Context context) { this(context, null); } public RoundFrameLayout(Context context, AttributeSet attrs) { super(context, attrs); } public void setRadius(float radiusDp) { float density getResources().getDisplayMetrics().density; setRadiusInternal(radiusDp * density); } public void setRadiusInternal(float radiusPx) { mRadii new float[]{ radiusPx, radiusPx, radiusPx, radiusPx, radiusPx, radiusPx, radiusPx, radiusPx }; mPath.reset(); invalidate(); } Override protected void dispatchDraw(Canvas canvas) { if (mRadii null) { super.dispatchDraw(canvas); return; } int saveCount canvas.save(); mPath.reset(); mPath.addRoundRect(0, 0, getWidth(), getHeight(), mRadii, Path.Direction.CW); canvas.clipPath(mPath); super.dispatchDraw(canvas); canvas.restoreToCount(saveCount); } }这里有几个细节我必须提醒因为clipPath在硬件加速下不支持抗锯齿API 18以上如果你直接这样写圆角边缘可能能看到锯齿。所以在构造方法里建议加上一行setLayerType(View.LAYER_TYPE_SOFTWARE, null);。但这个设置会带来性能开销不要滥用只在低版本必要的场景下加。clip裁剪的是dispatchDraw的绘制内容所以子View、背景都会被裁掉这点和outline方案一致。但要注意它不能改变系统阴影的形状所以这类View不要设置elevation否则阴影是方形的很突兀。这种方案的性能弱于outline但用于单个卡片、弹窗内容这种低频绘制场景完全没问题。如果放在RecyclerView里大量使用你要重新评估尽量在API 21以上用outline。3.4 涟漪效果与圆角联动按钮的圆角背景和水波纹形状不一致是UI审查里经常被点名的细节。解决方案其实很简单给Button或TextView的background设置一个带圆角的ripple drawable。?xml version1.0 encodingutf-8? ripple xmlns:androidhttp://schemas.android.com/apk/res/android android:color#33000000 item shape android:shaperectangle solid android:color#2196F3 / corners android:radius8dp / /shape /item /ripple如果你的控件用了outline方案background不能随便设置shape那可以换一种思路用addRippleEffect方法动态构造一个ripple drawablepublic static void applyRippleButton(View view, int bgColor, float radiusDp) { if (Build.VERSION.SDK_INT Build.VERSION_CODES.LOLLIPOP) { float radiusPx dp2px(view.getContext(), radiusDp); GradientDrawable pressedDrawable new GradientDrawable(); pressedDrawable.setColor(bgColor); pressedDrawable.setCornerRadius(radiusPx); // mask用于限定水波纹的绘制范围 GradientDrawable mask new GradientDrawable(); mask.setCornerRadius(radiusPx); mask.setColor(Color.BLACK); RippleDrawable rippleDrawable new RippleDrawable( ColorStateList.valueOf(Color.parseColor(#33000000)), pressedDrawable, mask); view.setBackground(rippleDrawable); } }这里的关键是ripple的第三个参数mask它限定了涟漪的绘制轮廓。如果你不传mask系统会用background自身的outline有时候形状对不上所以你最好显式传一个带相同圆角的mask。这也是很多地方我明明设置了圆角背景但水波纹还是方的的根因之一。4. 圆角化过程中的常见坑与我的排查思路代码能跑起来只是第一步。这套方案在我自己项目里也踩了不少坑这里把排查链路记录下来希望能让你少走弯路。4.1 坑一dp转px的隐蔽错误看似最基础的单位转换实际上是最容易出错的点。ViewOutlineProvider里outline.setRoundRect的radius参数是像素很多人随手写了一个很小的值比如直接setRoundRect(..., 8)实际效果是8px在高密度屏幕上小得几乎看不见。排查思路如果你发现圆角不明显先确认是不是写了8px而不是8dp。统一用dp2px方法转换不要在业务代码里到处手动乘density。另外在json动态下发圆角值的时候接口给的一般是dp值前端转换逻辑要跟工具类保持一致不然不同分辨率手机上圆角大小不一致视觉验收必挂。4.2 坑二子View凸出圆角边界父容器裁剪失效这个是最让人头大的问题。你给父容器设置了outline圆角子View还是在四个角上探出来圆角像是假的。排查链路是这样的先确认父容器是否设置了setClipToOutline(true)。没有设置的话outline只影响阴影不影响内容裁剪这是最常见的原因。再看父容器是否被设了setClipChildren(false)。有些同学为了实现阴影、悬浮或动画效果会关闭父容器的children裁剪但这样就相当于告诉系统子View可以超出我的边界绘制outline裁剪自然就失效了。如果是这个原因先把clipChildren改回true。如果子View是ImageView要检查图片加载库有没有自带centerCrop且不做圆角裁剪的默认行为。Glide默认不会帮你裁剪图片本身是矩形的超出父容器圆角边界就会露出来。最终解决方案并不复杂父容器开clipToOutline和clipChildren子View不要做任何超出父容器边界的动画如果一定要有子View超出边界的效果那就应该把该子View单独放进另一个圆角裁剪容器而不是依赖父容器统一裁。4.3 坑三RecyclerView里圆角卡片滑动掉帧这个问题是我在列表页遇到的。一屏7个圆角卡片上下滑动时明显感到掉帧尤其是旧机型上掉帧感更明显。原因出在性能上。ViewOutlineProvider方案本身性能不差但如果你在这些卡片里混用了Canvas剪裁方案或者给每个卡片设置了软件层RecyclerView的复用机制会放大性能问题item滑入滑出时软件渲染层反复创建和销毁GPU负担直接拉满。我的排查和处理方法列表item里的圆角优先全部使用outline方案不要为单个item用drawable圆角背景clipPath的混合方案。打开开发者选项里的显示硬件层更新观察哪些view闪烁能快速定位到是不是软件层在作祟。如果还是卡尝试给item根布局设置setLayerType(View.LAYER_TYPE_HARDWARE, null)把整块item离屏渲染滑动性能通常会有明显改善。尽量不要在item里写clipPath在硬件加速下clipPath既不支持抗锯齿又容易导致渲染路径过度复杂。4.4 坑四只圆上方两个角的写法与适配设计师经常说这个卡片只要上面圆角下面直切。GradientDrawable的setCornerRadii方法接受8个float值顺序是左上x、左上y、右上x、右上y、右下x、右下y、左下x、左下y。很多人写错顺序导致圆角跑到了对角线方向。GradientDrawable drawable new GradientDrawable(); drawable.setColor(Color.WHITE); drawable.setCornerRadii(new float[]{ radius, radius, // 左上 radius, radius, // 右上 0, 0, // 右下 0, 0 // 左下 });如果你用的是outline方案也可以直接对Outline调用某种异形轮廓方法不过Outline的API没有现成的只圆两个角实现起来比较绕。我的建议是异形圆角一律用GradientDrawable画背景单独给形状不一样的地方用自定义View裁剪。比如上半圆角下半直角完全可以拆成两个区域分别处理。表格整理一下排查思路现象大概率原因快速解法圆角太小/看不见半径用了px没转dp用dp2px统一转换子View凸出圆角clipToOutline没开或clipChildren被关setClipToOutline(true)背景圆角但涟漪是方的ripple缺少mask显式设置圆角mask阴影是方形的只设置了背景没设置outline使用outline方案设置outline后整个View消失getOutline返回空轮廓且宽高为0判断宽高大于0再设置5. 实战落地四个场景下的扩展做法工具方法有了接下来把常见的场景走一遍这部分内容我直接按实际开发中的优先级来安排。5.1 Dialog弹窗圆角化Dialog弹窗要圆角第一反应是给dialog的contentView设置圆角背景。但实际效果经常是弹窗周围有一圈黑色或白色的方形边框圆角像是被包在里面。原因在于Dialog的Window背景默认是矩形。正确做法是在onCreateDialog或DialogFragment的onActivityCreated里设置window背景透明再让内容布局自身绘制圆角Dialog dialog new Dialog(context); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); Window window dialog.getWindow(); if (window ! null) { window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); } dialog.setContentView(contentView);这样内容View的圆角才能真正露出来而不是被系统Window背景挡掉。如果弹窗内容里还有列表列表滚动到顶部或底部也要做圆角遮罩不然item会顶到弹窗的直角上。处理方式是在列表外再套一层上面的RoundFrameLayout或者在列表滚动监听里动态设置圆角。5.2 图片与头像圆角BitmapShader方案容器圆角可以通过outline裁掉图片的方形内容但头像圆形、图片加载时的圆角裁剪我更推荐用BitmapShader直接画因为图片加载库的transform虽然方便但每次重新加载都会多一次bitmap处理大图场景内存开销不可忽略。一个最简洁的圆形头像ImageView核心代码public class RoundImageView extends AppCompatImageView { private Paint mPaint; private BitmapShader mShader; private float mRadius; public RoundImageView(Context context, AttributeSet attrs) { super(context, attrs); mPaint new Paint(Paint.ANTI_ALIAS_FLAG); } Override protected void onDraw(Canvas canvas) { BitmapDrawable drawable (BitmapDrawable) getDrawable(); if (drawable null) { super.onDraw(canvas); return; } Bitmap bitmap drawable.getBitmap(); if (mShader null || mShader.getBitmap() ! bitmap) { mShader new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); mPaint.setShader(mShader); } // 根据控件宽高设置缩放避免图片拉伸变形 Matrix matrix new Matrix(); float scale Math.max(getWidth() * 1.0f / bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight()); matrix.setScale(scale, scale); mShader.setLocalMatrix(matrix); RectF rectF new RectF(0, 0, getWidth(), getHeight()); canvas.drawRoundRect(rectF, mRadius, mRadius, mPaint); } public void setRadius(float radiusDp) { this.mRadius radiusDp * getResources().getDisplayMetrics().density; invalidate(); } }这段代码的核心思路是用Shader而不是裁剪来实现圆角。裁剪在边缘处容易抗锯齿不足Shader直接绘制圆角矩形则是像素级的渲染边缘更平滑而且不需要额外创建bitmap副本内存友好。注意BitmapShader的bitmap如果被复用要重新设置Shader否则会出现图片错乱。5.3 动态圆角与属性动画联动有些场景需要圆角半径动态变化比如播放器进入全屏时角落从圆角变直角或者卡片展开时圆角逐渐变小。要实现这种效果只要让outline能够通过invalidateOutline()重新刷新就行。// 动画过程中不断更新圆角值 ValueAnimator animator ValueAnimator.ofFloat(24f, 0f); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { Override public void onAnimationUpdate(ValueAnimator animation) { float radius (float) animation.getAnimatedValue(); layout.setOutlineProvider(new ViewOutlineProvider() { Override public void getOutline(View v, Outline outline) { outline.setRoundRect(0, 0, v.getWidth(), v.getHeight(), dp2px(layout.getContext(), radius)); } }); layout.invalidateOutline(); // 关键 } }); animator.setDuration(300).start();这里有个细节需要注意每次动画帧都new一个ViewOutlineProvider其实没什么必要可以在动画开始前把Provider设置为读取一个可变字段然后只在动画里改字段并调用invalidateOutline()即可。layout.setOutlineProvider(new ViewOutlineProvider() { Override public void getOutline(View v, Outline outline) { outline.setRoundRect(0, 0, v.getWidth(), v.getHeight(), parameterProvider.getRadiusPx()); } }); // 动画中 parameterProvider.setRadiusPx(animatedPx); layout.invalidateOutline();5.4 圆角加边框的细节UI稿上常见的圆角卡片细边框也需要单独注意。如果你用shape drawable可以同时设置corners和stroke看起来很简单。但如果你的容器是用outline方案边框就不能写在drawable里因为控件内容已经被裁剪成圆角drawable的方形描边会在角落露出来。正确处理方式有两种第一种用GradientDrawable同时画圆角背景描边并设置给View的background此时不需要outline背景本身自带圆角形状。缺点是子View不会被背景裁剪如果子View超出背景你还要叠一个clip。GradientDrawable drawable new GradientDrawable(); drawable.setCornerRadius(radiusPx); drawable.setStroke(strokeWidthPx, strokeColor); drawable.setColor(bgColor); view.setBackground(drawable);第二种容器仍然用outline方案做裁剪边框单独用一个装饰View或外层的边框View来实现也就是内容圆角 边框层圆角叠加。这种方式更灵活适合边框粗细或颜色要动态变化的场景。写在最后我实测下来的几个经验从我这段时间的实际使用来看圆角控件的简单快速实现其实讲究一个提前规划先想清楚你的控件是要被裁内容、改背景还是加阴影再决定用outline还是drawable还是Canvas裁剪。不要上来就套模板否则后期改设计稿时各种边界问题会让你生不如死。最后再分享一个小技巧如果你要把某个ViewGroup整体圆角化并且里面包含ConstrainLayout建议直接在最外层包一层专用容器做裁剪而不要试图在ConstrainLayout内部自己处理裁剪。因为ConstrainLayout内部绘制层级比较复杂outline裁剪偶尔会漏掉某些绘制在兄弟层级之外的子View。这种包一层容器的方式用下来稳定省心而且不影响内部布局约束。希望这篇内容能帮你把圆角这个看似简单、实则细节满天飞的需求一次做到位。