Android CircleImageView：自定义加载网络圆形头像

"Android 自定义圆形头像CircleImageView支持加载网络图片的实现代码" 在Android应用开发中，经常需要展示用户的圆形头像，这通常涉及到图片的裁剪和处理。为了简化这一过程，我们可以创建一个自定义的CircleImageView组件，它能够直接加载网络上的图片并将其转换为圆形显示。下面我们将详细探讨如何实现这个功能。 首先，我们需要让CircleImageView类继承自Android的ImageView类。这样，我们就可以利用ImageView的所有基本功能，同时添加我们自己的定制特性。在CircleImageView的定义中，我们需要声明必要的成员变量，如边框宽度和颜色： ```java public class CircleImageView extends ImageView { private int mBorderWidth = DEFAULT_BORDER_WIDTH; private int mBorderColor = DEFAULT_BORDER_COLOR; // ... } ``` 接下来，我们重写构造函数，以便在初始化时读取XML布局文件中设置的属性。这些属性可能包括边框宽度（border_width）和边框颜色（border_color）。我们使用`TypedArray`来获取这些值，并确保在完成后回收它： ```java public CircleImageView(Context context) { super(context); init(); } public CircleImageView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // ... TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyleAttr, 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(); // ... } ``` 在构造函数中，我们还需要设置ImageView的缩放类型为SCALE_TYPE_CENTER_CROP，这样图片可以填充整个视图，然后根据需要裁剪成圆形。我们可以在`init()`方法中设置这个属性： ```java public void setup() { // ... setScaleType(ScaleType.CENTER_CROP); // ... } ``` 为了将图片转换为圆形，我们需要覆盖`onDraw()`方法，这里我们将使用`Canvas`对象绘制圆形的图像。关键在于利用`BitmapShader`来创建一个圆形的图像着色器，并将其应用到我们的图片上： ```java @Override protected void onDraw(Canvas canvas) { if (getDrawable() == null) { return; } Bitmap bitmap = ((BitmapDrawable) getDrawable()).getBitmap(); BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); Paint paint = new Paint(); paint.setShader(shader); float r = getWidth() / 2f; canvas.drawCircle(r, r, r, paint); // Draw border paint.setStrokeWidth(mBorderWidth); paint.setColor(mBorderColor); paint.setStyle(Paint.Style.STROKE); canvas.drawCircle(r, r, r - mBorderWidth / 2, paint); } ``` 最后，我们还需要确保在ImageView准备好时调用`setup()`方法，以便所有属性都能正确地应用到视图上。这可以通过在`onLayout()`方法中检查`mReady`标志来实现： ```java private boolean mSetupPending = true; @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (changed && mSetupPending) { final int width = getWidth(); final int height = getHeight(); if (width == 0 || height == 0) { // View not yet fully sized, try again later mSetupPending = true; return; } setup(); mSetupPending = false; } } ``` 现在，我们可以使用这个自定义的CircleImageView在XML布局文件中加载网络图片，并自动显示为圆形。例如，可以使用Glide或Picasso等库来加载网络图片： ```xml <com.example.myapp.CircleImageView android:id="@+id/profile_image" android:layout_width="100dp" android:layout_height="100dp" app:border_width="4dp" app:border_color="#FF0000" /> ``` 然后在代码中加载图片： ```java Glide.with(context) .load("https://example.com/user-avatar.jpg") .into(findViewById(R.id.profile_image)); ``` 通过以上步骤，我们就创建了一个自定义的CircleImageView，它可以轻松地从网络加载图片并将其转换为圆形显示，大大简化了Android应用中的头像显示逻辑。这个自定义组件的实现不仅提高了代码的可维护性，还提高了用户体验，因为用户看到的头像是即时、清晰且一致的圆形样式。