BitmapShader实现圆形头像

BitmapShader实现圆形头像

BitmapShader是Shader的子类,通过Paint.setShader(Shader shader)进行设置

BitmapShader的构造函数需要传入3个参数

mBitmapShader = new BitmapShader(bitmap,TileMode.CLAMP,TileMode.CLAMP);

参数1:bitmap 要渲染的图片

参数2:X轴方向TileMode

参数3:Y轴方向TileMode

TileMode取值有3种:

CLAMP 拉伸

REPEAT 重复

MIRROR 镜像


废话不多直接上代码:

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.RectF;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.net.Uri;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

/**
 * Created by asus on 2017/6/2.
 */
public class CircleImageView extends ImageView {
    //图片类型( CENTER_CROP-->水平垂直居中,进行缩放 )
    private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
    private static final int COLORDRAWABLE_DIMESION = 2;
    private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
    //默认边框宽度
    private static final int DEFAULT_BORDER_WIDTH = 0;
    //默认边框颜色
    private static final int DEFAULT_BORDER_COLOR = Color.BLACK;

    //绘制图片范围
    private final RectF mBitmapRect = new RectF();
    //绘制边框范围
    private final RectF mBorderRect = new RectF();
    //图形变化器
    private final Matrix mShaderMatrix = new Matrix();
    //绘制图片的画笔
    private final Paint mBitmapPaint = new Paint();
    //绘制边框的画笔
    private final Paint mBorderPaint = new Paint();
    //设置默认边框大小和颜色
    private int mBorderColor = DEFAULT_BORDER_COLOR;
    private int mBorderWidth = DEFAULT_BORDER_WIDTH;

    //要绘制的图片
    private Bitmap mBitmap;
    //图片渲染器
    private BitmapShader mBitmapShader;
    //图片宽、高
    private int mBitmapWidth,mBitmapHeight;
    //图片半径
    private float mBitmapRadius;
    //图片+边框半径
    private float mBorderRadius;

    private boolean mReady;
    private boolean mSetupPending;
    private boolean mBorderOverlay;

    public CircleImageView(Context context) {
        this(context,null);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        super.setScaleType(SCALE_TYPE);
        mReady = true;
        if( mSetupPending ){
            setup();
            mSetupPending = false;
        }
    }

    private void setup() {
        if( mReady == false ){
            mSetupPending = true;
            return;
        }

        if( mBitmap == null ) return;
        //创建渲染器(参数:图片,(CLAMP表示如果图片太小就拉伸)X轴拉伸,Y轴拉伸)
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        //设置绘制图片的画笔
        mBitmapPaint.setAntiAlias(true);//抗锯齿
        mBitmapPaint.setShader(mBitmapShader);//设置渲染器

        //设置绘制边框的画笔
        mBorderPaint.setAntiAlias(true);//抗锯齿
        mBorderPaint.setStyle(Paint.Style.STROKE);//设置style为边框样式
        mBorderPaint.setColor(mBorderColor);//设置绘制的边框颜色
        mBorderPaint.setStrokeWidth(mBorderWidth);//设置绘制的边框大小

        mBitmapWidth = mBitmap.getWidth();
        mBitmapHeight = mBitmap.getHeight();
        //设置绘制含边框的显示范围
        mBorderRect.set(0,0,getWidth(),getHeight());
        //计算边框半径
        mBorderRadius = Math.min((mBorderRect.height()-mBorderWidth)/2,(mBorderRect.width()-mBorderWidth)/2);
        //设置绘制不包含边框的显示范围
        mBitmapRect.set(mBorderRect);
        //如果边框不是直接覆盖在图片上,缩小图片显示范围
        if( mBorderOverlay == false ){
            mBitmapRect.inset(mBorderWidth,mBorderWidth);
        }
        //计算绘制的圆形图片半径
        mBitmapRadius = Math.min(mBitmapRect.height()/2,mBitmapRect.width()/2);
        //设置渲染器的图片变化矩阵
        updateShaderMatrix();
        //手动触发onDraw进行绘制
        invalidate();
    }

