Question

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

这就是我所说的：

Example

取消选择上面的图像，然后选择下面的图像。

我尝试复制个人资料图片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”那么可能是某些CompoundButton正在使用StateListDrawable的常规和已检查状态作为背景在“SkillOverflow”前景图像后面。

您可以使用 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并绘制某种＆＃34; border＆＃34;来通过自定义ImageView实现此效果。每当它检测到触摸事件。作为奖励，有一个选择器覆盖。希望你会发现这个观点很有用......

https://github.com/Pkmmte/CircularImageView

enter image description here

Answer 5

https://github.com/hdodenhof/CircleImageView

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

像Google+这样的可选圆形图像视图

5 个答案: