可选择的圆形图像视图，如 Google+答案

【问题标题】：Selectable circular imageview like Google+可选择的圆形图像视图，如 Google+
【发布时间】：2013-06-04 16:16:04
【问题描述】：

如何创建一个可选择的圆形ImageView，就像当前用于个人资料图片的 Google+ 应用程序一样？

这就是我所指的：

上图未选中，下图已选中。

我尝试一一复制个人资料图片。

我目前的工作：

loadedImage 是显示的Bitmap

mImageView.setBackground(createStateListDrawable());
mImageView.setImageBitmap(createRoundImage(loadedImage));

使用的方法：

private Bitmap createRoundImage(Bitmap loadedImage) {
    Bitmap circleBitmap = Bitmap.createBitmap(loadedImage.getWidth(), loadedImage.getHeight(), Bitmap.Config.ARGB_8888);

    BitmapShader shader = new BitmapShader(loadedImage, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(shader);

    Canvas c = new Canvas(circleBitmap);
    c.drawCircle(loadedImage.getWidth() / 2, loadedImage.getHeight() / 2, loadedImage.getWidth() / 2, paint);

    return circleBitmap;
}

private StateListDrawable createStateListDrawable() {
    StateListDrawable stateListDrawable = new StateListDrawable();

    OvalShape ovalShape = new OvalShape();
    ShapeDrawable shapeDrawable = new ShapeDrawable(ovalShape);
    stateListDrawable.addState(new int[] { android.R.attr.state_pressed }, shapeDrawable);
    stateListDrawable.addState(StateSet.WILD_CARD, shapeDrawable);

    return stateListDrawable;
}

ImageView 的大小为imageSizePx，图像的大小为imageSizePx - 3。所以，这意味着背景应该与图像重叠。哪个不行。

【问题讨论】：

有你所指的截图吗？
也许这会有所帮助。 stackoverflow.com/questions/13108803/…
@CommonsWare 等一下。
@CommonsWare 更新了我的问题。
图片按钮？ stackoverflow.com/questions/3914329/round-button-in-android

标签： android graphics imageview

【解决方案1】：

非常简单的解决方案，感谢@CommonsWare 的提示。

Bitmap 的大小：imageSizePx - 3DP
ImageView的大小：imageSizePx

mImageView.setBackground(createStateListDrawable(imageSizePx));
mImageView.setImageBitmap(loadedImage);

private StateListDrawable createStateListDrawable(int size) {
    StateListDrawable stateListDrawable = new StateListDrawable();

    OvalShape ovalShape = new OvalShape();
    ovalShape.resize(size, size);
    ShapeDrawable shapeDrawable = new ShapeDrawable(ovalShape);
    shapeDrawable.getPaint().setColor(getResources().getColor(R.color.somecolor));

    stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, shapeDrawable);
    stateListDrawable.addState(new int[]{android.R.attr.state_focused}, shapeDrawable);
    stateListDrawable.addState(new int[]{}, null);

    return stateListDrawable;
}

【讨论】：

【解决方案2】：

假设“可选择”是指“可检查，如CheckBox”，那么可能是一些CompoundButton 使用StateListDrawable，在“SkillOverflow”前景后面的背景具有常规和检查状态图片。

您可以使用 uiautomatorviewer 查看 Google+ 使用的实际小部件。

【讨论】：

可选择我的意思是，我有触摸反馈。我使用术语可选，因为默认的 xml 也被命名为selectable_background_holo。很抱歉造成混乱。
@Leandros：那么它可能是一个ImageButton，背景是自定义的StateListDrawable。
很有可能。问题是，如何创建如上例中的效果？那里只出现了一个圆形的笔触，而不是整个矩形 ImageButton / ImageView 被突出显示。
@Leandros：那将是我一直提到的背景的自定义StateListDrawable。使按钮看起来像按钮的原因在于它的背景，并且该背景针对不同的状态（正常、按下、选中、选中等）呈现不同的图像。
是的，当然。这是一个好主意，在我想到制作 ImageView 圆形之前，但是一个宽约 2 像素的圆形 StateListDrawable 是一个更好的主意。现在如何制作一个以编程方式缩放的StateListDrawable？

【解决方案3】：

您可以制作扩展 ImageView 的自定义视图。覆盖 onDraw 以使用圆形区域裁剪画布并在画布上绘制图像。以此为起点：

public class CircularImageView extends ImageView {
    /* constructors omitted for brevity ... */

    protected void onDraw(Canvas canvas) {
        int saveCount = canvas.save();

        // clip in a circle

        // draw image
        Drawable d = getDrawable();
        if (d != null) {
            d.draw(canvas);
        }

        // do extra drawing on canvas if pressed

        canvas.restoreToCount(saveCount);
    }
}

花点时间熟悉一下 Android 中的 Canvas 和其他 2D 绘图 API。

【讨论】：

【解决方案4】：

通过覆盖onDraw 并在检测到触摸事件时绘制某种“边框”，我能够通过自定义 ImageView 实现此效果。作为奖励，有一个选择器覆盖。希望此视图对您有所帮助...

https://github.com/Pkmmte/CircularImageView

【讨论】：

【解决方案5】：

https://github.com/hdodenhof/CircleImageView

迄今为止最好的库，超级容易集成。它将为您提供边框宽度和颜色选项，您可以更改 onClick 的颜色以匹配您的查询。

【讨论】：