如何制作一个圆形菜单图标？请参见详细信息。

Question

我正在开发一个基于材料设计的应用程序，希望工具栏上的菜单图标显示为圆形图像而不是矩形图像。

以下是屏幕截图：

请注意菜单图标，它显示为矩形，但我想要它是圆形。

我该怎么做？

- user5289749

---

使用CircularImageView库。 - Tim

你能展示一下圆形菜单按钮的图片吗？ - Cjen1

@TimCastelijns 但是我该如何使用它来更改菜单图标的布局？ - user5289749

如果库没有帮助到您...请在此处查看答案：http://stackoverflow.com/questions/28166664/how-to-show-a-circular-logo-in-action-bar-in-android - Yaser Alosh

Answer 1

有一個 Android 的庫可以將照片製作成圓形的...... https://github.com/hdodenhof/CircleImageView 這是連結....試試看吧 :)

編輯：
或者你也可以使用這個庫： https://github.com/Pkmmte/CircularImageView

- Yaser Alosh

---

问题在于我如何使用这些库来更改菜单图标的布局？ - user5289749

Answer 2

您可以使用此网站返回圆形图标：

Android Asset Studio

然后将其包含在项目中。

- Daniel Orozco

Answer 3

您可以使用图标生成器工具（Android Asset Studio）在2个步骤中生成圆形图标。

1. 将图标图像与相关选项提供给它，并使用下面的链接生成圆形启动器图标。

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

2. 然后使用上面生成的圆形启动器图标（xxxhdpi格式），并将其提供给下面的链接以生成操作栏图标。

https://romannurik.github.io/AndroidAssetStudio/icons-actionbar.html

希望这可以帮助你。

- Sameer Khan

---

这并不是我想要的。实际上，那个“图标”将成为用户设置的“个人资料图片”。因此，我希望每张图片都变成圆形。 - user5289749

Answer 4

您可以通过以下几个由SO推荐的不同提供商的教程来学习：

Android Developer
Vogella
AndroidHive

它们都有很好的示例和源代码，可以帮助您解决问题。

- MDMalik

---

这并不是我想要的。实际上，那个“图标”将成为用户设置的“个人资料图片”。因此，我希望每张图片都能变成圆形。 - user5289749

Answer 5

有4个步骤：

1. 创建菜单项

<menu xmlns:tools="http://schemas.android.com/tools"
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/profile_menu_item"
        android:icon="@drawable/prof"
        app:showAsAction="always"
        tools:ignore="MenuTitle"/>
</menu>

2. 获取菜单项

private MenuItem mProfileMenuItem;
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.main, menu);
        mProfileMenuItem = menu.findItem(R.id.profile_menu_item);
        return true;
    }

3. 将位图裁剪成圆形位图

public Bitmap getCroppedBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    // canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
            bitmap.getWidth() / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    //Bitmap _bmp = Bitmap.createScaledBitmap(output, 60, 60, false);
    //return _bmp;
    return output;
}

来源

4. 下载URL图片并裁剪为位图

new Handler().post(() -> Glide.with(getApplicationContext()).asBitmap().load(url).into(new SimpleTarget<Bitmap>() {
        @Override
        public void onResourceReady(Bitmap resource, Transition<? super Bitmap> transition) {
            if (mProfileMenuItem == null) return;
            mProfileMenuItem.setIcon(new BitmapDrawable(getResources(), Utils.getCroppedBitmap(resource)));
        }
    }));

来源

- thanhbinh84