Android自定义圆角ImageView控件

目前一些比较火的图片加载库虽然支持圆角加载,若你是接的别人作了一半的项目,刚好别人用的图片加载库刚好不支持圆角加载,那么这颗控件你值得拥有.(支持网络图片的加载)

1.创建CustomImageView 类在你的项目中(源码如下)

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.towatt.charge.towatt.R;

/**
 * @author Mr.lynn
 * @version 1.0<br>
 * 图片圆角实现
 */
public class CustomImageView extends android.support.v7.widget.AppCompatImageView {
 private Paint paint;
 private Paint paintBorder;
 private Bitmap mSrcBitmap;
 /**
  * 圆角的弧度
  */
 private float mRadius;
 private boolean mIsCircle;

 public CustomImageView(final Context context) {
  this(context, null);
 }

 public CustomImageView(Context context, AttributeSet attrs) {
  this(context, attrs, R.attr.customImageViewStyle);
 }

 public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  TypedArray ta = context.obtainStyledAttributes(attrs,
    R.styleable.CustomImageView, defStyle, 0);
  mRadius = ta.getDimension(R.styleable.CustomImageView_radius, 0);
  mIsCircle = ta.getBoolean(R.styleable.CustomImageView_circle, false);
  int srcResource = attrs.getAttributeResourceValue(
    "http://schemas.android.com/apk/res/android", "src", 0);
  if (srcResource != 0)
   mSrcBitmap = BitmapFactory.decodeResource(getResources(),
     srcResource);
  ta.recycle();
  paint = new Paint();
  paint.setAntiAlias(true);
  paintBorder = new Paint();
  paintBorder.setAntiAlias(true);
 }

 @Override
 public void onDraw(Canvas canvas) {
  int width = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
  int height = canvas.getHeight() - getPaddingTop() - getPaddingBottom();
  Bitmap image = drawableToBitmap(getDrawable());
  if (mIsCircle) {
   Bitmap reSizeImage = reSizeImageC(image, width, height);
   canvas.drawBitmap(createCircleImage(reSizeImage, width, height),
     getPaddingLeft(), getPaddingTop(), null);

  } else {

   Bitmap reSizeImage = reSizeImage(image, width, height);
   canvas.drawBitmap(createRoundImage(reSizeImage, width, height),
     getPaddingLeft(), getPaddingTop(), null);
  }
 }

 /**
  * 画圆角
  *
  * @param source
  * @param width
  * @param height
  * @return
  */
 private Bitmap createRoundImage(Bitmap source, int width, int height) {
  Paint paint = new Paint();
  paint.setAntiAlias(true);
  Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
  Canvas canvas = new Canvas(target);
  RectF rect = new RectF(0, 0, width, height);
  canvas.drawRoundRect(rect, mRadius, mRadius, paint);
  // 核心代码取两个图片的交集部分
  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  canvas.drawBitmap(source, 0, 0, paint);
  return target;
 }

 /**
  * 画圆
  *
  * @param source
  * @param width
  * @param height
  * @return
  */
 private Bitmap createCircleImage(Bitmap source, int width, int height) {

  Paint paint = new Paint();
  paint.setAntiAlias(true);
  Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
  Canvas canvas = new Canvas(target);
  canvas.drawCircle(width / 2, height / 2, Math.min(width, height) / 2,
    paint);
  // 核心代码取两个图片的交集部分
  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  canvas.drawBitmap(source, (width - source.getWidth()) / 2,
    (height - source.getHeight()) / 2, paint);
  return target;

 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  int width = MeasureSpec.getSize(widthMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);
  setMeasuredDimension(width, height);
 }

 /**
  * drawable转bitmap
  *
  * @param drawable
  * @return
  */
 private Bitmap drawableToBitmap(Drawable drawable) {
  if (drawable == null) {
   if (mSrcBitmap != null) {
    return mSrcBitmap;
   } else {
    return null;
   }
  } else if (drawable instanceof BitmapDrawable) {
   return ((BitmapDrawable) drawable).getBitmap();
  }
  Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
    drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
  drawable.draw(canvas);
  return bitmap;
 }

 /**
  * 重设Bitmap的宽高
  *
  * @param bitmap
  * @param newWidth
  * @param newHeight
  * @return
  */
 private Bitmap reSizeImage(Bitmap bitmap, int newWidth, int newHeight) {
  int width = bitmap.getWidth();
  int height = bitmap.getHeight();
  // 计算出缩放比
  float scaleWidth = ((float) newWidth) / width;
  float scaleHeight = ((float) newHeight) / height;
  // 矩阵缩放bitmap
  Matrix matrix = new Matrix();

  matrix.postScale(scaleWidth, scaleHeight);
  return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
 }

 /**
  * 重设Bitmap的宽高
  *
  * @param bitmap
  * @param newWidth
  * @param newHeight
  * @return
  */
 private Bitmap reSizeImageC(Bitmap bitmap, int newWidth, int newHeight) {
  int width = bitmap.getWidth();
  int height = bitmap.getHeight();
  int x = (newWidth - width) / 2;
  int y = (newHeight - height) / 2;
  if (x > 0 && y > 0) {
   return Bitmap.createBitmap(bitmap, 0, 0, width, height, null, true);
  }

  float scale = 1;

  if (width > height) {
   // 按照宽度进行等比缩放
   scale = ((float) newWidth) / width;

  } else {
   // 按照高度进行等比缩放
   // 计算出缩放比
   scale = ((float) newHeight) / height;
  }
  Matrix matrix = new Matrix();
  matrix.postScale(scale, scale);
  return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
 }
}

