android自定义控件ImageView实现圆形图片

android开发中常常涉及到一种情况,就是将用户上传的图片以圆形样式显示,但是用户上传的图片可以有直角、圆角、正方形等多种不确定样式,这时就用到了自定义ImageView控件,在安卓客户端使接收到的图片全部以圆形样式显示

CircleImageView.java

public class CircleImageView extends ImageView {
 private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
 private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
 private static final int COLORDRAWABLE_DIMENSION = 2;
 // 圆形边框的厚度默认值。
 // 如果是0,则没有天蓝色渐变的边框。
 private static final int DEFAULT_BORDER_WIDTH = 0;
 private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
 private final RectF mDrawableRect = 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;
 private int mBitmapHeight;
 private float mDrawableRadius;
 private float mBorderRadius;
 private boolean mReady;
 private boolean mSetupPending;
 private final Paint mFlagBackgroundPaint = new Paint();
 private final TextPaint mFlagTextPaint = new TextPaint();
 private String mFlagText;
 private boolean mShowFlag = false;
 private Rect mFlagTextBounds = new Rect();
 Shader mSweepGradient = null;
 public CircleImageView(Context context) {
 super(context);
 init();
 }

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

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

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

 @Override
 public ScaleType getScaleType() {
 return SCALE_TYPE;
 }

 @Override
 public void setScaleType(ScaleType scaleType) {
 if (scaleType != SCALE_TYPE) {
  throw new IllegalArgumentException(String.format(
   "ScaleType %s not supported.", scaleType));
 }
 }

 @Override
 public void setAdjustViewBounds(boolean adjustViewBounds) {
 if (adjustViewBounds) {
  throw new IllegalArgumentException(
   "adjustViewBounds not supported.");
 }
 }

