Android圆形图片不求人,自定义View实现(BitmapShader使用)
2024-08-31 19:23:56
在很多APP当中,圆形的图片是必不可少的元素,美观大方。本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情。
一、先上效果图
二、实现思路
- 在定义View 的onMeasure()方法里设置View的宽高相等,应该取宽高中的最小值。
- 在自定义View的onDraw()里面使用画笔paint结合BitmapShaper画出一个圆形区域。
- 上述两步已经可以实现一个圆形图片,但是如果图片大于View的设定的宽高,则只会绘制左上角的局域,内容显示不完全(如下图)。因此,还应该做好图片的缩放。
三、具体实现
1.新建一个java类 CircleImageView继承 ImageView,这个是完整的代码。
public class CircleImageView extends ImageView {
private Paint mPaint; //画笔
private int mRadius; //圆形图片的半径
private float mScale; //图片的缩放比例
public CircleImageView(Context context) {
super(context);
}
public CircleImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//因为是圆形图片,所以应该让宽高保持一致
int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
mRadius = size / 2;
setMeasuredDimension(size, size);
}
@Override
protected void onDraw(Canvas canvas) {
mPaint = new Paint();
Bitmap bitmap = drawableToBitmap(getDrawable());
//初始化BitmapShader,传入bitmap对象
BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//计算缩放比例
mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());
Matrix matrix = new Matrix();
matrix.setScale(mScale, mScale);
bitmapShader.setLocalMatrix(matrix);
mPaint.setShader(bitmapShader);
//画圆形,指定好中心点坐标、半径、画笔
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
}
//写一个drawble转BitMap的方法
private Bitmap drawableToBitmap(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;
}
}
2. onMeasure()方法里面,计算好宽高
因为是圆形图片,所以应该让宽高保持一致,取测量尺寸宽高中的最小值最为最终结果。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//因为是圆形图片,所以应该让宽高保持一致
int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
mRadius = size / 2;
setMeasuredDimension(size, size);
}
3. onDraw()方法里面画出圆形图片,注意看注释,很详细。
@Override
protected void onDraw(Canvas canvas) {
mPaint = new Paint();
Bitmap bitmap = drawableToBitmap(getDrawable());
//初始化BitmapShader,传入bitmap对象
BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//计算缩放比例
mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());
Matrix matrix = new Matrix();
matrix.setScale(mScale, mScale);
bitmapShader.setLocalMatrix(matrix);
mPaint.setShader(bitmapShader);
//画圆形,指定好中心点坐标、半径、画笔
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
}
4. 上一步中的将drwable转换为bitmap的方法。
//写一个drawble转BitMap的方法
private Bitmap drawableToBitmap(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;
}
四、使用该自定义View
1. 布局文件里面使用,此处使用了斯嘉丽的美图
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.roundimage.MainActivity"
>
<com.roundimage.CircleImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@drawable/beauty"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/image1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="斯嘉丽·约翰逊"
android:textColor="#333333"
android:textSize="17sp"
/>
</RelativeLayout>
2. 各种效果图,用于验证适应性
- 尺寸都指定为200dp
android:layout_width="200dp"
android:layout_height="200dp"
- 尺寸都指定为100dp
android:layout_width="100dp"
android:layout_height="100dp"
- 尺寸都指定不一样,一个150,一个400
android:layout_width="100dp"
android:layout_height="200dp"
- 尺寸设定为wrap_content
android:layout_width="wrap_content"
android:layout_height="wrap_content"
五、总结
实现圆形图片有很多种方法:
可以使用一些开源框架如Fresco,这个可以参考本人的另一篇博客 Fresco图片框架简介及使用
笨办法,让视觉给到一张圆形图片(如果每张图都需要处理,可能她会打死你)
笨办法,用一个view在上面挡住(这个我写的自己都笑了)
自定义View,就如本文介绍的。
自定义Drawble,这个和自定义view可以相互补充。
总之,通过以上各个不同属性验证,可以发现本文的自定义View完美的实现了圆形图片。如果读者有需要圆形图的,可以把这个copy一下自己用,就一个类,简单精巧。
如果觉得本文对你有帮助,请关注、留言、点赞我,谢谢!
来自:http://www.jianshu.com/p/6b5eef0f6f3d
最新文章
- nodejs项目mysql使用sequelize支持存储emoji
- Android开发--RelativeLayout的应用
- File存储 - 文件存储
- 调皮的QQ音乐API:修复无法获取歌单
- spring Boot+spring Cloud实现微服务详细教程第二篇
- Dynamics CRM2013 1:N关系 sub-grid中的“添加现有项”和“添加新建项”功能详解
- linux设备驱动--等待队列实现
- java虚拟机的类加载机制
- Entity Framework入门教程(11)---EF6中的异步查询和异步保存
- Rsync备份功能总结
- 洗礼灵魂,修炼python(66)--爬虫篇—BeauitifulSoup进阶之“我让你忘记那个负心汉,有我就够了”
- Silverlight 样式的灵活使用
- AtCoder Grand Contest 11~17 做题小记
- Julia安装以及使用扩展包package(ERROR: UndefVarError: Pkg not defined)
- DOM扩展:DOM API的进一步增强[总结篇-上]
- Context 上下文
- Java变量初始化之后的默认值问题
- Kafka发布订阅消息
- jenkins构建&;发布git托管的VS工程
- 数组k平移三种方法(java)
热门文章
- 【C#Windows 服务】 《三》Timer设置
- Zero-input latency scheduler: Scheduler Overhaul
- Ubuntu命令行快捷启动Pycharm
- 监控web服务(http,本地 / 远程监控nginx)
- 【Educational Codeforces Round 37 C】 Swap Adjacent Elements
- 洛谷 P1056 排座椅
- java基础 this keyword!
- android-Animation进阶(创造用户舒服的动画)
- JS学习十七天----工厂方法模式
- 5. webservice通信调用天气预报接口实例