自定义圆形图

原创 2016年05月30日 19:50:50

首先自定义一个类继成自ImageView

public class RoundImageView extends ImageView {

     /** 图片的类型,圆形or圆角  */  
    private int type;  
    private static final int TYPE_CIRCLE = 0;  
    private static final int TYPE_ROUND = 1;  

    /** 圆角大小的默认值  */  
    private static final int BODER_RADIUS_DEFAULT = 10;  
    /**  * 圆角的大小 */  
    private int mBorderRadius;  

    /**  * 绘图的Paint */  
    private Paint mBitmapPaint;  
    /** * 圆角的半径 */  
    private int mRadius;  
    /** * 3x3 矩阵,主要用于缩小放大 */  
    private Matrix mMatrix;  
    /**  * 渲染图像,使用图像为绘制图形着色 */  
    private BitmapShader mBitmapShader;  
    /** * view的宽度  */  
    private int mWidth;  
    private RectF mRoundRect;  

    public RoundImageView(Context context, AttributeSet attrs)  
    {  
        super(context, attrs);  
        mMatrix = new Matrix();  
        mBitmapPaint = new Paint();  
        mBitmapPaint.setAntiAlias(true);  
        TypedArray a = context.obtainStyledAttributes(attrs,  
                R.styleable.RoundImageView);  
        mBorderRadius = a.getDimensionPixelSize(  
                R.styleable.RoundImageView_borderRadius, (int) TypedValue  
                        .applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
                                BODER_RADIUS_DEFAULT, getResources()  
                                        .getDisplayMetrics()));// 默认为10dp  
        type = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle 
        a.recycle();  
    }  

    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
    {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);   
        if (type == TYPE_CIRCLE)  
        {  
            mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());  
            mRadius = mWidth / 2;  
            setMeasuredDimension(mWidth, mWidth);  
        }  

    }

    private void setUpShader()  
    {  
        Drawable drawable = getDrawable();  
        if (drawable == null)    return;  
        Bitmap bmp = drawableToBitamp(drawable);  
        // 将bmp作为着色器,就是在指定区域内绘制bmp  
        mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);  
        float scale = 1.0f;  
        if (type == TYPE_CIRCLE)  
        {  
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());  
            scale = mWidth * 1.0f / bSize;  

        } else if (type == TYPE_ROUND)  
        {    
            scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight()  
                    * 1.0f / bmp.getHeight());  
        }  
        // shader的变换矩阵,我们这里主要用于放大或者缩小  
        mMatrix.setScale(scale, scale);  
        // 设置变换矩阵  
        mBitmapShader.setLocalMatrix(mMatrix);  
        // 设置shader  
        mBitmapPaint.setShader(mBitmapShader);  
    }  

    private Bitmap drawableToBitamp(Drawable drawable)  
    {  
        if (drawable instanceof BitmapDrawable)  
        {  
            BitmapDrawable bd = (BitmapDrawable) drawable;  
            return bd.getBitmap();  
        }  
        int w = drawable.getIntrinsicWidth();  
        int h = drawable.getIntrinsicHeight();  
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); 
        Canvas canvas = new Canvas(bitmap);  
        drawable.setBounds(0, 0, w, h);  
        drawable.draw(canvas);  
        return bitmap;  
    }  

    @Override  
    protected void onDraw(Canvas canvas)  
    {  
        if (getDrawable() == null)  return;  
        setUpShader();  
        if (type == TYPE_ROUND)  
        {  
            canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,  
                    mBitmapPaint);  
        } else  
        {  
            canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);  
        }  
    }  

    @Override  
    protected void onSizeChanged(int w, int h, int oldw, int oldh)  
    {  
        super.onSizeChanged(w, h, oldw, oldh);  
        // 圆角图片的范围  
        if (type == TYPE_ROUND)  
            mRoundRect = new RectF(0, 0, getWidth(), getHeight());  
    }  
}