 @Override
 protected void onDraw(Canvas canvas) {
 if (getDrawable() == null) {
  return;
 }
 canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius,
  mBitmapPaint);
 if (mBorderWidth != 0) {
  canvas.save();
  canvas.rotate(20, getWidth() / 2, getHeight() / 2);
  canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius,
   mBorderPaint);
  canvas.restore();
 }
 if (mShowFlag && mFlagText != null) {
  canvas.drawArc(mBorderRect, 40, 100, false, mFlagBackgroundPaint);
  mFlagTextPaint.getTextBounds(mFlagText, 0, mFlagText.length(),
   mFlagTextBounds);
  canvas.drawText(mFlagText, getWidth() / 2,
   (float) ((3 + Math.cos((float) (Math.PI * 5 / 18)))
      * getHeight() / 4 + mFlagTextBounds.height() / 3),
   mFlagTextPaint);
 }
 }

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

 public int getBorderColor() {
 return mBorderColor;
 }

 public void setBorderColor(int borderColor) {
 if (borderColor == mBorderColor) {
  return;
 }

 mBorderColor = borderColor;
 mBorderPaint.setColor(mBorderColor);
 invalidate();
 }

 public int getBorderWidth() {
 return mBorderWidth;
 }

 /**
 * @param borderWidth
 *  圆形的边框厚度。
 */
 public void setBorderWidth(int borderWidth) {
 if (borderWidth == mBorderWidth) {
  return;
 }

 mBorderWidth = borderWidth;
 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 setImageResource(int resId) {
 super.setImageResource(resId);
 mBitmap = getBitmapFromDrawable(getDrawable());
 setup();
 }

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

 private Bitmap getBitmapFromDrawable(Drawable drawable) {
 if (drawable == null) {
  return null;
 }

 if (drawable instanceof BitmapDrawable) {
  return ((BitmapDrawable) drawable).getBitmap();
 }

 try {
  Bitmap bitmap;
  if (drawable instanceof ColorDrawable) {
  bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION,
   COLORDRAWABLE_DIMENSION, 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 (OutOfMemoryError e) {
  return null;
 }
 }

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

 if (mBitmap == null) {
  return;
 }

 mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP,
  Shader.TileMode.CLAMP);

 mBitmapPaint.setAntiAlias(true);
 mBitmapPaint.setShader(mBitmapShader);

 mBorderPaint.setStyle(Paint.Style.STROKE);
 mBorderPaint.setAntiAlias(true);
 mBorderPaint.setColor(mBorderColor);
 mBorderPaint.setStrokeWidth(mBorderWidth);

 mBitmapHeight = mBitmap.getHeight();
 mBitmapWidth = mBitmap.getWidth();

 mBorderRect.set(0, 0, getWidth(), getHeight());
 mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2,
  (mBorderRect.width() - mBorderWidth) / 2);

 mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width()
  - mBorderWidth, mBorderRect.height() - mBorderWidth);
 mDrawableRadius = Math.min(mDrawableRect.height() / 2,
  mDrawableRect.width() / 2);

 mFlagBackgroundPaint.setColor(Color.BLACK & 0x66FFFFFF);
 mFlagBackgroundPaint.setFlags(TextPaint.ANTI_ALIAS_FLAG);

 mFlagTextPaint.setFlags(TextPaint.ANTI_ALIAS_FLAG);
 mFlagTextPaint.setTextAlign(Align.CENTER);
 mFlagTextPaint.setColor(Color.WHITE);
 mFlagTextPaint
  .setTextSize(getResources().getDisplayMetrics().density * 18);

 mSweepGradient = new SweepGradient(getWidth() / 2, getHeight() / 2,
  new int[] { Color.rgb(255, 255, 255), Color.rgb(1, 209, 255) },
  null);

 mBorderPaint.setShader(mSweepGradient);

 updateShaderMatrix();
 invalidate();
 }

 private void updateShaderMatrix() {
 float scale;
 float dx = 0;
 float dy = 0;

 mShaderMatrix.set(null);

 if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width()
  * mBitmapHeight) {
  scale = mDrawableRect.height() / (float) mBitmapHeight;
  dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
 } else {
  scale = mDrawableRect.width() / (float) mBitmapWidth;
  dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
 }

 mShaderMatrix.setScale(scale, scale);
 mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth,
  (int) (dy + 0.5f) + mBorderWidth);

 mBitmapShader.setLocalMatrix(mShaderMatrix);
 }

 public void setShowFlag(boolean show) {
 mShowFlag = show;
 invalidate();
 }

 public void setFlagText(String text) {
 mFlagText = text;
 invalidate();
 }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  >
  <com.example.view.CircleImageView
   android:layout_width="match_parent"
  android:layout_height="match_parent"/>
</LinearLayout>

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

(0)

