圆形ImageView

时间:2013-03-19 14:38:52

标签: android android-view

我一直在研究如何在Android中创建圆形ImageView。在StackOverflow上阅读有关该主题的问题后:

How to make an image fit into a circular frame in android

How to set bitmap in circular imageview?

我使用链接作为指导,将我自己的ImageView放在一起,完成了我需要它做的事情:带边框的圆形图像。

以下是我正在使用的代码:

public class CircularImageView extends ImageView
{

private int borderWidth = 5;
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(Color.BLUE);
    paintBorder.setAntiAlias(true);     
}

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)
    {
        // Create a shader with a scaled bitmap to match the view dimensions            
        shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        paint.setShader(shader);
        int circleCenter = viewWidth / 2;

                    // Draw the outer border
                    canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth, paintBorder);
        // 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, 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;
}
}

我打算制作这个开源软件,如果有人可以查看代码以确保我正确地完成所有操作,我会很感激。

4 个答案:

答案 0 :(得分:2)

尝试使用此功能获取圆角图像:

   private Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) 
    {
        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());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;
        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }

答案 1 :(得分:0)

如果您对按钮的边框不那么严格。那么为什么不制作一个带有透明边缘的圆形PNG图像文件。

答案 2 :(得分:0)

这可能不是最好的方法,你可能无法改变很多属性,但这肯定是最简单的方法。我刚刚使用了this库,我创建了一个带有边框的圆形图像视图。


所以,这是我的解决方案:

首先,我把它放在我的build.grandle

`compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'`

第二次,我把它放在我的.xml布局文件中:

 <com.github.siyamed.shapeimageview.CircularImageView
                    android:layout_width="150dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_height="150dp"
                    android:id="@+id/photo"
                    app:siBorderWidth="5dp"
                    app:siBorderColor="#ffffff"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true" />

在我的.java文件中,这是我可以采取的方式或将图像设置为CircularImageView

final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo);

photo.setBackgroundResource(R.drawable.female);

我所做的一切都是用白色边框做圆形图像。

答案 3 :(得分:0)

添加与android x兼容的最新依赖项

"MH": {"MHF46": "Ledig", "MHF60": "60", QMSI: [{}]}