利用Android中BitmapShader制作自带边框的圆形头像

更新时间：2016年09月12日 09:46:41 投稿：daisy

这篇文章给大家介绍了一下如何利用BitmapShader制作圆形头像，可以自定义要显示的图片，边框颜色和边框宽度等，有需要的朋友们可以参考借鉴。

效果如下：

BitmapShader 的简单介绍

关于 Shader是什么，Shader的种类有哪几种以及如何使用不属于本文范畴，对这方面不是很了解的同学，建议先去学习一下 Shader 的基本使用。

BitmapShader主要的作用就是通过Paint对象，对画布进行指定的Bitmap填充，实现一系列效果，可以有以下三种模式进行选择

1.CLAMP - 拉伸，这里拉伸的是图片的最后一个元素，不断地重复，这个效果，在图片比较小，而所要画的面积比较大的时候会比较明显。

2.REPEAT - 重复，横向纵向不断地重复，不同于上一模式，这种模式在图片比较小不能满足要求是，会在横向纵向不断重复绘制图形。

3.MIRROR - 翻转，这种模式和 REPEAT 是类似的，只不过这里的重复是翻转着重复，和折纸的效果差不多。

而我们将要使用的是 CLAMP 模式，因为只要我们对图形的大小进行控制，就可以避免图像进行拉伸。

具体实现介绍

为了自定义图像，边框宽度和颜色，我们首先在 res/values 目录下，新建一个 attrs.xml文件，里面要书写的内容如下所示

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="MyCustomView">
  <attr name="mborder_color" format="color"></attr>
  <attr name="mborder_width" format="dimension"></attr>
  <attr name="msrc" format="reference"></attr>
 </declare-styleable>
</resources>

当然，在这里还可以添加一些其他的特性。既然定义了我们想要使用的特性，那么我们就要在自定义View里面解析这些属性并且加以利用，解析过程如下所示

 TypedArray type = context.obtainStyledAttributes(attrs, R.styleable.MyCustomView);
 mBorderColor = type.getColor(R.styleable.MyCustomView_mborder_color,0);
 mDrawable = type.getDrawable(R.styleable.MyCustomView_msrc);

 //将获得的 Drawable 转换成 Bitmap
 BitmapDrawable bitmapDrawable = (BitmapDrawable) mDrawable;
 mBitmap = bitmapDrawable.getBitmap();

 mBorderWidth = type.getDimensionPixelSize(R.styleable.MyCustomView_mborder_width, 2);

值得注意的是 mSrc 属性的解析，由于获得是 Drawable 对象，所以我们需要将其转换为 Bitmap 对象。

下面就利用我们获得的 Bitmap 对象进行圆形头像的绘制，对 BitmapShader 和 Paint 的初始化如下所示

  mSrcBitmap = Bitmap.createScaledBitmap(mBitmap, mWidth, mHeight, false);
  mShader = new BitmapShader(mSrcBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint = new Paint();
  mPaint.setShader(mShader);
  mRadius = (mWidth - mBorderWidth * 2 - 4) / 2;
  mCircleX = (mWidth) / 2;
  mCircleY = (mHeight) / 2;

mSrcBitmap是对获得的图像进行适当的缩小或者放大，以适应我们对图形的要求，而这里的 mWidth 和 mHeight 又是什么呢？实际上就是我们在定义视图在 layout_width 和 layout_height中传递进来的值，不过在这里我对他们进行了处理，也就是选取最小值操作，这样的话就可以避免由于宽大于高或者高大于宽而造成图像填充不满指定区域的现象。值得注意的是，自定义视图，需要对 wrap_content 进行特殊处理，否则系统对该属性的视图不予以显示。至于如何进行处理，可以看看本例的源码，很简单，相信很多人一看就知道或者说早就了然于胸。

还有一点需要强调的是这里的 mRadius ，也就是将要绘制的圆的半径，为什么要减去边框的宽度乘 2 呢？要知道，我们的圆是根据视图指定的宽度或者高度来画的，如果我们所画的圆恰好是指定视图的内切圆，那么边框放在哪里呢？它肯定要被画在视图的外面，那样我们就看不到完整的边框了。所以，这么减去的意义在于为边框腾出空间。

经过以上操作，我们就已经将圆形头像绘制出来了，下面来绘制边框，其实非常简单，我只不过是又定义了一个 Paint 对象，并且利用它画了一个圆而已，画笔的初始化操作如下所示

  mBorderPaint = new Paint();
  mBorderPaint.setStyle(Paint.Style.STROKE);
  mBorderPaint.setStrokeWidth(mBorderWidth);
  mBorderPaint.setColor(mBorderColor);
  mBorderPaint.setStrokeCap(Paint.Cap.ROUND);

好了，下面就可以在onDraw()函数中，进行绘制了，如下所示

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.drawCircle(mCircleX, mCircleY, mRadius, mPaint);
  canvas.drawCircle(mCircleX, mCircleY, mRadius, mBorderPaint);
 }

这样，整个效果就算实现完毕了。下面来看看如何使用

 <com.example.hwaphon.patheffecttest.MyView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginBottom="16dp"
   android:layout_marginRight="8dp"
   app:mborder_color="@android:color/holo_green_light"
   app:mborder_width="4dp"
   app:msrc="@drawable/myview_test"/>

注意，一定要在容器中加上这么一句

xmlns:app=http://schemas.android.com/apk/res-auto

