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

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

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

Answer 2

新版

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

首先我像这样扩展了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

希望现在这就是你所需要的。

如何使图像按钮呈圆形并在圆内，将显示图像并在图像周围出现边框

2 个答案: