到处都是圆角

2014-08-21

圆角的应用范围比较广，相比于直角，圆角的显示效果确实较好一点。但圆角并不是android的固有技能，不是所有的view都能通过简单的设置来显示圆角，需要有一种办法来创建一种什么场合都能使用的圆角。

以下以一个通用的圆角布局为例，创建一个圆角布局。

public class RoundLayout extends LinearLayout {

 private Paint boarderPaint;
 private Paint canvasPaint;
 private int m_radius;
 private int width;
 private int height;
 private int x;
 private int y;

 public RoundLayout(Context context, int radius) {
 super(context);

 //以下三个值需要在使用前设置 
 // m_radius
 // width
 // height

 boarderPaint = new Paint();
 boarderPaint.setColor(Color.WHITE);
 boarderPaint.setAntiAlias(true);
 boarderPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

 canvasPaint = new Paint();
 canvasPaint.setXfermode(null);
 }

 @Override
 public void draw(Canvas canvas) {
 x = this.getScrollX();
 y = this.getScrollY();
 Bitmap bitmap = Bitmap.createBitmap(x + width, y + height, Config.ARGB_8888);
 Canvas canvas2 = new Canvas(bitmap);
 super.draw(canvas2);
 drawLeftUp(canvas2);
 drawRightUp(canvas2);
 drawLeftDown(canvas2);
 drawRightDown(canvas2);

 int sc = canvas.saveLayer(x, y, x + width, y + height, null, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);

 canvas.drawBitmap(bitmap, 0, 0, canvasPaint);
 bitmap.recycle();
 canvas.restoreToCount(sc);
 }

 private void drawLeftUp(Canvas canvas) {
 Path path = new Path();
 path.moveTo(x, m_radius);
 path.lineTo(x, y);
 path.lineTo(m_radius, y);
 path.arcTo(new RectF(x, y, x + m_radius * 2, y + m_radius * 2),->−DVFMTSC>−90,->−DVFMTSC>−90);
 path.close();
 canvas.drawPath(path, boarderPaint);
 }

 private void drawLeftDown(Canvas canvas) {
 Path path = new Path();
 path.moveTo(x, y + height->−DVFMTSC>− m_radius);
 path.lineTo(x, y + height);
 path.lineTo(x + m_radius, y + height);
 path.arcTo(new RectF(x, y + height->−DVFMTSC>− m_radius * 2, x + m_radius * 2, y + height), 90, 90);
 path.close();
 canvas.drawPath(path, boarderPaint);
 }

 private void drawRightDown(Canvas canvas) {
 Path path = new Path();
 path.moveTo(x + width->−DVFMTSC>− m_radius, y + height);
 path.lineTo(x + width, y + height);
 path.lineTo(x + width, y + height->−DVFMTSC>− m_radius);
 path.arcTo(new RectF(x + width->−DVFMTSC>− m_radius * 2, y + height->−DVFMTSC>− m_radius * 2, x + width, y + height), 0, 90);
 path.close();
 canvas.drawPath(path, boarderPaint);
 }

