圆形图片与圆角图片

最近项目中有用到圆形图片和圆角图片,在网上有很多代码也有很多方法,我找了两个相对比较简单的方法(也许是我自己以为);
现在记录一下
一、圆角图片

圆角图片很简单,自定义view就可以了,布局中直接引用
代码如下:

public class MyImageView extends ImageView{

   private Paint paint;

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

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

   public MyImageView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      paint  = new Paint();
   }

   /**
    * 绘制圆角矩形图片
    * @author caizhiming
    */
   @Override
   protected void onDraw(Canvas canvas) {

      Drawable drawable = getDrawable();
      if (null != drawable) {
         Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
         **Bitmap b = getRoundBitmap(bitmap, 10);** //调图片的圆角大小
         final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight());
         final Rect rectDest = new Rect(0,0,getWidth(),getHeight());
         paint.reset();
         canvas.drawBitmap(b, rectSrc, rectDest, paint);

      } else {
         super.onDraw(canvas);
      }
   }

   /**
    * 获取圆角矩形图片方法
    * @param bitmap
    * @param roundPx,一般设置成14
    * @return Bitmap
    * @author caizhiming
    */
   private Bitmap getRoundBitmap(Bitmap bitmap, int roundPx) {
      Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(output);

      final int color = 0xff424242;

      final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
      final RectF rectF = new RectF(rect);
      paint.setAntiAlias(true);
      canvas.drawARGB(0, 0, 0, 0);
      paint.setColor(color);
      int x = bitmap.getWidth();

      canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
      paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
      canvas.drawBitmap(bitmap, rect, rect, paint);
      return output;


   }
}

然后布局文件中引用

 <com.MyApplication.view.MyImageView
            android:id="@+id/iv_machine"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/nr6" />

很简单吧
下面介绍圆形图片,圆形图片相对比较复杂,需要些xml文件

在values下新建attr.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="borderRadius" format="dimension" />
    <attr name="type">
        <enum name="circle" value="0" />
        <enum name="round" value="1" />
    </attr>

    <declare-styleable name="RoundImageView">
        <attr name="borderRadius" />
        <attr name="type" />
    </declare-styleable>

</resources>

然后也是自定义view,直接布局文件中引用

public class RoundImageView extends ImageView
{
   /**
    * 图片的类型,圆形or圆角
    */
   private int type;
   public static final int TYPE_CIRCLE = 0;
   public static final int TYPE_ROUND = 1;
   /**
    * 圆角大小的默认值
    */
   private static final int BODER_RADIUS_DEFAULT = 10;
   /**
    * 圆角的大小
    */
   private int mBorderRadius;

   /**
    * 绘图的Paint
    */
   private Paint mBitmapPaint;
   /**
    * 圆角的半径
    */
   private int mRadius;
   /**
    * 3x3 矩阵,主要用于缩小放大
    */
   private Matrix mMatrix;
   /**
    * 渲染图像,使用图像为绘制图形着色
    */
   private BitmapShader mBitmapShader;
   /**
    * view的宽度
    */
   private int mWidth;
   private RectF mRoundRect;

   public RoundImageView(Context context, AttributeSet attrs)
   {

      super(context, attrs);
      mMatrix = new Matrix();
      mBitmapPaint = new Paint();
      mBitmapPaint.setAntiAlias(true);

      TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.RoundImageView);

