«

Android圆形图片--自定义控件

时间：2024-3-2 18:39     作者：韩俊     分类： Android

Android圆形图片控件效果图如下：



代码如下:

RoundImageView.java

[html] view
plaincopyprint?

package com.dxd.roundimageview;
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.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.NinePatchDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

import com.alan.myimageview.R;

/**

  • 圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。

  • 设置颜色在xml布局文件中由自定义属性配置参数指定
    */
    public class RoundImageView extends ImageView {
    private int mBorderThickness = 0;
    private Context mContext;
    private int defaultColor = 0xFFFFFFFF;
    // 如果只有其中一个有值，则只画一个圆形边框
    private int mBorderOutsideColor = 0;
    private int mBorderInsideColor = 0;
    // 控件默认长、宽
    private int defaultWidth = 0;
    private int defaultHeight = 0;

    public RoundImageView(Context context) {
    super(context);
    mContext = context;
    }

    public RoundImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mContext = context;
    setCustomAttributes(attrs);
    }

    public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mContext = context;
    setCustomAttributes(attrs);
    }

    private void setCustomAttributes(AttributeSet attrs) {
    TypedArray a = mContext.obtainStyledAttributes(attrs,R.styleable.roundedimageview);
    mBorderThickness = a.getDimensionPixelSize(R.styleable.roundedimageview_border_thickness, 0);
    mBorderOutsideColor = a.getColor(R.styleable.roundedimageview_border_outside_color,defaultColor);
    mBorderInsideColor = a.getColor(R.styleable.roundedimageview_border_inside_color, defaultColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
    Drawable drawable = getDrawable() ;
    if (drawable == null) {
    return;
    }
    if (getWidth() == 0 || getHeight() == 0) {
    return;
    }
    this.measure(0, 0);
    if (drawable.getClass() == NinePatchDrawable.class)
    return;
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
    if (defaultWidth == 0) {
    defaultWidth = getWidth();
    }
    if (defaultHeight == 0) {
    defaultHeight = getHeight();
    }
    int radius = 0;
    if (mBorderInsideColor != defaultColor && mBorderOutsideColor != defaultColor) {// 定义画两个边框，分别为外圆边框和内圆边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - 2 * mBorderThickness;
    // 画内圆
    drawCircleBorder(canvas, radius + mBorderThickness / 2,mBorderInsideColor);
    // 画外圆
    drawCircleBorder(canvas, radius + mBorderThickness + mBorderThickness / 2, mBorderOutsideColor);
    } else if (mBorderInsideColor != defaultColor && mBorderOutsideColor == defaultColor) {// 定义画一个边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness;
    drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderInsideColor);
    } else if (mBorderInsideColor == defaultColor && mBorderOutsideColor != defaultColor) {// 定义画一个边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness;
    drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderOutsideColor);
    } else {// 没有边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2;
    }
    Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
    canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight / 2 - radius, null);
    }

    /**

    • 获取裁剪后的圆形图片

    • @param radius半径
      /
      public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
      Bitmap scaledSrcBmp;
      int diameter = radius       2;
      // 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片
      int bmpWidth = bmp.getWidth();
      int bmpHeight = bmp.getHeight();
      int squareWidth = 0, squareHeight = 0;
      int x = 0, y = 0;
      Bitmap squareBitmap;
      if (bmpHeight > bmpWidth) {// 高大于宽
      squareWidth = squareHeight = bmpWidth;
      x = 0;
      y = (bmpHeight - bmpWidth) / 2;
      // 截取正方形图片
      squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight);
      } else if (bmpHeight < bmpWidth) {// 宽大于高
      squareWidth = squareHeight = bmpHeight;
      x = (bmpWidth - bmpHeight) / 2;
      y = 0;
      squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,squareHeight);
      } else {
      squareBitmap = bmp;
      }
      if (squareBitmap.getWidth() != diameter || squareBitmap.getHeight() != diameter) {
      scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,diameter, true);
      } else {
      scaledSrcBmp = squareBitmap;
      }
      Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),
      scaledSrcBmp.getHeight(),
      Config.ARGB_8888);
      Canvas canvas = new Canvas(output);

      Paint paint = new Paint();
      Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),scaledSrcBmp.getHeight());

      paint.setAntiAlias(true);
      paint.setFilterBitmap(true);
      paint.setDither(true);
      canvas.drawARGB(0, 0, 0, 0);
      canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
      scaledSrcBmp.getHeight() / 2,
      scaledSrcBmp.getWidth() / 2,
      paint);
      paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
      canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
      bmp = null;
      squareBitmap = null;
      scaledSrcBmp = null;
      return output;
      }

    /**

    • 边缘画圆
      /
      private void drawCircleBorder(Canvas canvas, int radius, int color) {
      Paint paint = new Paint();
      /       去锯齿 /
      paint.setAntiAlias(true);
      paint.setFilterBitmap(true);
      paint.setDither(true);
      paint.setColor(color);
      /       设置paint的　style　为STROKE：空心 /
      paint.setStyle(Paint.Style.STROKE);
      /       设置paint的外框宽度 */
      paint.setStrokeWidth(mBorderThickness);
      canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);
      }
      }

