Android UI - 带白边的自定义ImageView效果 - android

自定义的圆角ImageView代码：

package com.smiling.roundimageview;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.widget.ImageView;public class RoundCornerImageView extends ImageView{public RoundCornerImageView(Context context) {super(context);}public RoundCornerImageView(Context context, AttributeSet attrs) {super(context, attrs);}public RoundCornerImageView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}protected void onDraw(Canvas canvas){int roundPx = 25;Paint paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.WHITE); //这里的颜色决定了边缘的颜色Drawable drawable = getDrawable();if(drawable == null){return ;}if(getWidth() == 0 || getHeight() == 0){return ;}Bitmap b = ((BitmapDrawable)drawable).getBitmap();Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);int w = getWidth() ;int h = getHeight() ;RectF rectF = new RectF(0, 0, w, w);Bitmap roundBitmap = getCroppedBitmap(bitmap, w, roundPx);canvas.drawARGB(0, 0, 0, 0);canvas.drawRoundRect(rectF, roundPx, roundPx, paint);canvas.drawBitmap(roundBitmap, 0, 0, null);}public static Bitmap getCroppedBitmap(Bitmap bmp, int length,int roundPx) {Bitmap sbmp;if (bmp.getWidth() != length || bmp.getHeight() != length)   sbmp = Bitmap.createScaledBitmap(bmp, length, length, false);else   sbmp = bmp;Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),Config.ARGB_8888);Canvas canvas = new Canvas(output);                       final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());final RectF rectF = new RectF(6, 6, sbmp.getWidth() - 6, sbmp.getHeight() - 6); final Paint paint = new Paint();paint.setAntiAlias(true);paint.setFilterBitmap(true);paint.setDither(true);canvas.drawARGB(0, 0, 0, 0);paint.setColor(Color.WHITE);canvas.drawRoundRect(rectF, roundPx, roundPx, paint);paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));   canvas.drawBitmap(sbmp, rect, rect, paint);return output;}}

自定义的圆形ImageView代码：

package com.smiling.roundimageview;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.widget.ImageView;public class CircleImageView extends ImageView{public CircleImageView(Context context) {super(context);}public CircleImageView(Context context, AttributeSet attrs) {super(context, attrs);}public CircleImageView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}protected void onDraw(Canvas canvas){Paint paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.WHITE); //这里的颜色决定了边缘的颜色Drawable drawable = getDrawable();if(drawable == null){return ;}if(getWidth() == 0 || getHeight() == 0){return ;}Bitmap b = ((BitmapDrawable)drawable).getBitmap();Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);int w = getWidth() ;int h = getHeight() ;System.out.println("Windth="+w+",Height="+h);//圆形ImageView的半径为布局中的ImageView定义大小Bitmap roundBitmap = getCroppedBitmap(bitmap, w);canvas.drawARGB(0, 0, 0, 0);canvas.drawCircle(w / 2, h / 2, w / 2 , paint);canvas.drawBitmap(roundBitmap, 0, 0, null);}public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {Bitmap sbmp;if (bmp.getWidth() != radius || bmp.getHeight() != radius)   sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);else   sbmp = bmp;Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),Config.ARGB_8888);Canvas canvas = new Canvas(output);                       final Paint paint = new Paint();final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());paint.setAntiAlias(true);paint.setFilterBitmap(true);paint.setDither(true);canvas.drawARGB(0, 0, 0, 0);paint.setColor(Color.WHITE);//第三个参数减去的数值为白边的宽度.canvas.drawCircle(sbmp.getWidth() / 2 ,sbmp.getHeight() / 2 , sbmp.getWidth() / 2 - 6, paint);paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));   canvas.drawBitmap(sbmp, rect, rect, paint);return output;}}

两种效果的代码基本一样，对于圆角矩形使用的是canvas.drawRoundRect（）方法，而圆形使用的是canvas.drawCircle（）方法。

S4效果图(1920 * 1080)：

Android UI - 带白边的自定义ImageView效果_第1张图片

Android UI - 带白边的自定义ImageView效果

更多相关文章

随机推荐