      mBorderRadius = a.getDimensionPixelSize(
            R.styleable.RoundImageView_borderRadius, (int) TypedValue
                  .applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                        BODER_RADIUS_DEFAULT, getResources()
                              .getDisplayMetrics()));// 默认为10dp
      type = a.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle

      a.recycle();
   }

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

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
   {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);

      /**
       * 如果类型是圆形,则强制改变view的宽高一致,以小值为准
       */
      if (type == TYPE_CIRCLE)
      {
         mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
         mRadius = mWidth / 2;
         setMeasuredDimension(mWidth, mWidth);
      }

   }

   /**
    * 初始化BitmapShader
    */
   private void setUpShader()
   {
      Drawable drawable = getDrawable();
      if (drawable == null)
      {
         return;
      }

      Bitmap bmp = drawableToBitamp(drawable);
      // 将bmp作为着色器,就是在指定区域内绘制bmp
      mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
      float scale = 1.0f;
      if (type == TYPE_CIRCLE)
      {
         // 拿到bitmap宽或高的小值
         int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
         scale = mWidth * 1.0f / bSize;

      } else if (type == TYPE_ROUND)
      {
//       Log.e("TAG",
//             "b'w = " + bmp.getWidth() + " , " + "b'h = "
//                   + bmp.getHeight());
         if (!(bmp.getWidth() == getWidth() && bmp.getHeight() == getHeight()))
         {
            // 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;
            scale = Math.max(getWidth() * 1.0f / bmp.getWidth(),
                  getHeight() * 1.0f / bmp.getHeight());
         }

      }
      // shader的变换矩阵,我们这里主要用于放大或者缩小
      mMatrix.setScale(scale, scale);
      // 设置变换矩阵
      mBitmapShader.setLocalMatrix(mMatrix);
      // 设置shader
      mBitmapPaint.setShader(mBitmapShader);
   }

   @Override
   protected void onDraw(Canvas canvas)
   {

      if (getDrawable() == null)
      {
         return;
      }
      setUpShader();

      if (type == TYPE_ROUND)
      {
         canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,
               mBitmapPaint);
      } else
      {
         canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
         // drawSomeThing(canvas);
      }
   }

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

      // 圆角图片的范围
      if (type == TYPE_ROUND)
         mRoundRect = new RectF(0, 0, w, h);
   }

   /**
    * drawable转bitmap
    * 
    * @param drawable
    * @return
    */
   public Bitmap drawableToBitamp(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;
   }

   private static final String STATE_INSTANCE = "state_instance";
   private static final String STATE_TYPE = "state_type";
   private static final String STATE_BORDER_RADIUS = "state_border_radius";

   @Override
   protected Parcelable onSaveInstanceState()
   {
      Bundle bundle = new Bundle();
      bundle.putParcelable(STATE_INSTANCE, super.onSaveInstanceState());
      bundle.putInt(STATE_TYPE, type);
      bundle.putInt(STATE_BORDER_RADIUS, mBorderRadius);
      return bundle;
   }

   @Override
   protected void onRestoreInstanceState(Parcelable state)
   {
      if (state instanceof Bundle)
      {
         Bundle bundle = (Bundle) state;
         super.onRestoreInstanceState(((Bundle) state)
               .getParcelable(STATE_INSTANCE));
         this.type = bundle.getInt(STATE_TYPE);
         this.mBorderRadius = bundle.getInt(STATE_BORDER_RADIUS);
      } else
      {
         super.onRestoreInstanceState(state);
      }

   }

   public void setBorderRadius(int borderRadius)
   {
      int pxVal = dp2px(borderRadius);
      if (this.mBorderRadius != pxVal)
      {
         this.mBorderRadius = pxVal;
         invalidate();
      }
   }

   public void setType(int type)
   {
      if (this.type != type)
      {
         this.type = type;
         if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE)
         {
            this.type = TYPE_CIRCLE;
         }
         requestLayout();
      }

   }

   public int dp2px(int dpVal)
   {
      return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
            dpVal, getResources().getDisplayMetrics());
   }

   //获得圆角图片的方法
   public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,float roundPx) {

      Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
            .getHeight(), Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(output);

      final int color = 0xff424242;
      final Paint paint = new Paint();
      final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
      final RectF rectF = new RectF(rect);

      paint.setAntiAlias(true);
      canvas.drawARGB(0, 0, 0, 0);
      paint.setColor(color);
      canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

      paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
      canvas.drawBitmap(bitmap, rect, rect, paint);

      return output;
   }


   }

直接布局文件中引用即可!如下:

<com.MyApplication.view.RoundImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:src="@drawable/tou" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值