如何在圆形imageView android上添加阴影和边框? [英] How to add a shadow and a border on circular imageView android?

问题描述

我用这个问题创建了一个 CircularImageView: 使用 gradle 依赖项所有修复:

编译'com.mikhaellopez:circularimageview:2.0.1'

解决方案

我修改了 CircularImageView found here实现你想要的.

为了在边框周围创建阴影，我简单地使用了这两行:

this.setLayerType(LAYER_TYPE_SOFTWARE,paintBorder);PaintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);

由于 HoneyComb 及更高版本的硬件加速，您需要 setLayerType.当我尝试它时，没有它就行不通.

完整代码如下:

import android.annotation.SuppressLint;导入 android.content.Context;导入 android.graphics.Bitmap;导入 android.graphics.BitmapShader；导入 android.graphics.Canvas;导入 android.graphics.Color;导入 android.graphics.Paint;导入 android.graphics.Shader;导入 android.graphics.drawable.BitmapDrawable;导入 android.util.AttributeSet;导入 android.widget.ImageView;公共类 CircularImageView 扩展 ImageView{私人 int borderWidth = 4;私人 int viewWidth;私人 int viewHeight;私人位图图像；私人油漆涂料；私人油漆paintBorder;私有位图着色器；公共 CircularImageView(上下文上下文){超级(上下文)；设置();}public CircularImageView(上下文上下文，AttributeSet attrs){超级(上下文，属性)；设置();}public CircularImageView(上下文上下文，AttributeSet attrs，int defStyle){超级(上下文，属性，defStyle)；设置();}私人无效设置(){//初始化绘制油漆 = 新油漆()；Paint.setAntiAlias(true);PaintBorder = new Paint();setBorderColor(Color.WHITE);PaintBorder.setAntiAlias(true);this.setLayerType(LAYER_TYPE_SOFTWARE,paintBorder);PaintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);}public void setBorderWidth(int borderWidth){this.borderWidth = borderWidth;this.invalidate();}public void setBorderColor(int borderColor){如果(paintBorder ！= null)PaintBorder.setColor(borderColor);this.invalidate();}私有无效 loadBitmap(){BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();if (bitmapDrawable != null)图像 = bitmapDrawable.getBitmap();}@SuppressLint("DrawAllocation")@覆盖公共无效 onDraw(画布画布){//加载位图加载位图()；//初始化着色器如果(图像！= null){shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);Paint.setShader(着色器)；int circleCenter = viewWidth/2;//circleCenter 是视图中心的 x 或 y//半径是要绘制的圆的半径(以像素为单位)//油漆包含将纹理形状的着色器canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth - 4.0f,paintBorder);canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter - 4.0f, 油漆);}}@覆盖protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){int width = measureWidth(widthMeasureSpec);int height = measureHeight(heightMeasureSpec, widthMeasureSpec);viewWidth = 宽度 - (borderWidth * 2);视图高度 = 高度 - (borderWidth * 2);setMeasuredDimension(宽度，高度)；}私有 int measureWidth(int measureSpec){整数结果 = 0;int specMode = MeasureSpec.getMode(measureSpec);int specSize = MeasureSpec.getSize(measureSpec);如果(specMode == MeasureSpec.EXACTLY){//我们被告知有多大结果 = 规格尺寸；}别的{//测量文本结果 = 视图宽度；}返回结果；}私有 int measureHeight(int measureSpecHeight, int measureSpecWidth){整数结果 = 0;int specMode = MeasureSpec.getMode(measureSpecHeight);int specSize = MeasureSpec.getSize(measureSpecHeight);如果(specMode == MeasureSpec.EXACTLY){//我们被告知有多大结果 = 规格尺寸；}别的{//测量文本(注意:上升是​​一个负数)结果 = 视图高度；}返回(结果 + 2)；}}

希望能帮到你！

.

编辑

我分叉了您的 CircularImageView 并添加了对选择器叠加的支持.我还显着提高了绘图性能...

https://github.com/Pkmmte/CircularImageView

I created a CircularImageView with this question: Create circular image view in android

Download project on GitHub

1) This is the CircularImageView class :

public class CircularImageView extends ImageView {
    public CircularImageView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return; 
        }
        Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);      

        Bitmap roundBitmap =  getCroppedBitmap(bitmap, getWidth());
        canvas.drawBitmap(roundBitmap, 0, 0, null);
    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;
        if(bmp.getWidth() != radius || bmp.getHeight() != radius)
            sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
        else
            sbmp = bmp;

        Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(), Bitmap.Config.ARGB_8888);
        final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);      
        paint.setColor(Color.parseColor("#BAB399"));

        Canvas c = new Canvas(output);        
        c.drawARGB(0, 0, 0, 0);
        c.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f, sbmp.getWidth() / 2+0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        c.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }
}

2) I use in my layout like this :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp" >

    <com.mikhaellopez.circularimageview.CircularImageView
        android:id="@+id/imageViewCircular"
        android:layout_width="@dimen/image_view_size"
        android:layout_height="@dimen/image_view_size"
        android:layout_gravity="center"
        android:background="@drawable/border"
        android:src="@drawable/image" />

</LinearLayout>

3) Current result in picture :

How do I change this code to have a shadow and a circular border around my imageView?

Objectif result :

---

Edit 10/15/2015 :

You can used or download my GitHub library CircularImageView with all the fixes by using gradle dependency :

compile 'com.mikhaellopez:circularimageview:2.0.1'

解决方案

I modified the CircularImageView found here to achieve what you want.

To create a shadow around the border, I simply used these two lines:

this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);

You need setLayerType due to hardware acceleration on HoneyComb and up. It didn't work without it when I tried it.

Here is the full code:

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

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(Color.WHITE);
        paintBorder.setAntiAlias(true);
        this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    }

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

I hope it helps!

.

EDIT

I forked your CircularImageView and added support for selector overlays. I also improved drawing performance significantly...

https://github.com/Pkmmte/CircularImageView

这篇关于如何在圆形imageView android上添加阴影和边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！