前言
在android开发中,圆形图片一般大部分在头像设置是比较常见的,人的美观或许喜欢圆形,比正方形更加优雅,所以就有了圆形图片的扩展
使用
首先这篇文章是让我们如何实现圆形图片的功能 ,分为四个部分:
- 画圆
- 自定义imageview
- 导入第三方开源框架
- Glide图片处理框架
第一种:
一般要做正圆形图片,只能是正方形的基础上才能实现,否则就变成椭圆了,下面说说如何使长方形的图片生成正圆形图片
private Bitmap CrileBitmap(Bitmap bitmap) {
//依据原有图片,重新创建一张新的图片,图片格式发生改变
Bitmap bitmap2 = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
//将图片当作画布的北京
Canvas canvas = new Canvas(bitmap2);
//创建画笔,设置抗锯齿
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLUE);
//设置画布填充色
canvas.drawARGB(0, 0, 0, 0);
//计算绘制圆的半径
int mins = Math.min(bitmap.getWidth() / 2, bitmap.getHeight() / 2);
//根据bitmap的高宽的中心点为圆点和圆的半径画图
canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, mins, paint);
//画笔重置
paint.reset();
//两个View 重叠的时候 取重叠部分
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//将bitmap在画布上
canvas.drawBitmap(bitmap, 0, 0, paint);
return bitmap2;
}
由于图片是长方形,所以图片的 宽、高 肯定会有一边要小于另一边,要生成正方形就已最小的一边为基准,再来裁切定位另一边的显示范围
第二种
实现思路:
- 在定义View 的onMeasure()方法里设置View的宽高相等,应该取宽高中的最小值。
- 在自定义View的onDraw()里面使用画笔paint结合BitmapShaper画出一个圆形区域。
- 上述两步已经可以实现一个圆形图片,但是如果图片大于View的设定的宽高,则只会绘制左上角的局域,内容显示不完全(如下图)。因此,还应该做好图片的缩放。
讲解1.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);
}
讲解2.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);
}
讲解3. 上一步中的将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;
}
具体实现:
新建一个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;
}
}
使用该自定义View,选择你想要的照片即可
<cn.zk.CircleImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@mipmap/teshi"
/>
第三种:
Gradle:
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.2.0'
}
Usage
de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
简单介绍源码里的自定义属性:
//设置边界宽度
<attr name="civ_border_width" format="dimension" />
//设置边界颜色
<attr name="civ_border_color" format="color" />
//默认fasle, true效果会变大 (外边圆环是否压住圆形图片)
<attr name="civ_border_overlay" format="boolean" />
<attr name="civ_fill_color" format="color" />
方法:
//设置正常显示图片
profile_image.setDisableCircularTransformation(true);
第三种方式 github地址
总结
实现圆形图片有很多种方法: 1.给要求的图片设计一个圆形(多的话UI会估计拔你电脑)2.自定义一个View 3.自定义绘制图形4.依赖啊,最简单的使用方法,想啥呢,快去使用把!!!!!!!!