Android编程实现自定义ImageView圆图功能的方法

本文实例讲述了Android编程实现自定义ImageView圆图功能的方法。分享给大家供大家参考,具体如下:

首先很感谢开源项目Universal Image Loader图片加载框架。之前也看过一段时间框架源码,但是却没有时间进行知识点的总结。

今天项目遇到了需要实现圆头像的编辑显示,Universal就已经提供了这个显示RoundedBitmapDisplayer这个类实现了圆图功能。看它的代码可以发现是实现的Drawable

public static class RoundedDrawable extends Drawable {
    protected final float cornerRadius;
    protected final int margin;
    protected final RectF mRect = new RectF(),
        mBitmapRect;
    protected final BitmapShader bitmapShader;
    protected final Paint paint;
    public RoundedDrawable(Bitmap bitmap, int cornerRadius, int margin) {
      this.cornerRadius = cornerRadius;
      this.margin = margin;
      bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
      mBitmapRect = new RectF (margin, margin, bitmap.getWidth() - margin, bitmap.getHeight() - margin);
      paint = new Paint();
      paint.setAntiAlias(true);
      paint.setShader(bitmapShader);
    }
    @Override
    protected void onBoundsChange(Rect bounds) {
      super.onBoundsChange(bounds);
      mRect.set(margin, margin, bounds.width() - margin, bounds.height() - margin);
      // Resize the original bitmap to fit the new bound
      Matrix shaderMatrix = new Matrix();
      shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
      bitmapShader.setLocalMatrix(shaderMatrix);
    }
    @Override
    public void draw(Canvas canvas) {
      canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint);
    }
    @Override
    public int getOpacity() {
      return PixelFormat.TRANSLUCENT;
    }
    @Override
    public void setAlpha(int alpha) {
      paint.setAlpha(alpha);
    }
    @Override
    public void setColorFilter(ColorFilter cf) {
      paint.setColorFilter(cf);
    }
  }

其实总结下来,上面圆图实现步骤就是:

1、通过bitmap初始化位图着色器BitmapShader类
2、计算bitmap原始图片的rect
3、计算放置图片需要的rect
4、使用Matrix类对两个rect进行压缩,然后复制给BitmapShader着色器里去。最后是画布画图。
(刚开始一直以为shader是阴影的意思,原来有道一下是着色器的意思,这个翻译其实对我理解代码还是很重要的,所以不要想当然,要勤奋点,这个是优秀程序员必备要素。)

最后我要实现的是继承ImageView实现圆图

public class URoundedImageView extends ImageView {
  private Paint mBitmapPaint,mBackgroundPaint;
  private BitmapShader mBitmapShader;
  private RectF mBitmapRect , mRect;
  private int borderWidth;
  private Bitmap mBitmap;
  private Matrix shaderMatrix;
  public URoundedImageView(Context context, AttributeSet attrs,
      int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  public URoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  public URoundedImageView(Context context) {
    super(context);
    init();
  }
  private void init(){
    mBitmapPaint = new Paint();
    mBitmapPaint.setAntiAlias(true);
    mBackgroundPaint = new Paint();
    mBackgroundPaint.setAntiAlias(true);
    mBackgroundPaint.setColor(Color.WHITE);
    borderWidth = 5;
    mRect = new RectF();
    shaderMatrix = new Matrix();
  }
  @Override
  protected void onLayout(boolean changed, int left, int top, int right,
      int bottom) {
    // TODO Auto-generated method stub
    super.onLayout(changed, left, top, right, bottom);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    mBitmap = ((BitmapDrawable) getDrawable()).getBitmap();
    if (getWidth() == 0 || getHeight() == 0 || mBitmap == null) {
      return;
    }
    int w = getWidth();
    int h = getHeight();
    int radius = Math.min(w, h) / 2;
    canvas.drawCircle(w / 2, h / 2, radius, mBackgroundPaint);
    //传入bitmap初始化位图着色器
    if (mBitmapShader == null) {
      mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP,
          Shader.TileMode.CLAMP);
    }
    if (mBitmapRect == null) {
      mBitmapRect = new RectF(borderWidth, borderWidth,
          mBitmap.getWidth() - borderWidth, mBitmap.getHeight()
              - borderWidth);
    }
    mBitmapPaint.setShader(mBitmapShader);
    mRect.set(borderWidth, borderWidth, w - borderWidth, h - borderWidth);
    //对bitmap原始图进行缩放
    shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
    mBitmapShader.setLocalMatrix(shaderMatrix);
    canvas.drawRoundRect(mRect, radius, radius, mBitmapPaint);
  }
}

刚开始写的不够规范,直接在ondraw方法里面new一些需要的对象,lint提醒我们Avoid object allocations during draw/layout operations (preallocate and reuse instead)这个warning。因为ondraw会不断调用,如果一直new对象的话会吃内存。所以为了避免重复new对象,根据自己的需求进行判空操作。具体根据自己需求来优化代码,有时候为了达到需求也没办法做到在ondraw方法里不出现重复new对象的现象。