相关推荐

  • 详解Android中Glide与CircleImageView加载圆形图片的问题

    最近在项目中遇到了一个奇怪的问题,Glide和CircleImageView一起使用加载圆形头像,发现第一次死活都加载出来,出来的是一张占位图,当你刷新的时候或者第二次进入的时候才能加载出来.究其原因,CircleImageView 把位置占了.这时候我们有如下4种解决方案,不管是哪一种都是可以解决的(亲测可行). 1. 不使用占位符 注释掉这两句代码即可. .placeholder(R.drawable.normal_photo) .error(R.drawable.normal_photo)

  • android绘制圆形图片的两种方式示例

    android绘制圆形图片的两种方式 看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap当做一种颜色 设置给paint ,paint都已经有颜色了 你想让它方了,圆了,扁了 还不是看你心情 canvas调用那个方法咯 实现的大致思路如下: 1. 创建一个类 继承imageView 重写onDraw() 2. 获取到bitmap图片 3. 计算图片的

  • 分享一个Android设置圆形图片的特别方法

    Cardview配合ImageView显示圆形图效果图: 刚在看自定义View的知识点时,突然想起来,如果CardView宽高相等,CardView设置圆角的半径为宽高的一半时,不就是一个圆形嘛?! 1.布局文件 <android.support.v7.widget.CardView android:id="@+id/cv_img_activity" android:layout_width="200dp" android:layout_height=&quo

  • Android自定义View实现旋转的圆形图片

    自定义View是android开发的一个重要技能,用android提供的2/3D绘制相关类可以实现非常多炫酷的效果,需要实打实的编程基础. 但是自定义View又是我的弱项,所以最近都在摸索.练习自定义View.今天我写了一个圆形图片,同时不断匀速旋转的RotateCircleImageView.实现方法是自己想的,但肯定不是最好的实现方法. 自定义View分四步. 一:自定义属性: 二:创建自定义View,在构造方法中拿到自定义属性: 三:重写onMeasure方法: 四:重写onDraw方法

  • Android实现圆形图片或者圆角图片

    Android圆形图片或者圆角图片的快速实现,具体内容如下 话不多说直接上code xml文件布局 <LinearLayout android:id="@+id/ll_headpict" android:layout_width="match_parent" android:layout_height="97dp" android:layout_margin="13dp" android:background="

  • Android编程绘制圆形图片的方法

    本文实例讲述了Android编程绘制圆形图片的方法.分享给大家供大家参考,具体如下: 效果图如下: 第一步:新建RoundView自定义控件继承View package com.rong.activity; import com.rong.test.R; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.grap

  • Android中Glide加载圆形图片和圆角图片实例代码

    一.简介: 介绍两种使用 BitmapTransformation 来实现 Glide 加载圆形图片和圆角图片的方法.Glide 并不能直接支持 Round Pictures ,需要使用 BitmapTransformation 来进行处理. 二.网上的实现方式 这里介绍下网上常见的方式和使用 RoundedBitmapDrawable 两种方法,本质上是差不多的: 使用 Canvas 和 Paint 来绘制 使用 Android.support.v4.graphics.drawable.Rou

  • Android使用自定义ImageView实现圆形图片效果

    android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪圆形的bitmap,然后在onDraw()进行绘制圆形图片输出. 效果图如下: 自定义的圆形的ImageView类的实现代码如下: package com.xc.xcskin.view; import android.content.Context; import android.grap

  • Android实现圆形图片的两种方式

    在项目中,我们经常会用到圆形图片,但是android本身又没有提供,那我只能我们自己来完成. 第一种方式,自定义CircleImageView: public class CircleImageView extends ImageView { private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP; private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Con

  • Android自定义View旋转圆形图片

    一个自定义View,记录一下思路和代码以备以后使用. 思路: 1.首先要画一个圆形图片和一个圆形背景图(通过自定义View); 2.自定义View基本步骤初始化属性,测量宽高和中心点,然后绘制图片; 3.通过handler实现图片的角度旋转.然后然后就慢慢撸. 效果图: 1.废话不多直接上代码 public class MusicPlayerView extends View { private static final long ROTATE_DELAY = 5;//旋转动作时间 privat

  • Android裁剪图片为圆形图片的实现原理与代码

    以前在eoe论坛中找过裁剪图片为圆形图片的方法,但是效果都不是很理想,这几天因为公司业务的要求,需要对头像进行裁剪以圆形的方式显示,这个方法是根据传入的图片的高度(height)和宽度(width)决定的,如果是 width <= height时,则会裁剪高度,裁剪的区域是宽度不变高度从顶部到宽度width的长度:如果 width > height,则会裁剪宽度,裁剪的区域是高度不变,宽度是取的图片宽度的中心区域,不过不同的业务需求,对裁剪图片要求不一样,可以根据业务的需求来调整裁剪的区域.

  • Android开发实现圆形图片功能示例

    本文实例讲述了Android开发实现圆形图片功能.分享给大家供大家参考,具体如下: **绝对布局:通过直接给定控件起始坐标 ( x , y ) 和 ( w , l ) ,来生成控件. 圆形头像:CircleImageView的使用 ** 注:在build.gradle中添加: implementation 'de.hdodenhof:circleimageview:1.3.0' XML布局文件: <?xml version="1.0" encoding="utf-8&q

随机推荐