Android开发:AS开发圆形图片外框设计
- 图片以圆形外框的形式显示的方式目前也已经非常普遍了,做为一个应用开发者来说,用户界面的圆形图片外框要求是必不可少的,接下来我就来介绍下我所掌握的几种基本的方法:
1、使用第三方资源Fresco
- 第三方资源用起来是最方便的,很适合新手,跟着做就行了:
- 第一步:添加依赖文件(com.facebook.fresco:fresco:0.14.1)
网上添加的手段很多,我就不一一介绍了,你可以直接在build.gradle文件下添加以下代码即可:
dependencies {
compile ‘com.facebook.fresco:fresco:0.14.1’
}
注意:版本可能有更新,操作是差不多的。- 第二步:实例化,执行以下指令:
Fresco.initialize(this);(在onCreate()方法下执行)- 第三步:授权
<uses-permission android:name=“android.permission.INTERNET”/>- 第四步:申请空间:
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/drawee_img"
fresco:roundAsCircle=“true”
fresco:roundedCornerRadius=“20dp”
android:layout_width=“80dp”
android:layout_height=“80dp” />- 第五步:调用:
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.drawee_img);
Uri uri = Uri.parse(“https://img-blog.csdnimg.cn/20190613104157382.jpg”);
draweeView.setImageURI(uri);- 注意:
该方法操作简单但是豪流量,哈哈!不离线
2、自定义ImageView控件
- 自定义类,新建CircleImageView.java文件
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();
//设置画笔边缘光滑,去掉锯齿
mPaint.setAntiAlias(true);
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;
}
}
- 调用:
<com.sylanty.test.CircleImageView
android:id="@+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@drawable/xt"
/>
3、裁剪成圆框
- 思路1:
public static Bitmap createCircleImage(Bitmap source) {
int length = source.getWidth() < source.getHeight() ? source.getWidth() : source.getHeight();
Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(length, length, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
canvas.drawCircle(length / 2, length / 2, length / 2, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
- 思路2:
public static Bitmap createCircleImage(Bitmap source) {
int width = source.getWidth();
int height = source.getHeight();
float raduis = Math.min(width, height) * 0.5f;
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
//paint.setColor(Color.RED);
//画布设置遮罩效果
paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
//处理图像数据
Bitmap bitmap = Bitmap.createBitmap(width, height, source.getConfig());
Canvas canvas = new Canvas(bitmap);
//bitmap的显示由画笔paint来决定
canvas.drawCircle(width * 0.5f, height *0.5f, raduis, paint);
return bitmap;
}
- 与Picasso结合使用:
Picasso.with(mContext).load(Constant.format(headUrl)).transform(new Transformation() {
@Override
public Bitmap transform(Bitmap source) {
source=createCircleImage(source);
source.recycle();
return bitmap;
}
//Picasso缓存bitmap,下次获取bitmap, 通过key
//第一次调用用key 存入
//第二次调用用key去取
@Override
public String key() {
Log.d(TAG, "key() called");
return "key";
}
}).into(meHeader);
总结:
以前没有做笔记,现在把笔记补全,学习快乐!!!