android自定义带进度条的圆形图片
前言：在项目听新闻的改版中需要实现环绕圆形新闻图片的进度条功能，作为技术预备工作我就去看了一些网上的相关的原理，做了一个自定义带进度条的圆形图片的demo，并将这个实现写成文章发布出来，谁需要了可以进来看看。作为懒人，文章的有些图片等资源是在网上直接把别人的拿过来用了，在此提前对资源的主人表示感谢！！
文章的实现已经写了demo项目提交资源，如果只喜欢看项目，请直接点击下载demo：
点击打开链接
上来先给大家看张效果图片：
友情提示：我的自己的实现和效果这张图片有所差异和不同，请以在代码中看到的我的实现效果和原理为标准！！！
以下实现的具体控件功能为：
- 有圆形进度条，进度条的颜色、宽度以及是否显示可随意设置。
- 有标识身份图标，小图标位置可随意改变、可隐藏以及改变大小。
- 标识身份或者进度数值的文字控件在图标上面，可以进行显隐等各种配置。
一、自定义圆形图片的实现：
首先要解决的就是要把图片裁剪成圆形，这种控件很多，我这里用的是CircleImageView ,该类的源码非常简单易上手，我这里就不多说了，直接给出下面的源码需要的人自己看吧：
public class CircleImageView extends ImageView {
private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
private static final int COLORDRAWABLE_DIMENSION = 2;
private static final int DEFAULT_BORDER_WIDTH = 0;
private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
private static final int DEFAULT_FILL_COLOR = Color.TRANSPARENT;
private static final boolean DEFAULT_BORDER_OVERLAY = false;
private final RectF mDrawableRect = new RectF();
private final RectF mBorderRect = new RectF();
private final Matrix mShaderMatrix = new Matrix();
private final Paint mBitmapPaint = new Paint();
private final Paint mBorderPaint = new Paint();
private final Paint mFillPaint = new Paint();
private int mBorderColor = DEFAULT_BORDER_COLOR;
private int mBorderWidth = DEFAULT_BORDER_WIDTH;
private int mFillColor = DEFAULT_FILL_COLOR;
private Bitmap mBitmap;
private BitmapShader mBitmapShader;
private int mBitmapWidth;
private int mBitmapHeight;
private float mDrawableRadius;
private float mBorderRadius;
private ColorFilter mColorFilter;
private boolean mReady;
private boolean mSetupPending;
private boolean mBorderOverlay;
private boolean mDisableCircularTransformation;
public CircleImageView(Context context) {
super(context);
init();
}
public CircleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);
mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_civ_border_width, DEFAULT_BORDER_WIDTH);
mBorderColor = a.getColor(R.styleable.CircleImageView_civ_border_color, DEFAULT_BORDER_COLOR);
mBorderOverlay = a.getBoolean(R.styleable.CircleImageView_civ_border_overlay, DEFAULT_BORDER_OVERLAY);
mFillColor = a.getColor(R.styleable.CircleImageView_civ_fill_color, DEFAULT_FILL_COLOR);
a.recycle();
init();
}
private void init() {
super.setScaleType(SCALE_TYPE);
mReady = true;
if (mSetupPending) {
setup();
mSetupPending = false;
}
}
@Override
public ScaleType getScaleType() {
return SCALE_TYPE;
}
@Override
public void setScaleType(ScaleType scaleType) {
if (scaleType != SCALE_TYPE) {
throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
}
}
@Override
public void setAdjustViewBounds(boolean adjustViewBounds) {
if (adjustViewBounds) {
throw new IllegalArgumentException("adjustViewBounds not supported.");
}
}
@Override
protected void onDraw(Canvas canvas) {
if (mDisableCircularTransformation) {
super.onDraw(canvas);
return;
}
if (mBitmap == null) {
return;
}
if (mFillColor != Color.TRANSPARENT) {
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mFillPaint);
}
canvas.drawCircle(mDrawableRect.centerX(), mDrawableRect.centerY(), mDrawableRadius, mBitmapPaint);
if (mBorderWidth > 0) {
canvas.drawCircle(mBorderRect.centerX(), mBorderRect.centerY(), mBorderRadius, mBorderPaint);
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
setup();
}
@Override
public void setPadding(int left, int top, int right, int bottom) {
super.setPadding(left, top, right, bottom);
setup();
}
@Override
public void setPaddingRelative(int start, int top, int end, int bottom) {
super.setPaddingRelative(start, top, end, bottom);
setup();
}
public int getBorderColor() {
return mBorderColor;
}
public void setBorderColor(@ColorInt int borderColor) {
if (borderColor == mBorderColor) {
return;
}
mBorderColor = borderColor;
mBorderPaint.setColor(mBorderColor);
invalidate();
}
/**
* @deprecated Use {@link #setBorderColor(int)} instead
*/
@Deprecated
public void setBorderColorResource(@ColorRes int borderColorRes) {
setBorderColor(getContext().getResources().getColor(borderColorRes));
}
/**
* Return the color drawn behind the circle-shaped drawable.
*
* @return The color drawn behind the drawable
*
* @deprecated Fill color support is going to be removed in the future
*/
@Deprecated
public int getFillColor() {
return mFillColor;
}
/**
* Set a color to be drawn behind the circle-shaped drawable. Note that
* this has no effect if the drawable is opaque or no drawable is set.
*
* @param fillColor The color to be drawn behind the drawable
*
* @deprecated Fill color support is going to be removed in the future
*/
@Deprecated
public void setFillColor(@ColorInt int fillColor) {
if (fillColor == mFillColor) {
return;
}
mFillColor = fillColor;
mFillPaint.setColor(fillColor);
invalidate();
}
/**
* Set a color to be drawn behind the circle-shaped drawable. Note that
* this has no effect if the drawable is opaque or no drawable is set.
*
* @param fillColorRes The color resource to be resolved to a color and
* drawn behind the drawable
*
* @deprecated Fill color support is going to be removed in the future
*/
@Deprecated
public void setFillColorResource(@ColorRes int fillColorRes) {
setFillColor(getContext().getResources().getColor(fillColorRes));
}
public int getBorderWidth() {
return mBorderWidth;
}
public void setBorderWidth(int borderWidth) {
if (borderWidth == mBorderWidth) {
return;
}
mBorderWidth = borderWidth;
setup();
}
public boolean isBorderOverlay() {
return mBorderOverlay;
}
public void setBorderOverlay(boolean borderOverlay) {
if (borderOverlay == mBorderOverlay) {
return;
}
mBorderOverlay = borderOverlay;
setup();
}
public boolean isDisableCircularTransformation() {
return mDisableCircularTransformation;
}
public void setDisableCircularTransformation(boolean disableCircularTransformation) {
if (mDisableCircularTransformation == disableCircularTransformation) {
return;
}
mDisableCircularTransformation = disableCircularTransformation;
initializeBitmap();
}
@Override
public void setImageBitmap(Bitmap bm) {
super.setImageBitmap(bm);
initializeBitmap();
}
@Override
public void setImageDrawable(Drawable drawable) {
super.setImageDrawable(drawable);
initializeBitmap();
}
@Override
public void setImageResource(@DrawableRes int resId) {
super.setImageResource(resId);
initializeBitmap();
}
@Override
public void setImageURI(Uri uri) {
super.setImageURI(uri);
initializeBitmap();
}
@Override
public void setColorFilter(ColorFilter cf) {
if (cf == mColorFilter) {
return;
}
mColorFilter = cf;
applyColorFilter();
invalidate();
}
@Override
public ColorFilter getColorFilter() {
return mColorFilter;
}
private void applyColorFilter() {
if (mBitmapPaint != null) {
mBitmapPaint.setColorFilter(mColorFilter);
}
}
private Bitmap getBitmapFromDrawable(Drawable drawable) {
if (drawable == null) {
return null;
}
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
try {
Bitmap bitmap;
if (drawable instanceof ColorDrawable) {
bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
} else {
bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
}
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
private void initializeBitmap() {
if (mDisableCircularTransformation) {
mBitmap = null;
} else {
mBitmap = getBitmapFromDrawable(getDrawable());
}
setup();
}
private void setup() {
if (!mReady) {
mSetupPending = true;
return;
}
if (getWidth() == 0 && getHeight() == 0) {
return;
}
if (mBitmap == null) {
invalidate();
return;
}
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setShader(mBitmapShader);
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setAntiAlias(true);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
mFillPaint.setStyle(Paint.Style.FILL);
mFillPaint.setAntiAlias(true);
mFillPaint.setColor(mFillColor);
mBitmapHeight = mBitmap.getHeight();
mBitmapWidth = mBitmap.getWidth();
mBorderRect.set(calculateBounds());
mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2.0f, (mBorderRect.width() - mBorderWidth) / 2.0f);
mDrawableRect.set(mBorderRect);
if (!mBorderOverlay && mBorderWidth > 0) {
mDrawableRect.inset(mBorderWidth - 1.0f, mBorderWidth - 1.0f);
}
mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);
applyColorFilter();
updateShaderMatrix();
invalidate();
}
private RectF calculateBounds() {
int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int sideLength = Math.min(availableWidth, availableHeight);
float left = getPaddingLeft() + (availableWidth - sideLength) / 2f;
float top = getPaddingTop() + (availableHeight - sideLength) / 2f;
return new RectF(left, top, left + sideLength, top + sideLength);
}
private void updateShaderMatrix() {
float scale;
float dx = 0;
float dy = 0;
mShaderMatrix.set(null);
if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
scale = mDrawableRect.height() / (float) mBitmapHeight;
dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
} else {
scale = mDrawableRect.width() / (float) mBitmapWidth;
dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
}
mShaderMatrix.setScale(scale, scale);
mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
mBitmapShader.setLocalMatrix(mShaderMatrix);
}
}二、view控件整体效果的实现：
我这里的基本思路就是在自定义一个viewgroup里面包裹一个大的圆形view和一个小的圆形view来实现小圆围绕大圆的旋转，然后在大圆的周围绘制双层的圆来实现进度条的功能。其他的算法和实现以及逻辑就不多说了，在下面的代码实现里面注释已经很详细了，直接看实现类吧：
/**
* 1.尺寸的计算全部使用浮点，操作控件的时候在转为整型，来减少计算过程的数据失准
* 2。对属性的添加和控制可以自行增加自定义属性和接口以便扩展结合自己的业务
* 3。该类默认小圆图形的半径比圆形边框的宽度的一半大
* 4。radiusScale的值小于等于0时 认为不显示小圆
* 5。在小图片上的文字显示该类只是做了实现，需要适配和定制的可以做自己的修改
* @author zhangmeng
*/
public class IdentityImageView extends ViewGroup {
private Context mContext;
private CircleImageView bigImageView;//大圆图
private CircleImageView smallImageView;//小圆图
private float radiusScale = 0;//小圆图片与大圆图片的比例，默认0.28
private float bigRadius;//大圆图片半径
private float smallRadius;//小圆图片半径
private double angle = 0; //小圆图片的位置的角度大小
private boolean isprogress;//是否可以加载进度条，必须设置为true才能开启
private int progressCollor;//进度条颜色
private int borderColor = 0;//边框颜色
private int borderWidth = 0;//边框、进度条宽度
private TextView textView;// 跟随小图片的提示文字，用的地方比较少
private boolean hintSmallView;//是否隐藏小圆图片
private Paint mBorderPaint;//边框画笔
private Paint mProgressPaint;//进度条画笔
private float progresss;// 进度条的进度值
private Drawable bigImage;//大图片
private Drawable smallimage;//小图片
private int setprogressColor = 0;//动态设置进度条颜色值
private int setborderColor = 0;//动态设置边框颜色值
private float totalwidth;// 当前整体view的总的宽度值
public IdentityImageView(Context context) {
this(context, null);
}
public IdentityImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public IdentityImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
// 在viewgroup初始化的时候，它调用了一个私有方法：initViewGroup，
// 它里面会有一句setFlags（WILLL_NOT_DRAW,DRAW_MASK）;相当于调用了setWillNotDraw（true），
// 所以说，对于ViewGroup，他就认为是透明的了，如果我们想要重写onDraw，就要调用setWillNotDraw（false）。
setWillNotDraw(false);
addThreeView();
initAttrs(attrs);
initPaint();
}
private void addThreeView() {
bigImageView = new CircleImageView(mContext);//大圆图形
smallImageView = new CircleImageView(mContext);//小圆图形
textView = new TextView(mContext);// 中间提示的文本
textView.setGravity(Gravity.CENTER);
textView.setTextColor(getResources().getColor(android.R.color.holo_red_light));
addView(bigImageView, 0, new LayoutParams((int) bigRadius, (int) bigRadius));
addView(smallImageView, 1, new LayoutParams((int) smallRadius, (int) smallRadius));
addView(textView, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
// 以下两行代码保证小图片和文字可以被看到
smallImageView.bringToFront();//使小图片位于最上层
textView.bringToFront();//使小图片上面的文字显示位于小图片上面
}
private void initAttrs(AttributeSet attrs) {
TypedArray tta = mContext.obtainStyledAttributes(attrs,R.styleable.IdentityImageView);
bigImage = tta.getDrawable(R.styleable.IdentityImageView_iciv_bigimage);
smallimage = tta.getDrawable(R.styleable.IdentityImageView_iciv_smallimage);
angle = tta.getFloat(R.styleable.IdentityImageView_iciv_angle, 0);//小图以及进度条起始角度
radiusScale = tta.getFloat(R.styleable.IdentityImageView_iciv_radiusscale, 0);//大图和小图的比例
//是否要进度条，不为true的话，设置进度条颜色和宽度也没用
isprogress = tta.getBoolean(R.styleable.IdentityImageView_iciv_isprogress, false);
progressCollor = tta.getColor(R.styleable.IdentityImageView_iciv_progress_collor, 0);//边框进度条颜色
borderColor = tta.getColor(R.styleable.IdentityImageView_iciv_border_color, 0);//边框颜色
borderWidth = tta.getInteger(R.styleable.IdentityImageView_iciv_border_width, 0);//边框宽（同为进度条）
hintSmallView = tta.getBoolean(R.styleable.IdentityImageView_iciv_hint_smallimageview, false);//隐藏小图片
if (hintSmallView) {
smallImageView.setVisibility(GONE);
textView.setVisibility(GONE);
}
if (bigImage != null) {
bigImageView.setImageDrawable(bigImage);
}
if (smallimage != null) {
smallImageView.setImageDrawable(smallimage);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int viewWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int viewHeightMode = MeasureSpec.getMode(heightMeasureSpec);
int viewWidht = MeasureSpec.getSize(widthMeasureSpec);
int viewHeight = MeasureSpec.getSize(heightMeasureSpec);
switch (viewWidthMode) {
case MeasureSpec.EXACTLY: // 说明在布局文件中使用的是具体值：100dp或者match_parent
// 为了方便，让半径等于宽高中小的那个，再设置宽高至半径大小
totalwidth = viewWidht < viewHeight ? viewWidht : viewHeight;
// 用大图和小图的大小比例以及圆形边宽来计算大图的半径
if (radiusScale > 0) {
float scale = 1 + radiusScale;
// 在该情况下大圆和小圆的半径加起来等于宽度一半减去圆形边款的一半
float radius2 = totalwidth / 2 - borderWidth / 2;
bigRadius = radius2 / scale;
} else {
// 在该情况下大圆和小圆的半径加起来等于宽度一半减去圆形边款的宽度
bigRadius = totalwidth / 2 - borderWidth;
}
break;
default: // 在其他情况我们写死默认的宽高,可以随意修改
bigRadius = 200;
totalwidth = (int) ((bigRadius + bigRadius * radiusScale + borderWidth) * 2);
break;
}
setMeasuredDimension((int) totalwidth, (int) totalwidth);
adjustThreeView();
}
@Override
protected void onDraw(Canvas canvas) {
initPaint();
if (borderWidth > 0) {
drawBorder(canvas);
}
if (isprogress && borderWidth > 0) {
drawProgress(canvas);
}
}
private void initPaint() {
if (mBorderPaint == null) {
mBorderPaint = new Paint();
mBorderPaint.setStyle(Paint.Style.STROKE);
mBorderPaint.setAntiAlias(true);
}
if (setborderColor != 0) {
mBorderPaint.setColor(getResources().getColor(setborderColor));
} else {
mBorderPaint.setColor(borderColor);
}
mBorderPaint.setStrokeWidth(borderWidth);
if (mProgressPaint == null) {
mProgressPaint = new Paint();
mProgressPaint.setStyle(Paint.Style.STROKE);
mProgressPaint.setAntiAlias(true);
}
if (setprogressColor != 0) {
mProgressPaint.setColor(getResources().getColor(setprogressColor));
} else {
mProgressPaint.setColor(progressCollor);
}
mProgressPaint.setStrokeWidth(borderWidth);
}
/**
* 画圆形的边框
*
* @param canvas 画布
*/
private void drawBorder(Canvas canvas) {
// 在于setStrokeWidth这个方法，圆环宽度是往外侧增加一半，往内侧增加一半
// 所以画笔的中心到圆心的距离才为圆的真正画出的半径
if (radiusScale > 0) {
// 圆形边框的半径等于宽度一半减去小圆半径
canvas.drawCircle(totalwidth / 2, totalwidth / 2, totalwidth / 2 - smallRadius, mBorderPaint);
} else {
// 圆形边框的半径等于宽度一半减去圆形边款宽度的一半
canvas.drawCircle(totalwidth / 2, totalwidth / 2, (totalwidth - borderWidth) / 2, mBorderPaint);
}
}
//画圆弧进度条
private void drawProgress(Canvas canvas) {
// 在于setStrokeWidth这个方法，圆环宽度是往外侧增加一半，往内侧增加一半
// 所以画笔的中心到圆心的距离才为圆的真正画出的半径
// 这里在layout里面小圆的中心点正好在圆形边的中心所以直接用宽高减去小圆的半径就是进度条画笔的中心，
// 一样的画笔宽度就可以覆盖圆形边的宽度
RectF rectf;
if (radiusScale > 0) {
// 有小圆时，半径为到小圆的中心点
rectf = new RectF(smallRadius, smallRadius,
getWidth() - smallRadius, getHeight() - smallRadius);
} else {
// 没小圆时，半径为到圆形边框宽度的中点
rectf = new RectF(borderWidth / 2, borderWidth / 2,
getWidth() - borderWidth / 2, getHeight() - borderWidth / 2);
}
canvas.drawArc(rectf, (float) angle, progresss, false, mProgressPaint);
}
@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
//重点在于smallImageView的位置确定,默认为放在右下角，可自行拓展至其他位置
double cos = Math.cos(angle * Math.PI / 180);
double sin = Math.sin(angle * Math.PI / 180);
if (radiusScale > 0) {
// 大圆的半径加上圆形边宽的一半才是可以用来通过函数计算小圆中心位置的变数 (bigRadius + borderWidth / 2)
double left = totalwidth / 2 + (bigRadius + borderWidth / 2) * cos - smallRadius;
double top = totalwidth / 2 + (bigRadius + borderWidth / 2) * sin - smallRadius;
int right = (int) (left + 2 * smallRadius);
int bottom = (int) (top + 2 * smallRadius);
textView.layout((int) left, (int) top, right, bottom);
smallImageView.layout((int) left, (int) top, right, bottom);
bigImageView.layout((int) (smallRadius + borderWidth / 2), (int) (smallRadius + borderWidth / 2),
(int) (totalwidth - smallRadius - borderWidth / 2), (int) (totalwidth - smallRadius - borderWidth / 2));
} else {
bigImageView.layout((int) borderWidth, (int) borderWidth,
(int) (totalwidth - borderWidth), (int) (totalwidth - borderWidth));
}
}
private void adjustThreeView() {
bigImageView.setLayoutParams(new LayoutParams((int) (bigRadius * 2), (int) (bigRadius * 2)));
if (radiusScale > 0) {
smallRadius = (int) (bigRadius * radiusScale);
smallImageView.setLayoutParams(new LayoutParams((int) (smallRadius * 2), (int) (smallRadius * 2)));
textView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
smallImageView.setVisibility(VISIBLE);
textView.setVisibility(VISIBLE);
} else {
smallImageView.setVisibility(GONE);
textView.setVisibility(GONE);
}
}
/**
* 获得textview
*
* @return textView
*/
public TextView getTextView() {
if (textView != null) {
return textView;
} else {
return null;
}
}
/**
* 获得大图片imageview
*
* @return bigImageView
*/
public CircleImageView getBigCircleImageView() {
if (bigImageView != null) {
return bigImageView;
} else {
return null;
}
}
/**
* 获得小图片imageview
*
* @return smallImageView
*/
public CircleImageView getSmallCircleImageView() {
if (smallImageView != null) {
return smallImageView;
} else {
return null;
}
}
/**
* 设置进度条进度，一共360
*
* @param angle 进度大小
*/
public void setProgress(float angle) {
if (progresss == angle || angle < 0 || angle > 360) {
return;
}
progresss = angle;
textView.setText((int) angle+"");
requestLayout();
invalidate();
}
/**
* 设置小图片的的位置的角度和进度条的起始位置角度
*
* @param angles 角度
*/
public void setAngle(int angles) {
if (angles == angle) {
return;
}
angle = angles;
requestLayout();
invalidate();
}
/**
* 设置小圆和大圆的比例值
*
* @param v 比例
*/
public void setRadiusScale(float v) {
if (v == radiusScale || v < 0 || v > 1) {
return;
}
radiusScale = v;
requestLayout();
invalidate();
}
/**
* 设置是否可以显示进度条
*
* @param b 是否有进度条
*/
public void setIsprogress(boolean b) {
if (b == isprogress) {
return;
}
isprogress = b;
requestLayout();
invalidate();
}
/**
* 设置填充的颜色
*
* @param color 边框颜色
*/
public void setBorderColor(int color) {
if (color == borderColor) {
return;
}
setborderColor = color;
requestLayout();
invalidate();
}
/**
* 设置进度条颜色
*
* @param color 进度条颜色
*/
public void setProgressColor(int color) {
if (color == progressCollor) {
return;
}
setprogressColor = color;
requestLayout();
invalidate();
}
/**
* 设置边框和进度条的宽度
*
* @param width 边框和进度条宽度
*/
public void setBorderWidth(int width) {
if (width == borderWidth) {
return;
}
borderWidth = width;
requestLayout();
invalidate();
}
}这个类是初步实现了需要的图片演示的效果功能，和一些基本的扩展接口，如果需要定制自己的业务实现，请自行扩展和完善修改，请放心很简单的！！！
三、其他的小东西：
如果是你奔着原理实现去的，那上面的实现应该已经满足你了。如果你是和我一样是一个懒人，那我下面的其他小部分的贴出对你来说是一个好事，因为你可以直接粘贴复制来使用了。
1.自定义的属性
2.demo效果activity的布局实现
3.demo的activity的实现代码
public class MainActivity extends Activity {
private IdentityImageView identityImageView;
private int i = 10;
private int angle = 10;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
identityImageView = ((IdentityImageView) findViewById(R.id.iiv));
}
public void click(View view) {
switch (view.getId()) {
case R.id.bt1://填充头像
identityImageView.getBigCircleImageView().setImageResource(R.mipmap.guojia);
break;
case R.id.bt2:
//改变图片比例大小，
identityImageView.setRadiusScale(0.1f);
break;
case R.id.bt3:
//增加边框
identityImageView.setBorderWidth(25);
identityImageView.setBorderColor(R.color.colorTest);
break;
case R.id.bt4:
//增加进度条，没按一次加10,以及改变的角度
identityImageView.setIsprogress(true);
identityImageView.setProgressColor(R.color.colorAccent);
identityImageView.setProgress(i += 10);
break;
case R.id.bt5:
identityImageView.getSmallCircleImageView().setImageResource(R.mipmap.v);
identityImageView.setRadiusScale(0.3f);
break;
case R.id.bt6:
identityImageView.setAngle(angle += 10);
break;
default:
break;
}
}
}点击打开链接
希望对你有所帮助， see you