android - 可选择的圆形图像视图，如 Google+

Question

如何ImageView在用于个人资料图片的当前 Google+ 应用程序中创建一个可选择的循环？

这就是我所指的：

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

我尝试以 1 对 1 复制个人资料图片。

到目前为止我的工作：

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。所以，这意味着背景应该与图像重叠。这是行不通的。

Answer 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;
}

Answer 2

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

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

Answer 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。

Answer 4

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

https://github.com/Pkmmte/CircularImageView

Answer 5

https://github.com/hdodenhof/CircleImageView

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