 private void drawRightUp(Canvas canvas) {
 Path path = new Path();
 path.moveTo(x + width, y + m_radius);
 path.lineTo(x + width, y);
 path.lineTo(x + width->−DVFMTSC>− m_radius, y);
 path.arcTo(new RectF(x + width->−DVFMTSC>− m_radius * 2, y, x + width, y + m_radius * 2),->−DVFMTSC>−90, 90);
 path.close();
 canvas.drawPath(path, boarderPaint);
 }

挑其中一个方法来解析：

private void drawLeftUp(Canvascanvas){
  Pathpath=newPath();
  path.moveTo(x,m_radius);
  path.lineTo(x,y);
  path.lineTo(m_radius,y);
  path.arcTo(newRectF(x,y,x+m_radius*2,y+m_radius*2),<!DVFMTSC>−90,<!DVFMTSC>−90);
  path.close();
  canvas.drawPath(path,boarderPaint);
}

这里定义了一个路径为

此时，(x,y)=(0,0)，因为其其是使用getScrollX()与getScrollY()获取的。

然后通过RectF描述的矩形，使用arcTo截取椭圆的一段。

续上，如图，RectF定义的矩形为蓝色部分，通过arcTo方法，可以获取由此矩形内的一个椭圆的一段边，如

1	path.arcTo(new RectF(x, y, x + m_radius * 2, y + m_radius * 2), −90, −90);

代表的是从-90开始，旋转-90度（顺时针旋转为正，逆时针旋转为负，起始位置如是）。

如此就可以描述一条圆弧。

draw方法中定义了一个Canvas

canvas2


其表示将将要画的东西画到一个bitmap中，将以上路径定义好后，就可以将此路径画进画布，即bitmap中

```javacanvas.drawPath(path, boarderPaint);

其中，用来画线的画笔boarderPaint设置了一个参数：

PorterDuffXfermode(PorterDuff.Mode.DST_OUT));```


关于PorterDuff.Mode，可以参考[ http://www.demonk.cn/?p=286](http://www.demonk.cn/?p=286 "PorterDuff.Mode 说明")。

DST_OUT就是取下层绘制非交集部分,就是取圆弧里面的。这样上左，上右，下左，下右都以这种形式进行裁剪后，就可以在bitmap里拿到一个圆角的矩形view，然后 通过

```java
canvas.drawBitmap(bitmap, 0, 0, canvasPaint);

把内存中的bitmap画到低级view的画布当中就可以了。这样就能实现无论什么 view都能圆角的效果。

需要说明一点的是，这种做法虽然较通用，但因为在draw方法里做了不少操作，需要先画到bitmap中再画到canvas中，性能肯定会受到一定的影响，而且相应的内存占用也会高一点，有部分机型上可能存在兼容问题，如显示的效果变模糊等，这都与bitmap不能说没关系。

======更新于2017-5-12=======
以上的方法用了几年，感觉良好，但最近在测试android7.0时，只要往layout中放入一个webview，webview就会出现很”卡“的情况，跟进了一下，发现其实也不是真的页面卡，而是因为重绘的过程里没把webview给更新到，所以看上去就是卡住不动了，事实上layout的draw是有绘制动作的。

目前的显示样式结构是这样的:

现在是在画webview时出问题了。

查看我们覆盖的draw方法，android已经不推荐我们去做这个修改了，的确这个方法是整个view绘制的入口，影响有点大。

/**
 * Manually render this view (and all of its children) to the given Canvas.
 * The view must have already done a full layout before this function is
 * called.  When implementing a view, implement
 * {@link #onDraw(android.graphics.Canvas)} instead of overriding this method.
 * If you do need to override this method, call the superclass version.
 *
 * @param canvas The Canvas to which the View is rendered.
 */
@CallSuper
public void draw(Canvas canvas) {

查看自定义view的重绘过程可知（http://blog.csdn.net/androidxiaogang/article/details/51895794) ，我们其实并不需要在draw上进行绘制，因为我们要画的其实是标题和webview这两个子view而已，作为窗口的layout已经被设置成了透明了。

按着这个思路，只针对子view进行重绘，在draw里，子view的绘制发生在：

1 2	// Step 4, draw the children dispatchDraw(canvas);

于是，只需要覆盖这个方法即可。修改后代码如下：

protected void dispatchDraw(Canvas canvas) {
    canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), null, Canvas.ALL_SAVE_FLAG);
    super.dispatchDraw(canvas);

    //使用PorterDuffXfermode裁剪重画左右上下圆角
            //四个方法以前的实现一致
    drawLeftUp(canvas);
    drawRightUp(canvas);
    drawLeftDown(canvas);
    drawRightDown(canvas);

    canvas.restore();
}