Question

如何在圆形 imageView android 上添加一个阴影和边界

Answer 1

我创建了 CircularImageView 这一问题：创建在 android 中的圆形图像视图
下载GitHub的项目
1） 这是 CircularImageView 类：
public class CircularImageView extends ImageView {
public CircularImageView(Context context) {
super(context);
}

public CircularImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {
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);

Bitmap roundBitmap = getCroppedBitmap(bitmap, getWidth());
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(), Bitmap.Config.ARGB_8888);
final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
paint.setColor(Color.parseColor("#BAB399"));

Canvas c = new Canvas(output);
c.drawARGB(0, 0, 0, 0);
c.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f, sbmp.getWidth() / 2+0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
c.drawBitmap(sbmp, rect, rect, paint);

return output;
}
}

2） 我在我像这样的布局中使用：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp" >

<com.mikhaellopez.circularimageview.CircularImageView
android:id="@+id/imageViewCircular"
android:layout_width="@dimen/image_view_size"
android:layout_height="@dimen/image_view_size"
android:layout_gravity="center"
android:background="@drawable/border"
android:src="@drawable/image" />

</LinearLayout>

Answer 2

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
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.util.TypedValue;
import android.widget.ImageView;

import com.cn7782.android.eoa.R;

/**
* 自定义View，实现圆角，圆形等效果
*
*/
public class CircleImageView extends ImageView {

private final static int strokeWidth = 2;
/**内圆与外圆偏移*/
private static int innerBound = 4;

/**
* TYPE_CIRCLE / TYPE_ROUND
*/
private int type;
private static final int TYPE_CIRCLE = 0;
private static final int TYPE_ROUND = 1;

/**
* 前景图片
*/
private Bitmap mSrc;

/**
* 背景图片
*/
private Bitmap mBackground;

/**
* 圆角的大小
*/
private int mRadius;

/**
* 边框背景色
*/
private int color;

/**
* 控件的宽度
*/
private int mWidth;
/**
* 控件的高度
*/
private int mHeight;
/**前景图片的宽*/
private int msrcWidth;
/**前景图片的高*/
private int msrcHeight;

public CircleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public CircleImageView(Context context) {
this(context, null);
}

/**
* 初始化一些自定义的参数
*
* @param context
* @param attrs
* @param defStyle
*/
public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.CircleImageView, defStyle, 0);

int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CircleImageView_src:
mSrc = BitmapFactory.decodeResource(getResources(),
a.getResourceId(attr, 0));
break;
case R.styleable.CircleImageView_type:
type = a.getInt(attr, 0);// 默认为Circle
break;
case R.styleable.CircleImageView_borderRadius:
mRadius = a.getDimensionPixelSize(attr, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
getResources().getDisplayMetrics()));// 默认为10DP
break;
case R.styleable.CircleImageView_background:
mBackground = BitmapFactory.decodeResource(getResources(),
a.getResourceId(attr, 0));
break;
}
}
a.recycle();
color = Color.BLACK;// 圆形边框默认背景为黑色
// 圆角图片时默认圆角角度为10
if (type == 1 && mRadius == 0) {
mRadius = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 10f, getResources()
.getDisplayMetrics());
}
//超高密度
if (getResources().getDisplayMetrics().density > 2) {
innerBound = 6;
}
}

/**
* 计算控件的高度和宽度
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);

/**
* 设置宽度
*/
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);

if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
{
mWidth = specSize;
msrcWidth = mWidth;
} else if (mSrc != null) {
// 由图片决定的宽
int desireByImg = getPaddingLeft() + getPaddingRight()
+ mSrc.getWidth();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
mWidth = Math.min(desireByImg, specSize);
msrcWidth = mWidth;
}
if (mBackground != null) {
// 由图片决定的宽
int bgWidth = getPaddingLeft() + getPaddingRight()
+ mBackground.getWidth();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
//如果背景不为空时以大的为控件宽
mWidth = Math.max(mWidth, bgWidth);
}
}
}

/***
* 设置高度
*/

specMode = MeasureSpec.getMode(heightMeasureSpec);
specSize = MeasureSpec.getSize(heightMeasureSpec);
if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
{
mHeight = specSize;
msrcHeight = mHeight;
} else if (mSrc != null) {
int desire = getPaddingTop() + getPaddingBottom()
+ mSrc.getHeight();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
mHeight = Math.min(desire, specSize);
msrcHeight = mHeight;
}

