Android Drawable简介&CircleImageView简单实现

最新推荐文章于 2024-09-11 00:30:47 发布

ch867179244

最新推荐文章于 2024-09-11 00:30:47 发布

阅读量832

点赞数 1

分类专栏： Android-Drawable 文章标签： CircleView android

本文链接：https://blog.csdn.net/ch867179244/article/details/53522679

版权

Android-Drawable 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.概述
圆形头像在很多app上都有使用,实现方式也有很多种。今天我们就先了解下Android drawable的知识点，最后再实现CircleImageView。
先看效果：
这里写图片描述

结合效果图：依次是CirclrImageView , 彩虹圈是整个布局的背景 (LayerDrawable结合ScaleDrawable实现) ，按钮(StateListDrawable)
HelloWord文本(背景添加了TrasitionDrawable)。

2.Drawable简介
Drawable的分类有很多，比较常用的有BitmapDrawable ,ShapeDrawable ,LayerDrawable,StateListDrawable等，一般由于当背景或者显示ImageView。
接下来简单介绍下这几种Drawable。

2.1 BitmapDrawable
这个就是一张图片，其中有几个常用的属性需要理解下。
属性
antialias：抗锯齿功能, 开启此功能是为了让图片看起来更加平滑，开启后图片清晰度也会有一定幅度降低（幅度较小可以忽略）。

dither：防抖动效果，此功能是为了适配图片像素与设备像素不一致时，保证图片的显示效果。比如：我们设置的图片色彩模式为ARGB_8888,低端设备只支持ARGB_4444或者RGB_565模式时，开启此功能能保证图片较好的显示。

filter：过滤效果,此功能实在图片压缩或者拉伸时，开启可以较好的显示。
BitmapDrawable主要就介绍这三个属性，想了解更全面的可以参考官方api。

2.2 ShapeDrawable
ShapeDrawable 是通过color来构造的图行，通常用于xml中自定义图形图片。
属性
shape： 图形形状，有四种：rectangle oval line ring。这个很好理解。
corners： 角度，这个只能用于图形为rectangle的shape，就是设置矩形四个角的角度的。
gradient： 渐变效果，这个属性比较多
angle 渐变角度 0–90范围 0：左—>右 90：下—>上
centerX 渐变中心点x坐标
centerY 渐变中心点y坐标
startColor，centerColor,endCorlor，渐变起始色中间色结束色
gradientRadius 渐变半径需要配合 type(渐变类别) 为radial一起使用
type 渐变类别，右三种 linear(线性) radial(径向) sweep(扫描)
具体效果可以自行体验下。
solid： 填充色 color属性指定色值
stroke： 描边，画shap的边框
width 边框宽度
color 边框线条颜色
dashWidth 虚线宽度
dashGap 虚线间距
size: shape大小，当shapDrawable作为背景时，这个大小会被拉伸或缩小为view的大小。如：上图,Hello World文本的背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
 <solid
     android:color="#FFFFFF"/>

  <stroke
      android:width="5dp"
      android:color="#00FF00"
      android:dashWidth="15dp"
      android:dashGap="6dp"
      />
</shape>

2.3 LayerDrawable
层次化的drawable集合，通过组合不同的drawable达到一种叠加效果
在xml中通过layer-list标签使用，可以放多个item，每个item里面可以放shape或者其他drawable资源。 注意这一系列的item都会被拉伸成或压缩成view的大小，所以使用时根据想要的效果来设置gravity top left right bottom属性。如：上图，彩虹圈的实现代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    >

  <item
      android:left="120dp"
      android:right="120dp"
      android:top="120dp"
      android:bottom="120dp"
      android:drawable="@drawable/ring1">
  </item>

  <item
      android:left="100dp"
      android:right="100dp"
      android:top="100dp"
      android:bottom="100dp"
      android:drawable="@drawable/ring2">
  </item>
  <item
      android:left="80dp"
      android:right="80dp"
      android:top="80dp"
      android:bottom="80dp"
      android:drawable="@drawable/ring3">
  </item>
  <item
      android:left="60dp"
      android:right="60dp"
      android:top="60dp"
      android:bottom="60dp"
      android:drawable="@drawable/ring4">
  </item>
  <item
      android:left="40dp"
      android:right="40dp"
      android:top="40dp"
      android:bottom="40dp"
      android:drawable="@drawable/ring5">
  </item>
  <item
      android:left="20dp"
      android:right="20dp"
      android:top="20dp"
      android:bottom="20dp"
      android:drawable="@drawable/ring6">
  </item>
  <item
      android:drawable="@drawable/ring7">
  </item>
</layer-list>

2.4 StateListDrawable
这个也是drawable的集合，每个drawable 表示view的一种状态。
在xml中通过selector标签使用，通常给按钮设置点击效果时使用。
如上图的 Hello Button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
   >
  <shape
      android:shape="rectangle"
      >
    <corners
        android:radius="10dp"
        />
    <solid
        android:color="#F09"
        />
  </shape>