具体实现的核心代码

package com.example.hwaphon.patheffecttest;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Hwaphon on 2016/5/12.
 */
public class MyView extends View {

 private Bitmap mBitmap;
 private Drawable mDrawable;
 private Bitmap mSrcBitmap;

 private BitmapShader mShader;
 private Paint mPaint;

 private int mWidth, mHeight;

 private int mRadius;
 private int mCircleX, mCircleY;

 private int mBorderColor;
 private Paint mBorderPaint;
 private int mBorderWidth;

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

 public MyView(Context context, AttributeSet attrs) {
  super(context, attrs);
  TypedArray type = context.obtainStyledAttributes(attrs, R.styleable.MyCustomView);
  mBorderColor = type.getColor(R.styleable.MyCustomView_mborder_color,0);
  mDrawable = type.getDrawable(R.styleable.MyCustomView_msrc);

  //将获得的 Drawable 转换成 Bitmap
  BitmapDrawable bitmapDrawable = (BitmapDrawable) mDrawable;
  mBitmap = bitmapDrawable.getBitmap();

  mBorderWidth = type.getDimensionPixelSize(R.styleable.MyCustomView_mborder_width, 2);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  mWidth = measureWidth(widthMeasureSpec);
  mHeight = measureHeight(heightMeasureSpec);
  int temp = mWidth > mHeight ? mHeight : mWidth;
  mWidth = mHeight = temp;
  initView();
  setMeasuredDimension(mWidth, mHeight);
 }

 private int measureHeight(int heightMeasureSpec) {
  int size = MeasureSpec.getSize(heightMeasureSpec);
  int sizeMode = MeasureSpec.getMode(heightMeasureSpec);
  int result = 0;
  if (sizeMode == MeasureSpec.EXACTLY) {
   result = size;
  } else {
   result = 200;
   if (sizeMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, size);
   }
  }
  return result;
 }

 private int measureWidth(int widthMeasureSpec) {
  int size = MeasureSpec.getSize(widthMeasureSpec);
  int sizeMode = MeasureSpec.getMode(widthMeasureSpec);
  int result = 0;
  if (sizeMode == MeasureSpec.EXACTLY) {
   result = size;
  } else {
   result = 200;
   if (sizeMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, size);
   }
  }
  return result;
 }

 private void initView() {

  mSrcBitmap = Bitmap.createScaledBitmap(mBitmap, mWidth, mHeight, false);
  mShader = new BitmapShader(mSrcBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint = new Paint();
  mPaint.setShader(mShader);
  mRadius = (mWidth - mBorderWidth * 2) / 2;
  mCircleX = (mWidth) / 2;
  mCircleY = (mHeight) / 2;

  mBorderPaint = new Paint();
  mBorderPaint.setStyle(Paint.Style.STROKE);
  mBorderPaint.setStrokeWidth(mBorderWidth);
  mBorderPaint.setColor(mBorderColor);
  mBorderPaint.setStrokeJoin(Paint.Join.ROUND);
  mBorderPaint.setStrokeCap(Paint.Cap.ROUND);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  canvas.drawCircle(mCircleX, mCircleY, mRadius, mPaint);
  canvas.drawCircle(mCircleX, mCircleY, mRadius, mBorderPaint);
 }
}

总结

以上就是Android利用BitmapShader制作自带边框圆形头像的全部内容，希望这篇文章对大家开发Android的时候能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

Android开发Jetpack组件DataBinding用例详解
这篇文章主要为大家介绍了Android开发Jetpack组件DataBinding的使案用例详解说明，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2022-02-02
Android绘制炫酷引导界面
这篇文章主要帮助大家使用Android绘制炫酷引导界面，具有实用性和参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
Android开发笔记最好使用eclipse
值得注意一点的是，虽然Myeclipse比eclipse功能更强大，但是在具体的安卓开发过程当中，最好还是选用eclipse，sdk跟eclipse的兼容性更好
2012-11-11
Android开发中方向传感器定义与用法详解【附指南针实现方法】
这篇文章主要介绍了Android开发中方向传感器定义与用法,结合实例形式分析了Android方向传感器的功能、定义与使用方法,并附带基于方向传感器实现指南针功能的方法,需要的朋友可以参考下
2017-11-11
python只需30行代码就能记录键盘的一举一动
这篇文章主要介绍了如何用python只写30行代码就能记录键盘的一举一动,感兴趣的同学快来看看吧,新手小白也能掌握
2021-08-08
Android利用ViewPager实现可滑动放大缩小画廊效果
这篇文章主要介绍了Android利用ViewPager实现可滑动放大缩小画廊效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
Android性能优化全局异常处理详情
这篇文章主要介绍了Android性能优化全局异常处理详情，文章围绕主题展开详细的内容协商，具有一定的参考价值，感兴趣的小伙伴可以参考一下
2022-08-08
Android实现轻量线性与百分比图表的方法
这篇文章主要给大家介绍了关于Android实现轻量线性与百分比图表的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习学习吧。
2017-12-12
Android Recyclerview实现上拉加载更多功能
在项目中使用列表的下拉刷新和上拉加载更多是很常见的功能。下文给大家带来了Android Recyclerview上拉加载更多功能，需要的朋友参考下吧
2017-05-05
Android studio实现简易计算器App功能
这篇文章主要为大家详细介绍了Android studio实现简易计算器App功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05