2.在values目录下创建attrs.xml(若是已存在该文件)直接复制如下代码既可

<resources>
 <declare-styleable name="Theme">
  <attr name="customImageViewStyle" format="reference" />
 </declare-styleable>
 <!-- 自定义圆角ImageView -->
 <declare-styleable name="CustomImageView">
  <attr name="circle" format="boolean" />
  <attr name="radius" format="dimension" />
 </declare-styleable>
</resources>

3.正确的使用方式(在布局文件中)

注意此路径是你控件所在包

 <com.xxx.xxx.view.CustomImageView
  android:layout_marginTop="5dp"
  android:layout_width="77dp"
  android:layout_height="77dp"
  lynn:radius="@dimen/size_10dp"
  android:src="@drawable/position_icon"
  android:id="@+id/iv_build_icon" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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

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

  • Android中自定义ImageView添加文字说明详解

    前言 大家应该都有所体会,在android开发中,需要展示图片的地方有很多..正常情况下展示一张图片的时候还需要在下面添加一个文字说明..我们也可以用布局ImageView+TextView来实现..最常见的就是底部菜单,或者顶部菜单...图标下面还要添加一个文字说明...重复多次使用ImageView+TextView来实现会感觉有点麻烦.. 下面就介绍一个简易的图片+文字的简单控件,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 上效果图 效果图 下面我们开始撸代码. MyI

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

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

  • Android自定义圆角ImageView控件

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

  • Android自定义播放器控件VideoView

    介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于播放视频

  • Android自定义加载控件实现数据加载动画

    本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 package com.*****.*****.widget; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.

  • Android自定义圆环倒计时控件

    本文实例为大家分享了Android自定义圆环倒计时控件的具体代码,供大家参考,具体内容如下 先来一张最终效果图: 主要思路: 在画渐变色圆环的时候,设置一个属性动画,根据属性动画的执行时长,来作为倒计时的时长.监听属性动画的进度,来达到 倒计时的目的. 二话不说,直接贴代码.具体实现思路都在注释上. 自定义属性: <declare-styleable name="CountDownProgressBar"> <attr name="countDown_cir

  • Android自定义日历滑动控件

    本文实例为大家分享了Android自定义日历滑动控件的使用方法,供大家参考,具体内容如下 最近公司项目需要做这个需求,自己才疏学浅,总算能写出个大概来,遂在这里记录下来. 分析 先来分析一下: 首先,我们的需求是可以左右点击查看跳转到下一个月,中间的日历控件可以水平滚动选择日期,所以我们中间的日历控件用一个RecycleView来做,左右两位的为ImageVeiw. LRCalendarView 总体流程: 编写LRCalendarView的布局R.layout.calendar_view 新建

  • Android自定义实现日历控件

    本文实例为大家分享了Android自定义实现日历控件的具体代码,供大家参考,具体内容如下 1. Calendar类 2. 布局 创建calendar_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:padding="20sp" android:orientation="vertical" android:l

  • Android自定义双向滑动控件

    本文实例为大家分享了Android自定义双向滑动控件的具体代码,供大家参考,具体内容如下 先看一下效果图 1.SeekBarPressure工具类 public class SeekBarPressure extends View {     private static final String TAG = "SeekBarPressure";     private static final int CLICK_ON_LOW = 1;      //点击在前滑块上     priv

  • Android自定义折线图控件的完整步骤

    目录 前言 概述 原点 计算Y轴宽度 计算X轴高度 X轴 绘制轴线 X轴刻度间隔 网格线.文本 Y轴 计算Y轴分布 刻度间隔.网格线.文本 折线 代码 总结 前言 日前,有一个“折现图”的需求,如下图所示: 概述 如何自定义折线图?首先将折线图的绘制部分拆分成三部分: 原点 X轴 Y轴 折线 原点 第一步,需要定义出“折线图”原点的位置,由图得: 可以发现,原点的位置由X轴.Y轴所占空间决定: OriginX:Y轴宽度OriginY:View高度 - X轴高度 计算Y轴宽度 思路:遍历Y轴的绘制

  • Android自定义星星评分控件

    下面为控件的实现历程: 此控件高效,直接使用ondraw绘制,先亮照: 由于Android自身的星星评分控件样式可以改,但是他的大小不好调整的缺点,只能用small normal这样的style调整,自定义不强,因此击发了我自定义星星控件的欲望. 星星评分控件的设计,大体规划为: 需要两张图片,一颗亮星星,一颗空星星:(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样. 星星控件大体分为

随机推荐