    private void updateShaderMatrix() {
        float scale,dx = 0,dy = 0;
        mShaderMatrix.set(null);

        //获取最小缩放比例
        //如果x轴缩放比例大于y轴,则设置缩放比例为y轴
        if( (mBitmapWidth*mBitmapRect.height()) > (mBitmapHeight*mBitmapRect.width()) ){
            scale = mBitmapRect.height()/mBitmapHeight;
            dx = (mBitmapRect.width() - mBitmapWidth*scale)*0.5f;
        }else{
            scale = mBitmapRect.width()/mBitmapWidth;
            dy = (mBitmapRect.height() - mBitmapHeight*scale)*0.5f;
        }
        //shader的变换矩阵,我们这里主要用于放大或者缩小。
        mShaderMatrix.setScale(scale, scale);
        //平移
        mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBitmapRect.left, (int) (dy + 0.5f) + mBitmapRect.top);
        //设置变化矩阵
        mBitmapShader.setLocalMatrix(mShaderMatrix);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //没有图片直接return
        if( getDrawable() == null ) return;
        //画圆形图片(参数:圆心x坐标,圆心y坐标,圆的半径,画笔)
        canvas.drawCircle(getWidth()/2,getHeight()/2,mBitmapRadius,mBitmapPaint);
        //如果边框大于0,画圆形边框
        if( mBorderWidth > 0 ){
            canvas.drawCircle(getWidth()/2,getHeight()/2,mBorderRadius,mBorderPaint);
        }
    }

    public void setBitmap(Bitmap mBitmap) {
        this.mBitmap = mBitmap;
        setup();
    }

    public void setBorderColor(int mBorderColor) {
        this.mBorderColor = mBorderColor;
    }

    public void setBorderOverlay(boolean mBorderOverlay) {
        this.mBorderOverlay = mBorderOverlay;
    }

    public void setBorderWidth(int mBorderWidth) {
        this.mBorderWidth = mBorderWidth;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        setup();
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);
        mBitmap = bm;
        setup();
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        super.setImageDrawable(drawable);
        mBitmap = getBitmapFromDrawable(drawable);
        setup();
    }

    @Override
    public void setImageURI(Uri uri) {
        super.setImageURI(uri);
        mBitmap = getBitmapFromDrawable(getDrawable());
        setup();
    }

    @Override
    public void setImageResource(int resId) {
        super.setImageResource(resId);
        mBitmap = getBitmapFromDrawable(getDrawable());
        setup();
    }

    public Bitmap getBitmapFromDrawable(Drawable drawable){
        if( drawable == null ) return null;
        if( drawable instanceof BitmapDrawable){
            return ((BitmapDrawable) drawable).getBitmap();
        }

        try {
            Bitmap bitmap = null;
            if( drawable instanceof ColorDrawable){
                bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMESION,COLORDRAWABLE_DIMESION,BITMAP_CONFIG);
            }else{
                bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight(),BITMAP_CONFIG);
            }
            Canvas canvas = new Canvas(bitmap);
            drawable.setBounds(0,0,canvas.getWidth(),canvas.getHeight());
            drawable.draw(canvas);
            return bitmap;
        }catch (Exception e){
            Log.e("CircleImageView", "getBitmapFromDrawable: "+e);
            return null;
        }

    }

}

代码执行的顺序是

setImageDrawable( ) 

getBitmapFromDrawable( ) 

setup( )

CircleImageView( ) 

init( )

setup( ) 

updateShaderMatrix( ) 

onSizeChanged( )

setup( )

updateShaderMatrix( ) 

onDraw( )

可以看出mReady和mSetupPending是为了保证setup中的代码必须在init后才能执行