创建attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="borderRadius" format="dimension" />  
    <attr name="type">  
        <enum name="circle" value="0" />  
        <enum name="round" value="1" />  
    </attr>  
    <declare-styleable name="RoundImageView">  
        <attr name="borderRadius" />  
        <attr name="type" />  
    </declare-styleable>  
</resources>

xml布局里引用

<com.bw.utils.RoundImageView 
        android:id="@+id/img"
        android:layout_width="80dp"
        android:layout_height="80dp"/>

这样就可以直接用了,很简单吧

Android自定义圆形图片

Android自定义圆形图片,可设置最多两个的外边框。包括从网络获取图片显示。 解决图片锯齿问题。 解决图片变形问题。 源代码下载...
  • alan_biao
  • alan_biao
  • 2013年12月17日 17:13
  • 70174

自定义圆形ImageView控件的两种方法

这样摘录的目的在于,学习自定义控件的时候可以对比着看看同一种效果不同的写法有什么差异 第一种,写在自己项目中的自定义圆形Imageview import android.content.Context...
  • languobeibei
  • languobeibei
  • 2017年04月01日 17:44
  • 633

Android画各种圆,饼图,环图,圆形图片

最近在学习android的画图所以就学习了一下。看了很多资料。特别是爱哥的博客,学习了很多,我也要分享一下: 首先画个圆(简单的很): 自定义的View 设置好paint,canvas.d...
  • u014633728
  • u014633728
  • 2015年11月19日 20:20
  • 1082

Android-自定义View之圆形进度条总结

最近撸了一个圆形进度条的开源项目,算是第一次完完整整的使用自定义 View 。在此对项目开发思路做个小结,欢迎大家 Star 和 Fork。该项目总共实现了三种圆形进度条效果:圆形进度条、带刻度的圆形...
  • I_wait_for_you
  • I_wait_for_you
  • 2017年03月03日 07:02
  • 194

Android开源项目——自定义圆形图片组件CircularImageView

项目github地址: 控件功能:可以将任意图片裁剪成圆形,控件的大小可以自定义,可以指定图片中心点和半径,也可以添加圆形边框并设置边框的颜色。 使用方法:和使用其他自定义控件没什么区别,这里只需要...
  • u010852801
  • u010852801
  • 2015年04月13日 15:03
  • 2799

Android 自定义view --圆形百分比(进度条)

起因 最近公司项目有需求需要用到轻量级图表如下图,是一些简单的扇形图,圆形图,折线图,虽然有好用的三方库MPChart([MPChart使用教程](http://blog.csdn.net/wi...
  • wingichoy
  • wingichoy
  • 2015年12月16日 23:33
  • 9207

Android自定义View之圆形比例图(进度条)

在我们APP中,经常会用到如下的一张比例图:                                                      这个比例图可以清楚的展示一个项目所占的比例,同时...
  • isJoker
  • isJoker
  • 2017年03月30日 17:31
  • 675

初识Android自定义控件之圆形百分比图表的制作

在做小游戏的时候,会想做一个统计玩家水平百分比的圆形图标,主要有个各个阶段的数据,就可以画出百分比的圆,在了解了安卓简单自定义控件的基础上,利用SharedPreferences进行数据存储,自定义控...
  • leafact
  • leafact
  • 2015年03月12日 22:53
  • 2394

打造你自己的圆形或圆环形progressBar——圆形SeekBar演变圆形progressbar

转载请标明出处: http://blog.csdn.net/liuzg1220; 本文出自:【HugeBug的博客】 简介 上篇博客给大家分析了圆形SeekBar的案例,不了解的朋友请看上篇...
  • liuzg1220
  • liuzg1220
  • 2016年08月15日 16:00
  • 1899

自定义圆形里面内嵌文字,文字可根据圆形大小自适应

前几天美工给了一个图标,大概是一个圆环,要求在圆环里面填写一个文字,文字是可以根据不同的数据替换的。本来呢用美工给的圆环图标,在加上textview居中布局就可以实现这个需求。但是有个不好的地方,美工...
  • u013979330
  • u013979330
  • 2016年07月29日 16:30
  • 1393
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义圆形图
举报原因:
原因补充:

(最多只允许输入30个字)