如何使图像按钮为圆形并在圆圈内，将显示图像并在图像周围有边框

Question

我一直在寻找如何使图像按钮成为圆形并在圆圈内显示图像。但我找不到任何有用的资源。我只有 24 小时，我的客户会检查的。

我的目标是创建图像按钮（黑色圆圈，见下图，其中可以显示图像）。见下图：

这是我的 XML 部分...ImageButton 位于两条注释行之间

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/backg"
    android:orientation="vertical"
    android:weightSum="10"
    tools:context="sudhirpradhan.example.com.clientpptapp.mainIconFragment">


    <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 .............. -->

        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="0dp"
            android:padding="10dp"
            android:scaleType="fitCenter"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:layout_weight="3"
            android:background="@drawable/roundbutton"
            android:src="@drawable/frontbutton" />
<!-- ..........................................................-->
        <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>

这是@drawable/roundbutton xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#50d050"
        android:endColor="#008000"
        android:angle="270"/>
    <stroke android:width="5px"
        android:color="#000000"/>

</shape>

我该如何实现..任何建议，谢谢。

Answer 1

新版本

根据您的 cmets，我对您的需求有了更好的了解，因此我将在此处提供（重新编辑）我为您提供的解决方案。

首先我像这样扩展了一个 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设置一些styleable的属性，放在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

希望这就是你所需要的。

Answer 2

抱歉，由于声誉问题，无法发表评论。

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