android 圆形头像—— android开源系列：CircleImageView自定义圆形控件的使用

http://blog.csdn.net/nupt123456789/article/details/24886451?utm_source=tuicool&utm_medium=referral

在使用这个自定义的控件时，需要添加属性声明，

而且在布局中使用时，引用图片时需要使用的android:src="@drawable/ic_launcher" ，而不是android:background="@drawable/ic_launcher"

如何为circleImageView动态设置src， circleImageView是自定义的圆形ImageView

setImageBitmap(Bitmap bm);
setImageDrawable(Drawable d);
setImageResource(int resId);

// 自定义控件里面，有声明好的方法，可以进行设置的！
icon.setImageResource(R.drawable.yi);

1.自定义圆形控件github地址：https://github.com/hdodenhof/CircleImageView

主要的类：

[java] view plain copy

packagede.hdodenhof.circleimageview;
importedu.njupt.zhb.main.R;
importandroid.content.Context;
importandroid.content.res.TypedArray;
importandroid.graphics.Bitmap;
importandroid.graphics.BitmapShader;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Matrix;
importandroid.graphics.Paint;
importandroid.graphics.RectF;
importandroid.graphics.Shader;
importandroid.graphics.drawable.BitmapDrawable;
importandroid.graphics.drawable.ColorDrawable;
importandroid.graphics.drawable.Drawable;
importandroid.util.AttributeSet;
importandroid.widget.ImageView;
publicclassCircleImageViewextendsImageView{
privatestaticfinalScaleTypeSCALE_TYPE=ScaleType.CENTER_CROP;
privatestaticfinalBitmap.ConfigBITMAP_CONFIG=Bitmap.Config.ARGB_8888;
privatestaticfinalintCOLORDRAWABLE_DIMENSION=1;
privatestaticfinalintDEFAULT_BORDER_WIDTH=0;
privatestaticfinalintDEFAULT_BORDER_COLOR=Color.BLACK;
privatefinalRectFmDrawableRect=newRectF();
privatefinalRectFmBorderRect=newRectF();
privatefinalMatrixmShaderMatrix=newMatrix();
privatefinalPaintmBitmapPaint=newPaint();
privatefinalPaintmBorderPaint=newPaint();
privateintmBorderColor=DEFAULT_BORDER_COLOR;
privateintmBorderWidth=DEFAULT_BORDER_WIDTH;
privateBitmapmBitmap;
privateBitmapShadermBitmapShader;
privateintmBitmapWidth;
privateintmBitmapHeight;
privatefloatmDrawableRadius;
privatefloatmBorderRadius;
privatebooleanmReady;
privatebooleanmSetupPending;
publicCircleImageView(Contextcontext){
super(context);
}
publicCircleImageView(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}
publicCircleImageView(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);
super.setScaleType(SCALE_TYPE);
TypedArraya=context.obtainStyledAttributes(attrs,R.styleable.CircleImageView,defStyle,0);
mBorderWidth=a.getDimensionPixelSize(R.styleable.CircleImageView_border_width,DEFAULT_BORDER_WIDTH);
mBorderColor=a.getColor(R.styleable.CircleImageView_border_color,DEFAULT_BORDER_COLOR);
a.recycle();
mReady=true;
if(mSetupPending){
setup();
mSetupPending=false;
}
}
@Override
publicScaleTypegetScaleType(){
returnSCALE_TYPE;
}
@Override
publicvoidsetScaleType(ScaleTypescaleType){
if(scaleType!=SCALE_TYPE){
thrownewIllegalArgumentException(String.format("ScaleType%snotsupported.",scaleType));
}
}
@Override
protectedvoidonDraw(Canvascanvas){
if(getDrawable()==null){
return;
}
canvas.drawCircle(getWidth()/2,getHeight()/2,mDrawableRadius,mBitmapPaint);
canvas.drawCircle(getWidth()/2,getHeight()/2,mBorderRadius,mBorderPaint);
}
@Override
protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
setup();
}
publicintgetBorderColor(){
returnmBorderColor;
}
publicvoidsetBorderColor(intborderColor){
if(borderColor==mBorderColor){
return;
}
mBorderColor=borderColor;
mBorderPaint.setColor(mBorderColor);
invalidate();
}
publicintgetBorderWidth(){
returnmBorderWidth;
}
publicvoidsetBorderWidth(intborderWidth){
if(borderWidth==mBorderWidth){
return;
}
mBorderWidth=borderWidth;
setup();
}
@Override
publicvoidsetImageBitmap(Bitmapbm){
super.setImageBitmap(bm);
mBitmap=bm;
setup();
}
@Override
publicvoidsetImageDrawable(Drawabledrawable){
super.setImageDrawable(drawable);
mBitmap=getBitmapFromDrawable(drawable);
setup();
}
@Override
publicvoidsetImageResource(intresId){
super.setImageResource(resId);
mBitmap=getBitmapFromDrawable(getDrawable());
setup();
}
privateBitmapgetBitmapFromDrawable(Drawabledrawable){
if(drawable==null){
returnnull;
}
if(drawableinstanceofBitmapDrawable){
return((BitmapDrawable)drawable).getBitmap();
}
try{
Bitmapbitmap;
if(drawableinstanceofColorDrawable){
bitmap=Bitmap.createBitmap(COLORDRAWABLE_DIMENSION,COLORDRAWABLE_DIMENSION,BITMAP_CONFIG);
}else{
bitmap=Bitmap.createBitmap(drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight(),BITMAP_CONFIG);
}
Canvascanvas=newCanvas(bitmap);
drawable.setBounds(0,0,canvas.getWidth(),canvas.getHeight());
drawable.draw(canvas);
returnbitmap;
}catch(OutOfMemoryErrore){
returnnull;
}
}
privatevoidsetup(){
if(!mReady){
mSetupPending=true;
return;
}
if(mBitmap==null){
return;
}
mBitmapShader=newBitmapShader(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);
mBitmapHeight=mBitmap.getHeight();
mBitmapWidth=mBitmap.getWidth();
mBorderRect.set(0,0,getWidth(),getHeight());
mBorderRadius=Math.min((mBorderRect.height()-mBorderWidth)/2,(mBorderRect.width()-mBorderWidth)/2);
mDrawableRect.set(mBorderWidth,mBorderWidth,mBorderRect.width()-mBorderWidth,mBorderRect.height()-mBorderWidth);
mDrawableRadius=Math.min(mDrawableRect.height()/2,mDrawableRect.width()/2);
updateShaderMatrix();
invalidate();
}
privatevoidupdateShaderMatrix(){
floatscale;
floatdx=0;
floatdy=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)+mBorderWidth,(int)(dy+0.5f)+mBorderWidth);
mBitmapShader.setLocalMatrix(mShaderMatrix);
}
}