总结:多参考优秀的开源项目,用正确的方法做正确的事情!

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android图形与图像处理技巧总结》、《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

(0)

相关推荐

  • Android自定义GestureDetector实现手势ImageView

    不说废话了,进入我们今天的主题吧. 先贴上前面内容的地址: Android手势ImageView三部曲(一) Android手势ImageView三部曲(二) Android手势ImageView三部曲(三) 前面我们讲到了ScaleGestureDetector这个工具类,我在疑惑,为什么搞出一个ScaleGestureDetector,不顺带把什么旋转.移动.做了呢? 好吧-! 谷歌肯定还是想给开发者留一点自己的空间哈. 仿照ScaleGestureDetector,我们来定义一个叫Move

  • android自定义ImageView仿图片上传示例

    看下效果图 主要看下自定义view 代码 public class ProcessImageView extends ImageView{ private Context context; private Paint paint; private LogUtil log=LogUtil.getInstance(); int progress = 0; private boolean flag; public ProcessImageView(Context context) { super(co

  • Android布局自定义Shap圆形ImageView可以单独设置背景与图片

    一.图片预览: 一.实现功能: 需求要实现布局中为圆形图片,图片背景与图标分开且合并到一个ImageView. 二.具体实现: XML中布局中定义ImageView,关健设置两个参数 Android:backgroup(设置背景),Android:src(设置ImageVIew中图片),圆形图片制作Drawable下定义xml shap样式(solid-color,size-width\hight) XML代码如下: <ImageView android:id="@+id/zhongjie

  • Android自定义圆角ImageView

    废话不多说了,直接给大家贴代码了. java类如下: import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Color; import android.gra

  • Android自定义ImageView实现自动放大缩小动画

    这篇讲的是如何生成一个自定义的ImageView,实现自动放大缩小动画. 为什么实现这个功能呢?因为我想在ViewPager实现图片放大缩小的动画,但是ViewPager几个页面的动画会一起动,而且放大全屏图片的话会相互覆盖,很诡异.于是上网搜demo,一无所获.迫于无奈... 废话不多说,直接贴代码. 1.配置文件直接添加 当直接在布局文件中添加图片的话,可以在自定义View代码中用getDrawable()获取图片资源,然后通过DrawBitmap绘制图片.通过不断绘制图片的位置,达到放大缩

  • Android 自定义imageview实现图片缩放实例详解

    Android 自定义imageview实现图片缩放实例详解 觉得这个自定义的imageview很好用 性能不错  所以拿出来分享给大家  因为不会做gif图  所以项目效果 就不好贴出来了  把代码贴出来 1.项目结构图 2.Compat.class package com.suo.image; import android.os.Build.VERSION; import android.os.Build.VERSION_CODES; import android.view.View; pu

  • Android自定义ImageView实现在图片上添加图层效果

    首先我们先看下效果图 实现思路 这是两张前后对比图,右边第二张图里面的已抢光标签图片当已经没有商品的时候就会显示了,在每个图片的中心位置,第一想法是在ImageView的外层再套一层RelativeLayout 实现方法 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <SelectableRoundedImageVi

  • Android自定义控件之圆形、圆角ImageView

    一.问题在哪里? 问题来源于app开发中一个很常见的场景--用户头像要展示成圆的:  二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在头像上不就完事了嘛,哈哈哈! 在背景纯色的前提下,这的确能简单解决问题,但是如果背景没有这么简单呢? 在这种不规则背景下,有两个问题: 1).背景图常常是适应手机宽度缩放,而头像的尺寸又是固定宽高DP的,所以固定的蒙板图片是没法保证在不同机型上都和背景图案吻合的. 2).在这种非纯色背景下,哪天想调整一下头像

  • Android自定义圆角ImageView控件

    目前一些比较火的图片加载库虽然支持圆角加载,若你是接的别人作了一半的项目,刚好别人用的图片加载库刚好不支持圆角加载,那么这颗控件你值得拥有.(支持网络图片的加载) 1.创建CustomImageView 类在你的项目中(源码如下) import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Bitmap.

  • Android 自定义圆形头像CircleImageView支持加载网络图片的实现代码

    在Android开发中我们常常用到圆形的头像,如果每次加载之后再进行圆形裁剪特别麻烦.所以在这里写一个自定义圆形ImageView,直接去加载网络图片,这样的话就特别的方便. 先上效果图 主要的方法 1.让自定义 CircleImageView 继承ImageView /** * 自定义圆形头像 * Created by Dylan on 2015/11/26 0026. */ public class CircleImageView extends ImageView { } 2.在构造方法中

  • Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码

    概述:通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放. /** * 自定义的ImageView控制,可对图片进行多点触控缩放和拖动 * * @author qiuwanyong */ public class MyImageView extends ImageView { /** * 初始化状态常量 */ public static final int STATUS_INIT = 1; /** * 图片放大状态常量 */ public static final i

随机推荐