如何使一个图像按钮圆形,在圆形内,将显示一个图像,图像周围将有一个边框

新版

根据你的评论,我对你需要什么有了更好的了解,因此我将在这里为你提供(重新编辑)我的解决方案。

首先,我扩展了一个ImageView,如下所示:

public class CircleImageView extends AppCompatImageView {


    private int borderColor;
    private float borderWidth;



    public CircleImageView(Context context) {
        super(context);
    }

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

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        parseAttributes(attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        if(b == null || b.isRecycled())
            return;
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();
        int imgRadius = w - 2 * (int)this.borderWidth;

        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(this.borderColor);
         canvas.drawCircle(this.getWidth() / 2,
                this.getHeight() / 2,
                this.getWidth() / 2, paint);
        Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, imgRadius);
        canvas.drawBitmap(roundBitmap, this.borderWidth, this.borderWidth, null);

    }

    public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
        Bitmap finalBitmap;
        if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
            finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                    false);
        else
            finalBitmap = bitmap;
        Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                finalBitmap.getHeight());

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(
                finalBitmap.getWidth() / 2,
                finalBitmap.getHeight() / 2,
                finalBitmap.getWidth() / 2,
                paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);
        return output;
    }


    private void parseAttributes(AttributeSet attrs){
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CircleImageView);

        this.borderColor = ta.getColor(R.styleable.CircleImageView_border_color, 0xffffff); // default color white
        this.borderWidth = ta.getDimension(R.styleable.CircleImageView_border_width, 1.0f);
    }

}

然后我们需要为borderColor和borderWidth设置一些可设置样式的属性,将其放置在res/values/attrs中。xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleImageView">
        <attr name="border_color" format="color" />
        <attr name="border_width" format="dimension" />
    </declare-styleable>
</resources>

然后,您可以将其包括在布局中-它将类似于:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:weightSum="10"
              tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="0dp"
        android:layout_weight="5" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="4.5">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. -->

        <com.mucodes.roundbuttonexample.CircleImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:border_color="#ffff0000"
            app:border_width="7dp"
            android:src="@drawable/random"/>

        <!-- ..........................................................-->



        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="0dp"
        android:layout_weight="0.5" />

</LinearLayout>

然后,可以使用方法setOnClickListener使CircleImageView在单击时像按钮一样工作。

example of using

希望这就是你需要的。

抱歉,由于声誉原因,无法发表评论。

试着看看 fancy buttons library . 在这里,您可以为按钮、背景色、图像等设置半径。 如果您不能使用第三方库,请查看库的源代码,这很简单。