[html] view
plaincopyprint?

package com.dxd.roundimageview;
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.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.NinePatchDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

import com.alan.myimageview.R;

/**

  • 圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。

  • 设置颜色在xml布局文件中由自定义属性配置参数指定
    */
    public class RoundImageView extends ImageView {
    private int mBorderThickness = 0;
    private Context mContext;
    private int defaultColor = 0xFFFFFFFF;
    // 如果只有其中一个有值，则只画一个圆形边框
    private int mBorderOutsideColor = 0;
    private int mBorderInsideColor = 0;
    // 控件默认长、宽
    private int defaultWidth = 0;
    private int defaultHeight = 0;

    public RoundImageView(Context context) {
    super(context);
    mContext = context;
    }

    public RoundImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mContext = context;
    setCustomAttributes(attrs);
    }

    public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    mContext = context;
    setCustomAttributes(attrs);
    }

    private void setCustomAttributes(AttributeSet attrs) {
    TypedArray a = mContext.obtainStyledAttributes(attrs,R.styleable.roundedimageview);
    mBorderThickness = a.getDimensionPixelSize(R.styleable.roundedimageview_border_thickness, 0);
    mBorderOutsideColor = a.getColor(R.styleable.roundedimageview_border_outside_color,defaultColor);
    mBorderInsideColor = a.getColor(R.styleable.roundedimageview_border_inside_color, defaultColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
    Drawable drawable = getDrawable() ;
    if (drawable == null) {
    return;
    }
    if (getWidth() == 0 || getHeight() == 0) {
    return;
    }
    this.measure(0, 0);
    if (drawable.getClass() == NinePatchDrawable.class)
    return;
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
    if (defaultWidth == 0) {
    defaultWidth = getWidth();
    }
    if (defaultHeight == 0) {
    defaultHeight = getHeight();
    }
    int radius = 0;
    if (mBorderInsideColor != defaultColor && mBorderOutsideColor != defaultColor) {// 定义画两个边框，分别为外圆边框和内圆边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - 2 * mBorderThickness;
    // 画内圆
    drawCircleBorder(canvas, radius + mBorderThickness / 2,mBorderInsideColor);
    // 画外圆
    drawCircleBorder(canvas, radius + mBorderThickness + mBorderThickness / 2, mBorderOutsideColor);
    } else if (mBorderInsideColor != defaultColor && mBorderOutsideColor == defaultColor) {// 定义画一个边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness;
    drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderInsideColor);
    } else if (mBorderInsideColor == defaultColor && mBorderOutsideColor != defaultColor) {// 定义画一个边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2 - mBorderThickness;
    drawCircleBorder(canvas, radius + mBorderThickness / 2, mBorderOutsideColor);
    } else {// 没有边框
    radius = (defaultWidth < defaultHeight ? defaultWidth : defaultHeight) / 2;
    }
    Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
    canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight / 2 - radius, null);
    }

    /**

    • 获取裁剪后的圆形图片

    • @param radius半径
      /
      public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
      Bitmap scaledSrcBmp;
      int diameter = radius       2;
      // 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片
      int bmpWidth = bmp.getWidth();
      int bmpHeight = bmp.getHeight();
      int squareWidth = 0, squareHeight = 0;
      int x = 0, y = 0;
      Bitmap squareBitmap;
      if (bmpHeight > bmpWidth) {// 高大于宽
      squareWidth = squareHeight = bmpWidth;
      x = 0;
      y = (bmpHeight - bmpWidth) / 2;
      // 截取正方形图片
      squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth, squareHeight);
      } else if (bmpHeight < bmpWidth) {// 宽大于高
      squareWidth = squareHeight = bmpHeight;
      x = (bmpWidth - bmpHeight) / 2;
      y = 0;
      squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,squareHeight);
      } else {
      squareBitmap = bmp;
      }
      if (squareBitmap.getWidth() != diameter || squareBitmap.getHeight() != diameter) {
      scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,diameter, true);
      } else {
      scaledSrcBmp = squareBitmap;
      }
      Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),
      scaledSrcBmp.getHeight(),
      Config.ARGB_8888);
      Canvas canvas = new Canvas(output);

      Paint paint = new Paint();
      Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),scaledSrcBmp.getHeight());

      paint.setAntiAlias(true);
      paint.setFilterBitmap(true);
      paint.setDither(true);
      canvas.drawARGB(0, 0, 0, 0);
      canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
      scaledSrcBmp.getHeight() / 2,
      scaledSrcBmp.getWidth() / 2,
      paint);
      paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
      canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
      bmp = null;
      squareBitmap = null;
      scaledSrcBmp = null;
      return output;
      }

    /**

    • 边缘画圆
      /
      private void drawCircleBorder(Canvas canvas, int radius, int color) {
      Paint paint = new Paint();
      /       去锯齿 /
      paint.setAntiAlias(true);
      paint.setFilterBitmap(true);
      paint.setDither(true);
      paint.setColor(color);
      /       设置paint的　style　为STROKE：空心 /
      paint.setStyle(Paint.Style.STROKE);
      /       设置paint的外框宽度 */
      paint.setStrokeWidth(mBorderThickness);
      canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);
      }
      }


