美文网首页
Android 自定义圆形imageview,并且带点击效果

Android 自定义圆形imageview,并且带点击效果

作者: 谁动了我的代码QAQ | 来源:发表于2018-08-11 16:48 被阅读0次

    最近有个做产品的时候有个新需求,要求recylerview中的item为圆形,并且点击后,有选中效果的边框。具体效果如下图:


    效果一.jpeg
    效果二.jpeg

    所以我在recylerview的item中自定义了imageview,实现图片的圆形显示,并且点击的时候,显示圆形边框,边框颜色也可以自己设置。直接上代码

    public class CircleImageView extends
    android.support.v7.widget.AppCompatImageView {
    
    private Paint mPaint;
    private Paint mPaint2;
    private BitmapShader mBitmapShader;
    
    int bw = 0;
    int bh = 0;
    
    public CircleImageView(Context context)
    {
        this(context, null);
    }
    
    public CircleImageView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
    }
    
    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    
    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
    
        mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint2.setStyle(Paint.Style.STROKE);
        mPaint2.setStrokeWidth(4);
        mPaint2.setColor(mBorderColor);
    }
    
    @Override
    public void setImageDrawable(Drawable drawable)
    {
        super.setImageDrawable(drawable);
        Bitmap bmp = getBitmapFromDrawable(drawable);
        if(bmp!=null) {
            mBitmapShader = new BitmapShader(bmp , Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            mPaint.setShader(mBitmapShader);
            bw = bmp.getWidth();
            bh = bmp.getHeight();
        }else{
            mBitmapShader = null;
        }
    }
    
    private Bitmap getBitmapFromDrawable(Drawable drawable)
    {
        if (drawable == null) return null;
        if (drawable instanceof BitmapDrawable)
            return ((BitmapDrawable) drawable).getBitmap();
        try
        {
            Bitmap bitmap;
            if (drawable instanceof ColorDrawable) {
                bitmap = Bitmap.createBitmap(2, 2, Bitmap.Config.ARGB_8888);
            }else {
                bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
                        drawable.getIntrinsicHeight(),
                        Bitmap.Config.ARGB_8888);
            }
            bw = bitmap.getWidth();
            bh = bitmap.getHeight();
            return bitmap;
        }
        catch (OutOfMemoryError e)
        {
            return null;
        }
    }
    
    @Override
    public void setImageBitmap(Bitmap bm)
    {
        super.setImageBitmap(bm);
        if(bm!=null && !bm.isRecycled()) {
            mBitmapShader = new BitmapShader(bm, Shader.TileMode.CLAMP,
                    Shader.TileMode.CLAMP);
            mPaint.setShader(mBitmapShader);
        }else{
            mBitmapShader = null;
        }
    }
    
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onDraw(Canvas canvas)
    {
        if (getDrawable() == null) return;
        final int saveCount = canvas.getSaveCount();
        canvas.save();
        if (getCropToPadding()) {
            final int scrollX = getScrollX();
            final int scrollY = getScrollY();
            canvas.clipRect(scrollX + getPaddingLeft(), scrollY + getPaddingTop(),
                    scrollX + getRight() - getLeft() - getPaddingRight(),
                    scrollY + getBottom() - getTop() - getPaddingBottom());
        }
        canvas.translate(getPaddingLeft(), getPaddingTop());
    
        if (getImageMatrix() != null && mBitmapShader!=null)
        {
            mBitmapShader.setLocalMatrix(getImageMatrix());
        }
        int h = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();
        int w = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
        float radius = h > w ? w >>> 1 : h >>> 1;
        canvas.drawCircle(w >>> 1, h >>> 1, radius, mPaint);
        canvas.restoreToCount(saveCount);
        if(isShowBorder){
            canvas.translate(getPaddingLeft(), getPaddingTop());
            canvas.drawCircle(w >>> 1, h >>> 1, radius, mPaint2);
            canvas.translate(-1*getPaddingLeft(), -1*getPaddingTop());
        }
    }
    
    @Override
    public void setPadding(int left, int top, int right, int bottom) {
        super.setPadding(left, top, right, bottom);
        invalidate();
    }
    
    private int mBorderColor = 0xffff0000;
    private boolean isShowBorder = false;
    public void setBorderColor(int borderColor) {
        mBorderColor = borderColor;
        mPaint2.setColor(mBorderColor);
    }
    
    public void setShowBorder(boolean isShow) {
        isShowBorder = isShow;
        invalidate();
    }
    }
    

    然后就可以正常在item的xml文件中写入就可以了,但是需要注意的是一定要设置padding这个属性,否则边框显示不出来。如下:

     android:padding="1dp"
    

    然后就是使用的方法了,设置边框颜色的方法:

    mImageView.setBorderColor(Color.parseColor("#24c789"));
    

    设置是否显示边框的方法:

    mImageView.setShowBorder(true);
    

    相关文章

      网友评论

          本文标题:Android 自定义圆形imageview,并且带点击效果

          本文链接:https://www.haomeiwen.com/subject/nluovftx.html