在棒棒堂圆形图像视图黑色背景 [英] Black background in circular image view in Lollipop

问题描述

我用圆形图像视图实现圆形轮廓图像与一些彩色边框。在code可以完美运行于pre-棒棒糖设备。

不过，同样的code 在棒棒堂设备显示的黑色背景圆形图像视图落后。

试了很多猜测，但无法修复bug！请帮助。

下面是code： -

 公共类CircularImageView扩展了ImageView的{
私人INT边框宽度= 4;
私人诠释viewWidth;
私人诠释viewHeight;
私人位图图像;
私人涂料粉刷;
私人涂料的paintBorder;
私人BitmapShader着色器;公共CircularImageView（上下文的背景下）{
    超级（上下文）;
    建立（）;
}公共CircularImageView（上下文的背景下，ATTRS的AttributeSet）{
    超（背景下，ATTRS）;
    建立（）;
}公共CircularImageView（上下文的背景下，ATTRS的AttributeSet，诠释defStyle）{
    超（背景下，ATTRS，defStyle）;
    建立（）;
}私人无效设置（）{
    //初始化漆
    油漆=新的油漆（）;
    paint.setAntiAlias​​（真）;    的paintBorder =新的油漆（）;
    setBorderColor（getResources（）的getColor（R.color.rounded_imageview_border））;
    paintBorder.setAntiAlias​​（真）;
    this.setLayerType（LAYER_TYPE_SOFTWARE，的paintBorder）;
}公共无效setBorderWidth（INT边框宽度）{
    this.borderWidth =边框宽度;
    this.invalidate（）;
}公共无效setBorderColor（INT BORDERCOLOR）{
    如果（的paintBorder！= NULL）
        paintBorder.setColor（BORDERCOLOR）;    this.invalidate（）;
}私人无效loadBitmap（）{
    BitmapDrawable bitmapDrawable =（BitmapDrawable）this.getDrawable（）;    如果（bitmapDrawable！= NULL）
        图像= bitmapDrawable.getBitmap（）;
}@燮pressLint（DrawAllocation）
@覆盖
公共无效的onDraw（帆布油画）{
    //加载位图
    loadBitmap（）;    //初始化着色器
    如果（形象！= NULL）{
        着色器=新BitmapShader（Bitmap.createScaledBitmap（图像，
                canvas.getWidth（），canvas.getHeight（），FALSE），
                Shader.TileMode.CLAMP，Shader.TileMode.CLAMP）;
        paint.setShader（着色器）;
        INT circleCenter = viewWidth / 2;        // circleCenter认为中心的x或y
        //半径在cirle的像素的半径要绘制
        //涂料包含将纹理形状着色器
        canvas.drawCircle（circleCenter +边框宽度，circleCenter
                +边框宽度，circleCenter +边框宽度 -  4.0F，
                的paintBorder）;
        canvas.drawCircle（circleCenter +边框宽度，circleCenter
                +边框宽度，circleCenter  -  4.0F，油漆）;
    }
}@覆盖
保护无效onMeasure（INT widthMeasureSpec，诠释heightMeasureSpec）{
    INT宽度= measureWidth（widthMeasureSpec）;
    INT高度= measureHeight（heightMeasureSpec，widthMeasureSpec）;    viewWidth =宽度 - （边框宽度* 2）;
    viewHeight =身高 - （边框宽度* 2）;    setMeasuredDimension（宽度，高度）;
}私人诠释measureWidth（INT measureSpec）{
    INT结果为0;
    INT specMode = MeasureSpec.getMode（measureSpec）;
    INT specSize = MeasureSpec.getSize（measureSpec）;    如果（specMode == MeasureSpec.EXACTLY）{
        //我们被告知有多大是
        结果= specSize;
    }其他{
        //测量的文本
        结果= viewWidth;
    }    返回结果;
}私人诠释measureHeight（INT measureSpecHeight，诠释measureSpecWidth）{
    INT结果为0;
    INT specMode = MeasureSpec.getMode（measureSpecHeight）;
    INT specSize = MeasureSpec.getSize（measureSpecHeight）;    如果（specMode == MeasureSpec.EXACTLY）{
        //我们被告知有多大是
        结果= specSize;
    }其他{
        //测量的文本（注意：上升为负数）
        结果= viewHeight;
    }    回报（结果+ 2）;
}}
 