自定义的属性：res/values/attrs.xml

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<declare-styleablename="CircleImageView">
<attrname="border_width"format="dimension"/>
<attrname="border_color"format="color"/>
</declare-styleable>
</resources>

使用时的布局文件：

在引用圆形自定义View的时候，注意xml的属性设置，http://www.tuicool.com/articles/mQNFJ3注意：红色的属性；

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="@dimen/base_padding"
android:background="@color/light">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:src="@drawable/demo"
app:border_width="2dp"
app:border_color="@color/dark"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="@dimen/base_padding"
android:background="@color/dark">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:src="@drawable/lena"
app:border_width="2dp"
app:border_color="@color/light"/>
</RelativeLayout>
</LinearLayout>

效果：

Demo下载：http://download.csdn.net/detail/nuptboyzhb/7284553

注意：有些开发者可能也发现了，如果我们需要一个圆形的ImageButton的话，其实，我们没有必要自己写。如果ImageButton的图标是固定不变的，我们完全可以让设计师给我设计一个圆形的图片，然后直接设置再ImageButton上就可以了。但是，请注意，我们这里的圆形ImageView是自定义控件，也即是：无论你设置的图片是什么样的，显示出来的就是圆的。比如：易信中用户头像的设置，无论用户拍什么的照片，显示出来都是一个圆的。

拓展阅读：

还有一个更加强大的RoundedImageView，还支持圆角，椭圆等等。

https://github.com/vinc3m1/RoundedImageView

更多相关文章

随机推荐