วิธีสร้าง CircularImageView ใน Android

CircularImageView คืออะไร?

CircularImageView คือ ImageView ที่แสดงภาพในรูปทรงวงกลม มักนิยมใช้สำหรับโปรไฟล์ผู้ใช้ แอปสื่อสาร หรือ UI ที่ต้องการรูปทรงกลม สามารถทำได้ทั้งแบบเขียนเอง (Custom View) และใช้ Library สำเร็จรูป

วิธีใช้ Library: CircularImageView โดย Mikhael Lopez

Library นี้เป็นที่นิยม ใช้งานง่าย รองรับ Border, Shadow และ Selector

ขั้นตอนที่ 1: เพิ่ม Dependency ใน build.gradle (Module: app)

dependencies {
    // ... dependencies อื่นๆ
    implementation 'com.mikhaellopez:circularimageview:4.2.0' // ใช้เวอร์ชันล่าสุด
}

ขั้นตอนที่ 2: ใช้งานใน Layout XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.mikhaellopez.circularimageview.CircularImageView
        android:id="@+id/circularImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/profile_image"
        app:civ_border_color="#FFFFFF"
        app:civ_border_width="4dp"
        app:civ_shadow="true"
        app:civ_shadow_radius="10"
        app:civ_shadow_color="#8BC34A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ขั้นตอนที่ 3: โหลดภาพด้วย Glide/Picasso (แนะนำ)

// ใน Activity/Fragment
CircularImageView civ = findViewById(R.id.circularImageView);

// ใช้ Glide
Glide.with(this)
    .load("https://example.com/profile.jpg")
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error_image)
    .into(civ);

// หรือใช้ Picasso
Picasso.get()
    .load("https://example.com/profile.jpg")
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error_image)
    .into(civ);

Properties หลักของ CircularImageView

วิธีทำเองแบบไม่ใช้ Library (Custom View)

หากไม่ต้องการเพิ่ม Dependency สามารถสร้าง Custom View ได้ดังนี้:

public class CircleImageView extends androidx.appcompat.widget.AppCompatImageView {
    private Paint paint;
    private Paint paintBorder;
    private int borderColor = Color.WHITE;
    private float borderWidth = 4f;

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

    private void init() { init(null); }
    private void init(AttributeSet attrs) {
        paint = new Paint();
        paint.setAntiAlias(true);
        paintBorder = new Paint();
        paintBorder.setAntiAlias(true);
        paintBorder.setStyle(Paint.Style.STROKE);
        paintBorder.setColor(borderColor);
        paintBorder.setStrokeWidth(borderWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable drawable = getDrawable();
        if (drawable == null) return;

        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
        if (bitmap == null) return;

        int w = getWidth(), h = getHeight();
        int radius = Math.min(w, h) / 2;
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        Matrix matrix = new Matrix();
        float scale = (float) radius * 2 / Math.min(bitmap.getWidth(), bitmap.getHeight());
        matrix.setScale(scale, scale);
        shader.setLocalMatrix(matrix);
        paint.setShader(shader);

        canvas.drawCircle(w / 2f, h / 2f, radius - borderWidth / 2f, paint);
        if (borderWidth > 0) canvas.drawCircle(w / 2f, h / 2f, radius - borderWidth / 2f, paintBorder);
    }
}

สรุป

• ใช้ Library com.mikhaellopez:circularimageview สำหรับโปรเจกต์ทั่วไป (รองรับฟีเจอร์มาก)
• เขียน Custom View เองเมื่อต้องการควบคุมทุกอย่างหรือลดขนาด APK
• ควรโหลดภาพด้วย Glide/Picasso เพื่อจัดการ Cache และ Memory ได้ดี