(原创) Android自定义Circleview的简单实现

如何实现自定义View一直是Android中比较神奇也是比较难得知识点,本篇博客带你以最简单的方式实现圆形circleView

如何实现自定义View一直是Android中比较神奇也是比较难得知识点.自定义view的步骤大致如下:

1.自定义类继承view
2.重写onMeasure()方法,这个方法对view的尺寸进行测量(可以不重写)
3.重写onLayout()方法,这个方法确定子view如何摆放(可以不重写)
4.重写onDraw()方法,真正实现绘图的方法(必须重写)
5.自定义属性文件attrs.xml
6.在布局文件中使用自定义view 并引入属性文件

今天讲讲怎么以最简单的方式简单实现一个CircleView.
实现原理:自定义view继承ImageView(避免写onDraw方法),并重写setImagetBitmap()或者setImageResouce() 取决于你将以哪种方式给imageview 进行赋值.
在setImageBitmap方法中将本来方形的图片改变成圆形的再赋值给ImageView.
自定义CiecleView 的代码:

/**
* 作者：Linqiang
* 时间：2016/5/16:9:17
* 邮箱: linqiang2010@outlook.com
* 说明：自定义CircleView 圆形ImageView
*/
public class CircleView extends ImageView{
//存储自定义属性 这两个参数是给圆描边的 可选参数
int borderWidth ;//描边的宽度
int borderColor;//描边的颜色
//系统通过布局文件反射创建的对象调用的是双参数的构造器 第二个参数:属性集
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
//从布局文件中获取自定义的参数值,从所有的属性中提取需要的属性集合 属性定义在attrs 文件中
TypedArray t = context.obtainStyledAttributes(attrs,R.styleable.CircleView);
//获取属性:第二个参数指定默认值(如果在xml文件中不定义此属性则给默认值)
borderWidth=t.getDimensionPixelSize(R.styleable.CircleView_border_width,0);
borderColor=t.getColor(R.styleable.CircleView_border_color, Color.WHITE);
//回收资源
t.recycle();
}
//重写此方法将传入的图片改变成圆的 达到圆形ImageView的效果
@Override
public void setImageBitmap(Bitmap bm) {
//将方的图片 换成圆的图片
//创建bitmap
Bitmap bitmap = Bitmap.createBitmap(bm.getWidth(),bm.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
//抗锯齿效果
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);
//取较小的值
float radius = Math.min(bm.getWidth(),bm.getHeight())/2;
canvas.drawCircle(bm.getWidth()/2,bm.getHeight()/2,radius,paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bm, 0, 0,paint);
//让图像尽量的居中显示,不拉伸
setScaleType(ScaleType.FIT_CENTER);
//关于显示类型,如果画出来的图像是方的 可以用FIT_CENTER参数,使用center可能有问题
//因为如果是图像比imageview 大 可能导致效果出不来
//画白边(换白边的属性imageView本来没有 所以才需要自定义属性去实现)
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(borderWidth);
paint.setColor(borderColor);
canvas.drawCircle(bm.getWidth()/2,bm.getHeight()/2,radius-2,paint);
super.setImageBitmap(bitmap);
}
}

attrs.xml 代码:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleView">
<!--attrs中属性的类型-->
<!--dimension 尺寸 color 颜色 string 字符串 reference引用 Boolean integer float小数 fraction分数-->
<attr name="border_width" format="dimension"></attr>
<attr name="border_color" format="color"></attr>
</declare-styleable>
</resources>

activity.xml 代码:
注意:在布局文件中使用自定义view,必须是view所在的项目包名+空间的名的形式使用.
引用attrs属性文件:需要在布局文件的根布局中引入,引入方法在Eclipse和studio环境中略有不同
Eclipse中:
“xmlns:android=”http://schemas.android.com/apk/res/+项目包名“ 项目包名可以在Manifast中文件中package属性中查看.
studio中:
xmlns:app=”http://schemas.android.com/apk/res-auto 并不需要指定具体路径,studio会自动寻找

其中app 是自定义名称,使用方法类似Android: 直接app:再输入你在attrs文件中定义的属性即可

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<com.example.xxxx.customview.CircleView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="@+id/view"
app:border_color="#ffff0000"
app:border_width="2dp"
/>
</LinearLayout>

posted @ 2017-03-13 15:23 天涯海角路阅读(526) 评论(0) 收藏举报

刷新页面返回顶部

天涯海角路

(原创) Android自定义Circleview的简单实现

公告