├── .gitattributes ├── .gitignore ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── ybao │ │ └── rf │ │ └── ApplicationTest.java │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── ybao │ │ │ └── rf │ │ │ ├── MainActivity.java │ │ │ └── RoundAngleFrameLayout.java │ └── res │ │ ├── layout │ │ └── activity_main.xml │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── img_topbox_bg_r.jpg │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxxhdpi │ │ └── ic_launcher.png │ │ ├── values-w820dp │ │ └── dimens.xml │ │ └── values │ │ ├── attrs.xml │ │ ├── colors.xml │ │ ├── dimens.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── com │ └── ybao │ └── rf │ └── ExampleUnitTest.java ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Built application files 2 | *.apk 3 | *.ap_ 4 | 5 | # Files for the Dalvik VM 6 | *.dex 7 | 8 | # Java class files 9 | *.class 10 | 11 | # Generated files 12 | bin/ 13 | gen/ 14 | 15 | # Gradle files 16 | .gradle/ 17 | build/ 18 | /*/build/ 19 | 20 | # Local configuration file (sdk path, etc) 21 | local.properties 22 | 23 | # Proguard folder generated by Eclipse 24 | proguard/ 25 | 26 | # Log Files 27 | *.log 28 | 29 | #.idea 30 | .idea/ 31 | *.iml 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##android 通用圆角控件 2 | 3 | 圆角控件就是对 View的Canvas进行改变轮廓的处理 4 | 5 | 改变轮廓两种方式: 6 | 1.剪切(clip()) 7 | 剪切clip是对画布进行剪切,只对剪切后的绘制起效果。 8 | ps:Canvas的图形变换平移、放缩、旋转、错切、裁剪都是只对后面的绘制起效果, 9 | 对应Matrix中preXXX,Matrix变换分为preXXX,postXXX,setXXX;preXXX将新的变换操作插到队列前,postXXX将新的变换操作插到队列后,setXXX是先reset()清除前面的变换操作并设置新的变换操作,且都是只对后面的绘制起效果。 10 | Canvas的save,restore对变换操作进行保存,和还原,带参的restoreToCount(save()),可以指定还原到第几次保存的状态。 11 | 12 | 13 | 2.遮罩(PorterDuffXfermode) 14 | 安卓提供多种遮罩模式选择 15 | ![这里写图片描述](http://img.blog.csdn.net/20160420054812946) 16 | 遮罩是设置在Paint上的只对 当前绘制的操作有效 17 | 18 | 19 | 20 | ####下面利用这两种方式实现圆角控件 21 | 22 | onDraw 23 | onDrawForeground 24 | dispatchDraw 25 | 这三个回调函数都是可以操作View的Canvas;onDraw,onDrawForeground这两个是在View绘制背景,自身内容和前景时回调的 只有设置了背景、自身内容、前景时才会配回调,并且对这两个函数的参数Canvas上的操作,只对背景、自身内容、前景有效。 26 | dispatchDraw是绘制子控件时的回调,参数Canvas可以对子控件的画布进行处理。 27 | 28 | 通用圆角控件必须对子控件的对应位置也是原价所以我门选择在dispatchDraw中进行圆角处理。 29 | 30 | 剪切(clip()) 31 | ```java 32 | @Override 33 | protected void dispatchDraw(Canvas canvas) { 34 | int width = getWidth(); 35 | int height = getHeight(); 36 | Path path = new Path(); 37 | path.moveTo(0, topLeftRadius); 38 | path.arcTo(new RectF(0, 0, topLeftRadius * 2, topLeftRadius * 2), -180, 90); 39 | path.lineTo(width - topRightRadius, 0); 40 | path.arcTo(new RectF(width - 2 * topRightRadius, 0, width, topRightRadius * 2), -90, 90); 41 | path.lineTo(width, height - bottomRightRadius); 42 | path.arcTo(new RectF(width - 2 * bottomRightRadius, height - 2 * bottomRightRadius, width, height), 0, 90); 43 | path.lineTo(bottomLeftRadius, height); 44 | path.arcTo(new RectF(0, height - 2 * bottomLeftRadius, bottomLeftRadius * 2, height), 90, 90); 45 | path.close(); 46 | canvas.clipPath(path); 47 | super.dispatchDraw(canvas); 48 | } 49 | ``` 50 | 效果图: 51 | ![这里写图片描述](http://img.blog.csdn.net/20160420144007744) 52 | 53 | 上图能看到明显的锯齿 因为 安卓虽提供了抗锯齿功能但是是在Paint上操作的 clip过程没有用到Paint 无法达到抗锯齿目的; 54 | 55 | 遮罩(PorterDuffXfermode) 56 | 57 | ####写法一 58 | 59 | ```java 60 | @Override 61 | protected void dispatchDraw(Canvas canvas) { 62 | super.dispatchDraw(canvas); 63 | drawTopLeft(canvas);//用PorterDuffXfermode 64 | drawTopRight(canvas);//用PorterDuffXfermode 65 | drawBottomLeft(canvas);//用PorterDuffXfermode 66 | drawBottomRight(canvas);//用PorterDuffXfermode 67 | } 68 | ``` 69 | 70 | 效果图: 71 | ![这里写图片描述](http://img.blog.csdn.net/20160420144146871) 72 | 73 | 上图有黑色底色,view的Canvas底层画布的BItmap是 RGB_565的所以怎么画都有一个黑色底色。 74 | 75 | 我们可以new Canvas一个底层画布的BItmap是 ARGB_8888的绘制完后 再把这个底层画布的BItmap 绘制到View 的Canvas上 76 | 77 | ####写法二 78 | ```java 79 | @Override 80 | protected void dispatchDraw(Canvas canvas) { 81 | Bitmap bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888); 82 | Canvas newCanvas = new Canvas(bitmap); 83 | super.dispatchDraw(newCanvas); 84 | drawTopLeft(newCanvas); 85 | drawTopRight(newCanvas); 86 | drawBottomLeft(newCanvas); 87 | drawBottomRight(newCanvas); 88 | canvas.drawBitmap(bitmap,0,0,imagePaint); 89 | // invalidate(); 90 | } 91 | ``` 92 | 效果图: 93 | ![这里写图片描述](http://img.blog.csdn.net/20160420144246653) 94 | 95 | 实现了,但是这种映射方式实现的 如果子控件中存在滑动控件,滑动时无法实时刷新,用Glide加载image到ImageView中时,WebView load时 都无法实时刷新,出现无法加载的效果,虽然可以加上invalidate通知刷新 但是掉帧明显 96 | 97 | 我们只能用回写法一 但是要解决黑色背景的问题 98 | 只要加上一句代码 就能解决 默认黑色背景的问题 99 | ```java 100 | canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), imagePaint,Canvas.ALL_SAVE_FLAG); 101 | ``` 102 | 103 | ```java 104 | @Override 105 | protected void dispatchDraw(Canvas canvas) { 106 | canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), imagePaint,Canvas.ALL_SAVE_FLAG); 107 | super.dispatchDraw(canvas); 108 | drawTopLeft(canvas);//用PorterDuffXfermode 109 | drawTopRight(canvas);//用PorterDuffXfermode 110 | drawBottomLeft(canvas);//用PorterDuffXfermode 111 | drawBottomRight(canvas);//用PorterDuffXfermode 112 | canvas.restore(); 113 | } 114 | ``` 115 | 效果图: 116 | ![这里写图片描述](http://img.blog.csdn.net/20160420144327780) 117 | 118 | 因为view的Canvas底层画布的BItmap是 RGB_565 119 | 我们只要在保存为图层就行了。用过Photoshop的都知道默认底层画布是不透明的,要先解锁,而这里解锁就是保存为图层。 120 | 121 | 相关链接:[http://blog.csdn.net/oyuanwa/article/details/51197546](http://blog.csdn.net/oyuanwa/article/details/51197546) 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.1" 6 | 7 | defaultConfig { 8 | applicationId "com.ybao.rf" 9 | minSdkVersion 11 10 | targetSdkVersion 23 11 | versionCode 1 12 | versionName "1.0" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | testCompile 'junit:junit:4.12' 25 | compile 'com.android.support:appcompat-v7:23.2.0' 26 | } 27 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in D:\android\sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/ybao/rf/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package com.ybao.rf; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/src/main/java/com/ybao/rf/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.ybao.rf; 2 | 3 | import android.support.v7.app.AppCompatActivity; 4 | import android.os.Bundle; 5 | 6 | public class MainActivity extends AppCompatActivity { 7 | 8 | @Override 9 | protected void onCreate(Bundle savedInstanceState) { 10 | super.onCreate(savedInstanceState); 11 | setContentView(R.layout.activity_main); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /app/src/main/java/com/ybao/rf/RoundAngleFrameLayout.java: -------------------------------------------------------------------------------- 1 | package com.ybao.rf; 2 | 3 | import android.content.Context; 4 | import android.content.res.TypedArray; 5 | import android.graphics.Canvas; 6 | import android.graphics.Color; 7 | import android.graphics.Paint; 8 | import android.graphics.Path; 9 | import android.graphics.PorterDuff; 10 | import android.graphics.PorterDuffXfermode; 11 | import android.graphics.RectF; 12 | import android.util.AttributeSet; 13 | import android.widget.FrameLayout; 14 | 15 | 16 | /** 17 | * 圆角FrameLayout 18 | * 19 | * @author ybao 20 | */ 21 | public class RoundAngleFrameLayout extends FrameLayout { 22 | 23 | private float topLeftRadius; 24 | private float topRightRadius; 25 | private float bottomLeftRadius; 26 | private float bottomRightRadius; 27 | 28 | private Paint roundPaint; 29 | private Paint imagePaint; 30 | 31 | public RoundAngleFrameLayout(Context context) { 32 | this(context, null); 33 | } 34 | 35 | public RoundAngleFrameLayout(Context context, AttributeSet attrs) { 36 | this(context, attrs, 0); 37 | } 38 | 39 | public RoundAngleFrameLayout(Context context, AttributeSet attrs, int defStyle) { 40 | super(context, attrs, defStyle); 41 | if (attrs != null) { 42 | TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundAngleFrameLayout); 43 | float radius = ta.getDimension(R.styleable.RoundAngleFrameLayout_radius, 0); 44 | topLeftRadius = ta.getDimension(R.styleable.RoundAngleFrameLayout_topLeftRadius, radius); 45 | topRightRadius = ta.getDimension(R.styleable.RoundAngleFrameLayout_topRightRadius, radius); 46 | bottomLeftRadius = ta.getDimension(R.styleable.RoundAngleFrameLayout_bottomLeftRadius, radius); 47 | bottomRightRadius = ta.getDimension(R.styleable.RoundAngleFrameLayout_bottomRightRadius, radius); 48 | ta.recycle(); 49 | } 50 | roundPaint = new Paint(); 51 | roundPaint.setColor(Color.WHITE); 52 | roundPaint.setAntiAlias(true); 53 | roundPaint.setStyle(Paint.Style.FILL); 54 | roundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); 55 | 56 | imagePaint = new Paint(); 57 | imagePaint.setXfermode(null); 58 | } 59 | ////实现1 60 | // @Override 61 | // protected void dispatchDraw(Canvas canvas) { 62 | // int width = getWidth(); 63 | // int height = getHeight(); 64 | // Path path = new Path(); 65 | // path.moveTo(0, topLeftRadius); 66 | // path.arcTo(new RectF(0, 0, topLeftRadius * 2, topLeftRadius * 2), -180, 90); 67 | // path.lineTo(width - topRightRadius, 0); 68 | // path.arcTo(new RectF(width - 2 * topRightRadius, 0, width, topRightRadius * 2), -90, 90); 69 | // path.lineTo(width, height - bottomRightRadius); 70 | // path.arcTo(new RectF(width - 2 * bottomRightRadius, height - 2 * bottomRightRadius, width, height), 0, 90); 71 | // path.lineTo(bottomLeftRadius, height); 72 | // path.arcTo(new RectF(0, height - 2 * bottomLeftRadius, bottomLeftRadius * 2, height), 90, 90); 73 | // path.close(); 74 | // canvas.clipPath(path); 75 | // super.dispatchDraw(canvas); 76 | // } 77 | ////实现2 78 | // @Override 79 | // protected void dispatchDraw(Canvas canvas) { 80 | // super.dispatchDraw(canvas); 81 | // drawTopLeft(canvas);//用PorterDuffXfermode 82 | // drawTopRight(canvas);//用PorterDuffXfermode 83 | // drawBottomLeft(canvas);//用PorterDuffXfermode 84 | // drawBottomRight(canvas);//用PorterDuffXfermode 85 | // } 86 | ////实现3 87 | // @Override 88 | // protected void dispatchDraw(Canvas canvas) { 89 | // Bitmap bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888); 90 | // Canvas newCanvas = new Canvas(bitmap); 91 | // super.dispatchDraw(newCanvas); 92 | // drawTopLeft(newCanvas); 93 | // drawTopRight(newCanvas); 94 | // drawBottomLeft(newCanvas); 95 | // drawBottomRight(newCanvas); 96 | // canvas.drawBitmap(bitmap, 0, 0, imagePaint); 97 | //// invalidate(); 98 | // } 99 | 100 | //实现4 101 | @Override 102 | protected void dispatchDraw(Canvas canvas) { 103 | canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), imagePaint, Canvas.ALL_SAVE_FLAG); 104 | super.dispatchDraw(canvas); 105 | drawTopLeft(canvas); 106 | drawTopRight(canvas); 107 | drawBottomLeft(canvas); 108 | drawBottomRight(canvas); 109 | canvas.restore(); 110 | } 111 | 112 | private void drawTopLeft(Canvas canvas) { 113 | if (topLeftRadius > 0) { 114 | Path path = new Path(); 115 | path.moveTo(0, topLeftRadius); 116 | path.lineTo(0, 0); 117 | path.lineTo(topLeftRadius, 0); 118 | path.arcTo(new RectF(0, 0, topLeftRadius * 2, topLeftRadius * 2), 119 | -90, -90); 120 | path.close(); 121 | canvas.drawPath(path, roundPaint); 122 | } 123 | } 124 | 125 | private void drawTopRight(Canvas canvas) { 126 | if (topRightRadius > 0) { 127 | int width = getWidth(); 128 | Path path = new Path(); 129 | path.moveTo(width - topRightRadius, 0); 130 | path.lineTo(width, 0); 131 | path.lineTo(width, topRightRadius); 132 | path.arcTo(new RectF(width - 2 * topRightRadius, 0, width, 133 | topRightRadius * 2), 0, -90); 134 | path.close(); 135 | canvas.drawPath(path, roundPaint); 136 | } 137 | } 138 | 139 | private void drawBottomLeft(Canvas canvas) { 140 | if (bottomLeftRadius > 0) { 141 | int height = getHeight(); 142 | Path path = new Path(); 143 | path.moveTo(0, height - bottomLeftRadius); 144 | path.lineTo(0, height); 145 | path.lineTo(bottomLeftRadius, height); 146 | path.arcTo(new RectF(0, height - 2 * bottomLeftRadius, 147 | bottomLeftRadius * 2, height), 90, 90); 148 | path.close(); 149 | canvas.drawPath(path, roundPaint); 150 | } 151 | } 152 | 153 | private void drawBottomRight(Canvas canvas) { 154 | if (bottomRightRadius > 0) { 155 | int height = getHeight(); 156 | int width = getWidth(); 157 | Path path = new Path(); 158 | path.moveTo(width - bottomRightRadius, height); 159 | path.lineTo(width, height); 160 | path.lineTo(width, height - bottomRightRadius); 161 | path.arcTo(new RectF(width - 2 * bottomRightRadius, height - 2 162 | * bottomRightRadius, width, height), 0, 90); 163 | path.close(); 164 | canvas.drawPath(path, roundPaint); 165 | } 166 | } 167 | 168 | } 169 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 20 | 21 | 25 | 26 | 30 | 31 | 37 | 38 |