</item>

  <item>
    <shape
        android:shape="rectangle"
        >
      <corners
          android:radius="10dp"
          />
      <solid
          android:color="#F129"
          />
    </shape>
  </item>

</selector>

2.5 TransitionDrawable
这个也是drawable集合，用于实现view的淡入淡出的效果。没特殊属性。
如上如点击按钮 hello world文本会startTransition()

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:drawable="@drawable/back"/>
  <item android:drawable="@drawable/back01"/>
  <item android:drawable="@drawable/back02"/>
</transition>

三个back drawable就是色值不一致的虚线圆圈(如：back)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
 <solid
     android:color="#FFFFFF"/>

  <stroke
      android:width="5dp"
      android:color="#00FF00"
      android:dashWidth="15dp"
      android:dashGap="6dp"
      />
</shape>

代码中开启

TransitionDrawable drawable = (TransitionDrawable) tv.getBackground();
drawable.startTransition(1500); //参数：完成整个效果的时间

2.6 ScaleDrawable
可缩放的drawable
属性
scaleGravity： 相当于shape的gravity
scaleWidth： 宽度缩放比例 (百分制)
scaleHeight： 高度缩放比例 (百分制)

缩放等级 0–10000， 0表示完全缩放也就是不可见了, 10000表示不缩放
如上图,对彩虹圈进行缩放比例原图* 90%

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/layer"
    android:scaleHeight="10%"
    android:scaleWidth="10%"
    android:scaleGravity="center">
</scale>
代码中使用
ScaleDrawable scaleDrawable = (ScaleDrawable) layout.getBackground();
scaleDrawable.setLevel(1);

xml中使用
android:background="@drawable/scale"

最终效果其实是近似60%，准确值应该是90% * 99.99%。

其他还有很多drawable类型，由于不常使用，就不介绍了。

掌握了以上系统提供的drawable，已经可以满足日常基本需求了，但是想要个性化，还得自定义。接下来快速实现简单的CircleImageVie.

CircleImageVIew 实现：
思路
1.自定义view 集成Imageview，重写ondraw方法
2.根据大小缩放图片, 依次画圆形和图片(重点：设置画笔属性使图片结合起来)
关键代码:
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
当然这个不是写死的，如果先画圆形再画图形就用SRC_IN ,意思就是取2层的交集部分，并且显示上层，也就是后画的。反之就用DST_IN, 意思是取2层交集，显示下层。实现代码如下

public class CirclePic extends ImageView {

  private int defaultRadiu = 100;//默认圆形图片

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

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

  public CirclePic(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(attrs);
  }

  private void init(AttributeSet attrs) {
    TypedArray a = getResources().obtainAttributes(attrs,R.styleable.CirclePic);
    defaultRadiu = (int) a.getDimension(R.styleable.CirclePic_radiu,defaultRadiu);
    a.recycle();
  }

  @Override protected void onDraw(Canvas canvas) {
    Drawable drawable = getDrawable();
    if (drawable != null) {
      if (drawable instanceof BitmapDrawable && drawable.getIntrinsicWidth() > 0
          && drawable.getIntrinsicHeight() > 0) {
        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
        Bitmap circleBitmap = getCircleBitamp(bitmap);

        canvas.drawBitmap(circleBitmap, 0, 0, null);
      }
    } else {
      super.onDraw(canvas);
    }
  }

  /**
   * 生成圆形bitmap
   */
  private Bitmap getCircleBitamp(Bitmap bitmap) {

    Bitmap circleBitmap = null;
    if (bitmap.getWidth() != defaultRadiu || bitmap.getHeight() != defaultRadiu) {
      circleBitmap = Bitmap.createScaledBitmap(bitmap, defaultRadiu, defaultRadiu, false);
    } else {
      circleBitmap = bitmap;
    }

    Bitmap output = Bitmap.createBitmap(circleBitmap.getWidth(), circleBitmap.getHeight(),
        Bitmap.Config.ARGB_8888);

    Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());

    Canvas canvas = new Canvas(output);

    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setDither(true);

    canvas.drawCircle(circleBitmap.getWidth() / 2, circleBitmap.getHeight() / 2,
        circleBitmap.getWidth() / 2, paint);
    //取2层交集部分,只显示上层
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

    canvas.drawBitmap(circleBitmap, rect, rect, paint);

    return output;
  }
}

利用这个参数大家可以发散脑洞组合出各种图形，下面给出PorterDuffXfermode所有参数说明：
1.PorterDuff.Mode.CLEAR ：所绘制不会提交到画布上。
2.PorterDuff.Mode.SRC ：显示上层绘制图片
3.PorterDuff.Mode.DST ：显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER ：正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER ：上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN ：取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN ：取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT ：取上层绘制非交集部分。
9.PorterDuff.Mode.DST_OUT ：取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP ：取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP ：取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR ：去除两图层交集部分
13.PorterDuff.Mode.DARKEN ：取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN ：取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY ：取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN ：取两图层全部区域，交集部分变为透明色

最后看下对比效果图：
这里写图片描述