if (mBackground != null) {
// 由图片决定的宽
int bgHeight = getPaddingTop() + getPaddingBottom()
+ mBackground.getHeight();
if (specMode == MeasureSpec.AT_MOST)// wrap_content
{
//如果背景不为空时以大的为控件高
mHeight = Math.max(mHeight, bgHeight);
}
}
}

setMeasuredDimension(mWidth, mHeight);

}

/**
* 绘制
*/
@Override
protected void onDraw(Canvas canvas) {
if (mSrc == null) {
return;
}
switch (type) {
// 如果是TYPE_CIRCLE绘制圆形
case TYPE_CIRCLE:

int min = Math.min(msrcWidth, msrcHeight);
/**
* 长度如果不一致，按小的值进行压缩
*/
mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);

canvas.drawBitmap(createCircleImage(mSrc), 0, 0, null);
break;
case TYPE_ROUND:
canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
break;

}
}

@Override
public void setBackgroundResource(int resid) {
mBackground = BitmapFactory.decodeResource(getResources(), resid);
postInvalidate();
// super.setBackgroundResource(resid);
}

@SuppressLint("Override")
public void setBackground(Drawable background) {
setBackgroundDrawable(background);
}

@Override
public void setBackgroundDrawable(Drawable background) {
BitmapDrawable bitmapDrawable = (BitmapDrawable) background;
mBackground = bitmapDrawable.getBitmap();
postInvalidate();
}

@Override
public void setImageBitmap(Bitmap bm) {
mSrc = bm;
postInvalidate();
}

@Override
public void setImageResource(int resId) {
setImageBitmap(BitmapFactory.decodeResource(getResources(), resId));
}

@Override
public void setImageDrawable(Drawable drawable) {
BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
setImageBitmap(bitmapDrawable.getBitmap());
}

@Override
public void setBackgroundColor(int color) {
this.color = color;
}

/**
* 根据原图和变长绘制圆形图片
*
* @param bitmap 前景图片
* @return
*/
private Bitmap createCircleImage(Bitmap bitmap) {

int width = mWidth;
int height = mHeight;
float roundPx;
float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;
if (width <= height) {
roundPx = width / 2;
top = 0;
bottom = width;
left = 0;
right = width;
height = width;
dst_left = 0;
dst_top = 0;
dst_right = width;
dst_bottom = width;
} else {
roundPx = height / 2;
float clip = (width - height) / 2;
left = clip;
right = width - clip;
top = 0;
bottom = height;
width = height;
dst_left = 0;
dst_top = 0;
dst_right = height;
dst_bottom = height;
}

Bitmap output = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(output);

// final int color = 0xff424242;
Rect src = new Rect((int) left, (int) top, (int) right, (int) bottom);
Rect dst = new Rect((int) dst_left, (int) dst_top, (int) dst_right,
(int) dst_bottom);

Rect innerRect = new Rect(dst);//内边框矩形
//将矩形向右和向上移动并减少宽度以留出内边框
innerRect.set(dst.left + innerBound, dst.top+innerBound, dst.right - innerBound, dst.bottom - innerBound);

Paint paint = new Paint();

paint.setAntiAlias(true);

canvas.drawARGB(0, 0, 0, 0);
RectF rectF = new RectF(innerRect);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, src, innerRect, paint);

// 画边框圆圈
paint.reset();
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);

if (mBackground == null) {
paint.setColor(color);
paint.setStrokeWidth(strokeWidth);
canvas.drawCircle(width / 2, width / 2,
width / 2 - strokeWidth / 2, paint);
} else {
canvas.drawBitmap(mBackground, src, dst, paint);
}
return output;
}

/**
* 根据原图添加圆角
*
* @param source
* @return
*/
private Bitmap createRoundConerImage(Bitmap bitmap) {

if (bitmap == null) {
return null;
}

Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);

final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, mRadius, mRadius, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);

return output;
}

/**
* 设置圆角图片的角度
*
* @param mRadius
*/
public void setRadius(int mRadius) {
this.mRadius = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, mRadius, getResources()
.getDisplayMetrics());
;
}
}