两种方法,自己写代码实现,用第三方开源库
一、第三方开源控件RoundedImageView
RoundedImageView可以改控件支持圆形、椭圆、圆角矩形等,使用非常方便。
在Moudle的build.gradle中添加如下代码,
compile 'com.makeramen:roundedimageview:2.2.1'
添加完之后在点击下图的小象图标使添加的依赖生效。
QQ截图20191103235425.png
添加代码(圆形)如下:
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tupian"
app:riv_oval="true" />
其他属性的写法
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="@mipmap/avatar"
app:riv_border_color="#333333"
app:riv_border_width="2dp"
app:riv_corner_radius_top_left="25dp"
app:riv_corner_radius_bottom_right="25dp"
app:riv_mutate_background="true"
app:riv_oval="false"
app:riv_tile_mode="repeat" />
控件属性:
riv_border_width: 边框宽度
riv_border_color: 边框颜色
riv_oval: 是否圆形
riv_tile_mode:有三种clamp,repeat,mirror,分别是指缩放、重复、镜像,实现后两种的效果,是src的分辨率小于RoundedImageView的分辨率才比较直观显示
riv_corner_radius: 圆角弧度(是指圆角的大小,简单来说,等于宽度一半时,就是圆形了;小于宽度的一半就是圆角矩形了。)
riv_corner_radius_top_left:左上角弧度
riv_corner_radius_top_right: 右上角弧度
riv_corner_radius_bottom_left:左下角弧度
riv_corner_radius_bottom_right:右下角弧度
scaleType:scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXY 后面详解
scaleType的属性
ImageView的scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXY
android:scaleType="center"
保持原图的大小,显示在ImageView的中心。当原图的size大于ImageView的size,超过部分裁剪处理。
android:scaleType="centerCrop"
以填满整个ImageView为目的,将原图的中心对准ImageView的中心,等比例放大原图,直到填满ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理。
android:scaleType="centerInside"
以原图完全显示为目的,将图片的内容完整居中显示,通过按比例缩小原图的size宽(高)等于或小于ImageView的宽(高)。如果原图的size本身就小于ImageView的size,则原图的size不作任何处理,居中显示在ImageView。
android:scaleType="matrix"
不改变原图的大小,从ImageView的左上角开始绘制原图,原图超过ImageView的部分作裁剪处理。
android:scaleType="fitCenter"
把原图按比例扩大或缩小到ImageView的ImageView的高度,居中显示
android:scaleType="fitEnd"
把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的下部分位置
android:scaleType="fitStart"
把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的上部分位置
android:scaleType="fitXY"
把原图按照指定的大小在View中显示,拉伸显示图片,不保持原比例,填满ImageView.
下面附一个在网上找了一个代码(不推荐用,有第三方开源就用咯,何必麻烦自己写啊)
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
*
* 带边框的圆形图片
* Created by LICHENGLONG on 2017-10-09.
*/
@SuppressLint("AppCompatCustomView")
public class ImageViewPlus extends ImageView {
private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);//
private Bitmap mRawBitmap;
private BitmapShader mShader;
private Matrix mMatrix = new Matrix();
private float mBorderWidth = dip2px(15);
private int mBorderColor = 0xFF0080FF;//外边框的颜色
public ImageViewPlus(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Bitmap rawBitmap = getBitmap(getDrawable());
if (rawBitmap != null){
int viewWidth = getWidth();
int viewHeight = getHeight();
int viewMinSize = Math.min(viewWidth, viewHeight);
float dstWidth = viewMinSize;
float dstHeight = viewMinSize;
if (mShader == null || !rawBitmap.equals(mRawBitmap)){
mRawBitmap = rawBitmap;
mShader = new BitmapShader(mRawBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
}
if (mShader != null){
mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
mShader.setLocalMatrix(mMatrix);
}
mPaintBitmap.setShader(mShader);
mPaintBorder.setStyle(Paint.Style.STROKE);
mPaintBorder.setStrokeWidth(mBorderWidth / 5.0f);//外边框的大小
mPaintBorder.setColor(mBorderColor);//添加外边框
float radius = viewMinSize / 2.0f;
canvas.drawCircle(radius, radius, radius - mBorderWidth / 6.0f, mPaintBorder);
canvas.translate(mBorderWidth, mBorderWidth);
canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius, mPaintBitmap);
} else {
super.onDraw(canvas);
}
}
private Bitmap getBitmap(Drawable drawable){
if (drawable instanceof BitmapDrawable){
return ((BitmapDrawable)drawable).getBitmap();
} else if (drawable instanceof ColorDrawable){
Rect rect = drawable.getBounds();
int width = rect.right - rect.left;
int height = rect.bottom - rect.top;
int color = ((ColorDrawable)drawable).getColor();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
return bitmap;
} else {
return null;
}
}
private int dip2px(int dipVal) {
float scale = getResources().getDisplayMetrics().density;
return (int)(dipVal * scale + 0.5f);
}
}
网友评论