«

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 面向对象设计六大基本原则-以Volley为例
3 Android 蓝牙BLE 4.0 属性判断
4 直接利用Android手机破解微信加密数据库EnMicroMsg.db
5 Qt For Android 如何获取手机屏幕大小
6 Android怎么自定义View实现计时文字
7 android PopupWindow显示位置设置
8 Android源码分析onResume方法中获取不到View宽高
9 Android程序 依赖库引用Gson 报java.lang.NoClassDefFoundError: com/google/gson/Gson 解决
10 RadioGroup+Fragment实现底部菜单栏

日历

标签

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

搜索

最新文章

热门文章