我所在的地方使用它的XML文件： -

 ＆LT; com.app.demo.customwidgets.CircularImageView
            机器人：layout_width =100dp
            机器人：layout_height =100dp
            机器人：ID =@ + ID / userImage
            机器人：SRC =@绘制/ default_profile_pic
            机器人：layout_alignParentBottom =真
            机器人：layout_alignParentLeft =真
            机器人：scaleType =centerCrop
            机器人：layout_margin =10dp/＆GT;
 

解决方案

在设置方法调用：

  paintBorder.setAlpha（254）;
 

I have used Circular Image View to implement profile image in circular shape with some colored border. The code works perfect on pre-lollipop devices.

But, the same code on Lollipop device shows a Black Background behind the rounded image view.

Tried many guesses but unable to fix the bug! Please help.

Below is the code :-

public class CircularImageView extends ImageView {
private int borderWidth = 4;
private int viewWidth;
private int viewHeight;
private Bitmap image;
private Paint paint;
private Paint paintBorder;
private BitmapShader shader;

public CircularImageView(Context context) {
    super(context);
    setup();
}

public CircularImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setup();
}

public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setup();
}

private void setup() {
    // init paint
    paint = new Paint();
    paint.setAntiAlias(true);

    paintBorder = new Paint();
    setBorderColor(getResources().getColor(R.color.rounded_imageview_border));
    paintBorder.setAntiAlias(true);
    this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
}

public void setBorderWidth(int borderWidth) {
    this.borderWidth = borderWidth;
    this.invalidate();
}

public void setBorderColor(int borderColor) {
    if (paintBorder != null)
        paintBorder.setColor(borderColor);

    this.invalidate();
}

private void loadBitmap() {
    BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

    if (bitmapDrawable != null)
        image = bitmapDrawable.getBitmap();
}

@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas) {
    // load the bitmap
    loadBitmap();

    // init shader
    if (image != null) {
        shader = new BitmapShader(Bitmap.createScaledBitmap(image,
                canvas.getWidth(), canvas.getHeight(), false),
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint.setShader(shader);
        int circleCenter = viewWidth / 2;

        // circleCenter is the x or y of the view's center
        // radius is the radius in pixels of the cirle to be drawn
        // paint contains the shader that will texture the shape
        canvas.drawCircle(circleCenter + borderWidth, circleCenter
                + borderWidth, circleCenter + borderWidth - 4.0f,
                paintBorder);
        canvas.drawCircle(circleCenter + borderWidth, circleCenter
                + borderWidth, circleCenter - 4.0f, paint);
    }
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = measureWidth(widthMeasureSpec);
    int height = measureHeight(heightMeasureSpec, widthMeasureSpec);

    viewWidth = width - (borderWidth * 2);
    viewHeight = height - (borderWidth * 2);

    setMeasuredDimension(width, height);
}

private int measureWidth(int measureSpec) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    if (specMode == MeasureSpec.EXACTLY) {
        // We were told how big to be
        result = specSize;
    } else {
        // Measure the text
        result = viewWidth;
    }

    return result;
}

private int measureHeight(int measureSpecHeight, int measureSpecWidth) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpecHeight);
    int specSize = MeasureSpec.getSize(measureSpecHeight);

    if (specMode == MeasureSpec.EXACTLY) {
        // We were told how big to be
        result = specSize;
    } else {
        // Measure the text (beware: ascent is a negative number)
        result = viewHeight;
    }

    return (result + 2);
}}

And the xml file where I am using it is :-

<com.app.demo.customwidgets.CircularImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/userImage"
            android:src="@drawable/default_profile_pic"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:scaleType="centerCrop"
            android:layout_margin="10dp" />

解决方案

Inside setup method, call:

paintBorder.setAlpha(254);

这篇关于在棒棒堂圆形图像视图黑色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！