所以可以在init中通过TypeArray获取自定义参数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 Android Studio 中实现圆形头像的方法有很多。一种常用的方法是使用 ShapeDrawable 来创建一个圆形图片,再将其设置为 ImageView 的背景。具体实现可以参考以下代码示例: ``` //获取图片的宽高 int width = bitmap.getWidth(); int height = bitmap.getHeight(); //计算缩放比例 float scaleWidth = ((float) width) / height; float scaleHeight = ((float) height) / width; // 取得想要缩放的matrix参数 Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); // 得到新的图片 Bitmap newBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); //创建一个圆形的图片 BitmapShader bitmapShader = new BitmapShader(newBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f; //创建一个圆形的图片 ShapeDrawable shapeDrawable = new ShapeDrawable(new OvalShape()); shapeDrawable.getPaint().setShader(bitmapShader); shapeDrawable.setIntrinsicHeight((int) radius * 2); shapeDrawable.setIntrinsicWidth((int) radius * 2); //设置为ImageView的背景 imageView.setBackgroundDrawable(shapeDrawable); ``` 需要注意的是,这个方法可能会因为图片过大而导致内存溢出,需要特别注意处理图片的大小。 ### 回答2: 在Android开发的实践过程中,我们经常需要在用户界面中显示用户的头像信息。而在界面设计中,圆形头像一直被认为是一种很好的设计形式,因为它既简洁又美观。 那么在Android Studio中,如何实现一个圆形头像呢?其实方法并不难,下面我将详细给大家介绍。 1.首先,在res/drawable目录下,建立一个用于存放头像图片的文件夹(此处命名为avatar)。 2.在该文件夹中添加一个圆形形状的XML文件(circle.xml)。该文件的代码如下: ``` <shape android:shape="oval"> <solid android:color="@android:color/transparent" /> <stroke android:width="2dp" android:color="@android:color/black" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> ``` 在该代码中,我们通过“oval”属性将该形状定义为一个圆形。接着,“solid”属性设置了一个透明的填充色,“stroke”属性设置了一个2dp的黑色边框,“padding”属性设置了圆形形状的内部边距。 3.在avatar文件夹中,添加一个头像图片。根据上述设置,图片将被裁剪成一个圆形,并添加黑色边框。 4.接下来,在需要使用该圆形头像的布局文件中,添加一个ImageView控件,并设置其src属性为avatar文件夹下头像图片的名称。此外,还需要设置该控件的background属性为我们上面定义的圆形形状XML文件的名称(此处为circle.xml),代码如下: ``` <ImageView android:layout_width="100dp" android:layout_height="100dp" android:background="@drawable/circle" android:src="@drawable/avatar" /> ``` 通过上述步骤实现圆形头像不仅简洁美观,而且设计风格不受人物头像的大小和形状的影响,使界面信息更加统一和美观。 ### 回答3: 在Android开发中,很多应用都需要用户头像来展示用户个人信息,圆形头像是其中一种较为常用的头像形状。圆形头像可以使应用界面更加美观和简洁,但是在Android Studio中默认情况下是呈现为方形的,要设置为圆形头像则需要进行以下操作。 首先,在布局文件的ImageView标签中添加app:border_width和app:border_color两个属性用于设置边框的宽度和颜色,代码如下所示: ``` <ImageView android:id="@+id/avatar_iv" android:layout_width="100dp" android:layout_height="100dp" android:scaleType="centerCrop" app:border_color="@android:color/white" app:border_width="2dp" android:src="@drawable/avatar" /> ``` 这个ImageView的宽和高都是100dp,scaleType是centerCrop,这个属性会使图片裁剪为中心区域,因此ImageView会对图形进行自适应缩放。border_width是边框的宽度,border_color是边框的颜色,这里我们选择白色,同时app是支持V7的Toolbar而来,我们也可以使用V7的Toolbar来实现圆形头像。 接着,在drawable文件夹下新建一个xml文件,代码如下所示: ``` <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@android:color/white" /> <size android:width="120dp" android:height="120dp"/> </shape> ``` 这个xml文件的作用是生成一个圆形的背景色,并设置背景色为白色。size属性设置为120dp,是由于ImageView的宽和高都是100dp,同时边框的宽度为2dp,围成圆形的范围实际上是104dp,再加上8dp的padding,实际上就是120dp。 最后,在Java文件中加载头像并设置圆形头像,代码如下所示: ``` ImageView avatar= (ImageView) findViewById(R.id.avatar_iv); Glide.with(this).load(R.drawable.avatar).into(avatar); Resources res = getResources(); Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.avatar); Bitmap b = getCroppedBitmap(bitmap); avatar.setImageBitmap(b); public static Bitmap getCroppedBitmap(Bitmap bmp) { Bitmap sbmp; if (bmp.getWidth() != 120 || bmp.getHeight() != 120) sbmp = Bitmap.createScaledBitmap(bmp, 120, 120, false); else sbmp = bmp; Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight()); paint.setAntiAlias(true); paint.setFilterBitmap(true); paint.setDither(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(Color.parseColor("#BAB399")); canvas.drawRoundRect(new RectF(8, 8, sbmp.getWidth() - 8, sbmp.getHeight() - 8), 60, 60, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(sbmp, rect, rect, paint); return output; } ``` 这个代码段使用了Gilde来加载图片,然后调用getCroppedBitmap方法来设置圆形头像。getCroppedBitmap方法实现了将一个Bitmap图片切割成圆形,并设置边框的功能。最后将b图片设置到ImageView中即可实现圆形头像的效果。 综上所述,Android Studio实现圆形头像的过程是设置头像ImageView的边框和颜色,然后将头像图片进行切割和处理并加载到ImageView中即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值