Android CircleImageView 实现圆形头像详解

"本文将详细介绍如何在Android应用中利用CircleImageView组件来实现圆形头像的效果。" 在Android开发中，为了使应用界面更加美观和个性化，我们经常需要将用户头像展示为圆形。CircleImageView是一个专门为实现这个目的而设计的自定义视图。它将普通的方形图片转换为圆形显示，使得头像看起来更符合现代UI设计的要求。 首先，我们需要创建一个属性文件（attrs.xml），这是定义自定义视图所需属性的地方。在项目的values目录下新建一个XML文件，命名为attrs.xml。在这个文件中，我们声明两个自定义属性：`border_width`用于设置边框宽度，`border_color`用于设置边框颜色。以下是 attrs.xml 的内容： ```xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleImageView"> <attr name="border_width" format="dimension"/> <attr name="border_color" format="color"/> </declare-styleable> </resources> ``` 接下来，我们编写CircleImageView的实现类。这个类继承自Android的ImageView，并覆盖其onDraw()方法，以实现圆形化图片的功能。以下是一个简单的CircleImageView.java代码示例： ```java import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; import android.util.AttributeSet; public class CircleImageView extends android.widget.ImageView { private float mBorderWidth = 0; private int mBorderColor = Color.TRANSPARENT; public CircleImageView(Context context) { super(context); } 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.getDimension(R.styleable.CircleImageView_border_width, 0); mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, mBorderColor); a.recycle(); } @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (drawable == null) { return; } if (getWidth() == 0 || getHeight() == 0) { return; } if (drawable.getIntrinsicWidth() <= 0 || drawable.getIntrinsicHeight() <= 0) { return; } Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap(); Bitmap shaderBitmap = bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas shaderCanvas = new Canvas(shaderBitmap); final int saveCount = shaderCanvas.save(); try { shaderCanvas.translate((getWidth() - bitmap.getWidth()) / 2, (getHeight() - bitmap.getHeight()) / 2); Paint paint = new Paint(); BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint.setShader(shader); // 添加边框效果 paint.setAntiAlias(true); RectF rect = new RectF(0, 0, getWidth(), getHeight()); if (mBorderWidth > 0) { paint.setStrokeWidth(mBorderWidth); paint.setColor(mBorderColor); shaderCanvas.drawRoundRect(rect, Math.max(getWidth(), getHeight()) / 2f, Math.max(getWidth(), getHeight()) / 2f, paint); } shaderCanvas.drawCircle(Math.max(getWidth(), getHeight()) / 2f, Math.max(getWidth(), getHeight()) / 2f, Math.max(getWidth(), getHeight()) / 2f, paint); } finally { shaderCanvas.restoreToCount(saveCount); } canvas.drawBitmap(shaderBitmap, 0, 0, null); } } ``` 这个类的核心在于onDraw()方法，它首先创建了一个与视图大小相同的Bitmap，然后在这个Bitmap上绘制圆形的图片。如果设置了边框宽度和颜色，还会额外绘制一个圆形边框。最后，将处理后的Bitmap绘制到原始Canvas上，实现了圆形头像的效果。 在布局文件中使用CircleImageView时，可以这样引用： ```xml <com.example.yourpackage.CircleImageView android:id="@+id/circle_image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:border_width="4dp" app:border_color="#FF0000" /> ``` 至此，你已经学会了如何在Android项目中使用CircleImageView实现圆形头像。通过自定义View和属性，我们可以自由地控制头像的边框宽度和颜色，使其更加符合应用的设计风格。