androidxml红心圆,Android自定义View圆形图片控件代码详解

前言

在日常开发中&＃xff0c;圆形的图片效果还是很常见的。可以通过给Paint设置Xfermode来实现&＃xff0c;这里简单记录如下。

实现

实现圆形效果的核心是PorterDuffXfermode,对于PorterDuffXfermode,这里不展开&＃xff0c;可以查询相关资料。

核心代码

//绘制背景

canvas.drawCircle(mSize / 2, mSize / 2, mSize / 2, mPaint);

//设置模式为:显示背景层和上层的交集&＃xff0c;且显示上层图像

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

//绘制要显示的图像

canvas.drawBitmap(mSrcBitmap, 0, 0, mPaint);

//重置Xfermode

mPaint.setXfermode(null);

自定义属性

自定义控件

public class CircleView extends View {

private static final int DEFAULT_SIZE &＃61; 200;

private static final int DEFAULT_RADIUS &＃61; 20;

private static final int TYPE_ROUND &＃61; 1;

private static final int TYPE_RECT &＃61; 2;

private int mSize;

private int mResourceId;

private int mType;

private Paint mPaint;

private Bitmap mSrcBitmap;

public CircleView(Context context) {

this(context, null);

}

public CircleView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray ta &＃61; context.obtainStyledAttributes(attrs, R.styleable.CircleView);

mResourceId &＃61; ta.getResourceId(R.styleable.CircleView_src, R.mipmap.ic_launcher);

mType &＃61; ta.getInt(R.styleable.CircleView_type, TYPE_ROUND);

ta.recycle();

init();

}

&＃64;Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int width &＃61; getMeasureSize(widthMeasureSpec);

int height &＃61; getMeasureSize(heightMeasureSpec);

mSize &＃61; Math.min(width, height);

setMeasuredDimension(mSize, mSize);

}

&＃64;RequiresApi(api &＃61; Build.VERSION_CODES.LOLLIPOP)

&＃64;Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//绘制背景

if (mSrcBitmap &＃61;&＃61; null) {

mSrcBitmap &＃61; getScaleBitmap();

}

if (mType &＃61;&＃61; TYPE_ROUND) {

canvas.drawCircle(mSize / 2, mSize / 2, mSize / 2, mPaint);

} else if (mType &＃61;&＃61; TYPE_RECT) {

canvas.drawRoundRect(0, 0, mSize, mSize, DEFAULT_RADIUS, DEFAULT_RADIUS, mPaint);

}

//设置模式为:显示背景层和上层的交集&＃xff0c;且显示上层图像

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

//绘制要显示的图像

canvas.drawBitmap(mSrcBitmap, 0, 0, mPaint);

//重置Xfermode

mPaint.setXfermode(null);

}

private void init() {

//禁用硬件加速,否则可能无法绘制圆形

setLayerType(LAYER_TYPE_HARDWARE, null);

mPaint &＃61; new Paint();

mPaint.setAntiAlias(true);

mPaint.setStyle(Paint.Style.FILL);

}

private int getMeasureSize(int measureSpec) {

int mode &＃61; MeasureSpec.getMode(measureSpec);

int size &＃61; MeasureSpec.getSize(measureSpec);

return mode &＃61;&＃61; MeasureSpec.EXACTLY ? size : DEFAULT_SIZE;

}

/**

* 获取缩放后的Bitmap

*

* &＃64;return

*/

private Bitmap getScaleBitmap() {

BitmapFactory.Options options &＃61; new BitmapFactory.Options();

options.inJustDecodeBounds &＃61; true;

BitmapFactory.decodeResource(getResources(), mResourceId, options);

options.inSampleSize &＃61; calcSampleSize(options, mSize, mSize);

options.inJustDecodeBounds &＃61; false;

return BitmapFactory.decodeResource(getResources(), mResourceId, options);

}

/**

* 计算缩放比例

*

* &＃64;param option

* &＃64;param width

* &＃64;param height

* &＃64;return

*/

private int calcSampleSize(BitmapFactory.Options option, int width, int height) {

int originWidth &＃61; option.outWidth;

int originHeight &＃61; option.outHeight;

int sampleSize &＃61; 1;

while ((originWidth &＃61; originWidth >> 1) > width && (originHeight &＃61; originHeight >> 1) > height) {

sampleSize &＃61; sampleSize <<1;

}

return sampleSize;

}

}

注意&＃xff1a;如果没有圆形的效果&＃xff0c;那么可能需要禁用硬件加速&＃xff1a;setLayerType(LAYER_TYPE_HARDWARE, null)

布局

xmlns:app&＃61;"http://schemas.android.com/apk/res-auto"

xmlns:tools&＃61;"http://schemas.android.com/tools"

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"match_parent"

android:gravity&＃61;"center_horizontal"

android:orientation&＃61;"vertical"

tools:context&＃61;".MainActivity">

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content"

android:layout_margin&＃61;"10dp"

app:src&＃61;"&＃64;drawable/image" />

android:layout_width&＃61;"100dp"

android:layout_height&＃61;"100dp"

android:layout_margin&＃61;"10dp"

app:src&＃61;"&＃64;drawable/image" />

android:layout_width&＃61;"100dp"

android:layout_height&＃61;"100dp"

android:layout_margin&＃61;"10dp"

app:src&＃61;"&＃64;drawable/image"

app:type&＃61;"rect" />

效果

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持我们。

时间&＃xff1a; 2020-12-09