1、定义自己的属性配置文件：attr.xml

[html] view
plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="roundedimageview">
<attr name="border_thickness" format="dimension" />
<attr name="border_inside_color" format="color" />
<attr name="border_outside_color" format="color"></attr>
</declare-styleable>
</resources>

[html] view
plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="roundedimageview">
<attr name="border_thickness" format="dimension" />
<attr name="border_inside_color" format="color" />
<attr name="border_outside_color" format="color"></attr>
</declare-styleable>
</resources>


2、在xml配置中使用控件：activity_main.xml

[html] view
plaincopyprint?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
xmlns:tools="http://schemas.android.com/tools&quot;
xmlns:imagecontrol="http://schemas.android.com/apk/res-auto&quot;
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
> 

&lt;!-- 没有指定圆形ImageView属性时，默认没有外边圆颜色 --&gt;  
&lt;!-- 需要将图片资源自定为src ，或在程序中setImageResource(res) 不能设置background为图片，这样不能达到圆形效果--&gt;  
&lt;com.dxd.roundimageview.RoundImageView   
    android:layout_width=&quot;100dp&quot;  
    android:layout_height=&quot;100dp&quot;  
    android:src=&quot;@drawable/img&quot;  
    /&gt;  
&lt;!-- border_outside_color 外部圆圈的颜色 --&gt;  
&lt;!-- border_inside_color 内部部圆圈的颜色 --&gt;  
&lt;!-- border_thickness 外圆和内圆的宽度 --&gt;  
&lt;com.dxd.roundimageview.RoundImageView   
    android:layout_width=&quot;100dp&quot;  
    android:layout_height=&quot;100dp&quot;  
    android:src=&quot;@drawable/img&quot;  
    imagecontrol:border_inside_color=&quot;#bc0978&quot;  
    imagecontrol:border_outside_color=&quot;#ba3456&quot;  
    imagecontrol:border_thickness=&quot;1dp&quot;  
    /&gt;

</LinearLayout>

[html] view
plaincopyprint?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
xmlns:tools="http://schemas.android.com/tools&quot;
xmlns:imagecontrol="http://schemas.android.com/apk/res-auto&quot;
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
> 

&lt;!-- 没有指定圆形ImageView属性时，默认没有外边圆颜色 --&gt;  
&lt;!-- 需要将图片资源自定为src ，或在程序中setImageResource(res) 不能设置background为图片，这样不能达到圆形效果--&gt;  
&lt;com.dxd.roundimageview.RoundImageView   
    android:layout_width=&quot;100dp&quot;  
    android:layout_height=&quot;100dp&quot;  
    android:src=&quot;@drawable/img&quot;  
    /&gt;  
&lt;!-- border_outside_color 外部圆圈的颜色 --&gt;  
&lt;!-- border_inside_color 内部部圆圈的颜色 --&gt;  
&lt;!-- border_thickness 外圆和内圆的宽度 --&gt;  
&lt;com.dxd.roundimageview.RoundImageView   
    android:layout_width=&quot;100dp&quot;  
    android:layout_height=&quot;100dp&quot;  
    android:src=&quot;@drawable/img&quot;  
    imagecontrol:border_inside_color=&quot;#bc0978&quot;  
    imagecontrol:border_outside_color=&quot;#ba3456&quot;  
    imagecontrol:border_thickness=&quot;1dp&quot;  
    /&gt;

</LinearLayout>

3、主Activity中没有相关代码，直接加载布局文件即可。

标签: android

热门推荐

1 Android 实现智能机器人聊天
2 Android 动画实现-原来如此简单
3 在Android中实现截图功能
4 android在线程（Thread）里面弹Toast框
5 android亮屏、暗屏、解锁、关闭系统对话的监听事件
6 Cannot run program &quot;/home/mohemi/Program/adt-bundle-linux-x86_64-20130729/sdk//tools/emulator&quot;: erro
7 android 功能引导界面实现
8 Android中如何将原生程序向stdout和stderr的输出重定向到logcat
9 [安卓基础]数据存储之SharedPreferences
10 沉浸式状态栏技术方案及其中的一些坑

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章