Android自定义View模仿QQ讨论组头像效果

首先来看看我们模仿的效果图,相信对于使用过QQ的人来说都不陌生,效果图如下:

在以前的一个项目中,需要实现类似QQ讨论组头像的控件,只是头像数量和布局有一小点不一样:一是最头像数是4个,二是头像数是2个时的布局是横着排的。其实当时GitHub上就有类似的开源控件,只是那个控件在每一次绘制View的时候都会新创建一些Bitmap对象,这肯定是不可取的,而且那个控件头像输入的是Bitmap对象,不满足需求。所以只能自己实现一个了。实现的时候也没有过多的考虑,传入头像Drawable对象,根据数量排列显示就算完成了,而且传入的图像还必需是圆形的,限制很大,根本不具备通用性。因此要实现和QQ讨论组头像一样的又具备一定通用性的控件,还得重新设计、实现。

下面就让我们开始实现吧。

布局

首先需要解决的是头像的布局,在头像数量分别为1至5的情况下,定义头像的布局排列方式,并计算出图像的大小和位置。先把布局图画出来再说:

布局

其中黑色正方形就是View的显示区,蓝色圆形就是头像了。已知的条件是View大小,姑且设为 D 吧,还有头像的数量 n ,求蓝色圆的半径 r 及圆心位置。这不就是一道几何题吗?翻开初中的数学课本——勾三股四弦五……好像不够用啊……

辅助线画了又画,头皮挠了又挠,α,θ,OMG......sin,cos,sh*t......终于算出了 r 与 D 和 n 的关系:

公式1

其实 n=3 的时候半径和 n=4 的时候是一样的,但是考虑到 n=3,5 时在Y轴上还有一个偏移量 dy ,而且 r 和 dy 在 n=3,5 时是有通式的,所以就合在一起了。求偏移量 dy 的公式:

公式2

式中 R 就是布局图中红色大圆的半径。

有了公式,那么代码就好写了,计算每个头像的大小和位置的代码如下:

// 头像信息类,记录大小、位置等信息
private static class DrawableInfo {
 int mId = View.NO_ID;
 Drawable mDrawable;
 // 中心点位置
 float mCenterX;
 float mCenterY;
 // 头像上缺口弧所在圆上的圆心位置,其实就是下一个相邻头像的中心点
 float mGapCenterX;
 float mGapCenterY;
 boolean mHasGap;
 // 头像边界
 final RectF mBounds = new RectF();
 // 圆形蒙板路径,把头像弄成圆形
 final Path mMaskPath = new Path();
}
private void layoutDrawables() {
 mSteinerCircleRadius = 0;
 mOffsetY = 0;

 int width = getWidth() - getPaddingLeft() - getPaddingRight();
 int height = getHeight() - getPaddingTop() - getPaddingBottom();

 mContentSize = Math.min(width, height);
 final List<DrawableInfo> drawables = mDrawables;
 final int N = drawables.size();
 float center = mContentSize * .5f;
 if (mContentSize > 0 && N > 0) {
 // 图像圆的半径。
 final float r;
 if (N == 1) {
  r = mContentSize * .5f;
 } else if (N == 2) {
  r = (float) (mContentSize / (2 + 2 * Math.sin(Math.PI / 4)));
 } else if (N == 4) {
  r = mContentSize / 4.f;
 } else {
  r = (float) (mContentSize / (2 * (2 * Math.sin(((N - 2) * Math.PI) / (2 * N)) + 1)));
  final double sinN = Math.sin(Math.PI / N);
  // 以所有图像圆为内切圆的圆的半径
  final float R = (float) (r * ((sinN + 1) / sinN));
  mOffsetY = (float) ((mContentSize - R - r * (1 + 1 / Math.tan(Math.PI / N))) / 2f);
 }

 // 初始化第一个头像的中心位置
 final float startX, startY;
 if (N % 2 == 0) {
  startX = startY = r;
 } else {
  startX = center;
  startY = r;
 }

 // 变换矩阵
 final Matrix matrix = mLayoutMatrix;
 // 坐标点临时数组
 final float[] pointsTemp = this.mPointsTemp;

 matrix.reset();

 for (int i = 0; i < drawables.size(); i++) {
  DrawableInfo drawable = drawables.get(i);
  drawable.reset();

  drawable.mHasGap = i > 0;
  // 缺口弧的中心
  if (drawable.mHasGap) {
  drawable.mGapCenterX = pointsTemp[0];
  drawable.mGapCenterY = pointsTemp[1];
  }

  pointsTemp[0] = startX;
  pointsTemp[1] = startY;
  if (i > 0) {
  // 以上一个圆的圆心旋转计算得出当前圆的圆位置
  matrix.postRotate(360.f / N, center, center + mOffsetY);
  matrix.mapPoints(pointsTemp);
  }

  // 取出中心点位置
  drawable.mCenterX = pointsTemp[0];
  drawable.mCenterY = pointsTemp[1];

  // 设置边界
  drawable.mBounds.inset(-r, -r);
  drawable.mBounds.offset(drawable.mCenterX, drawable.mCenterY);

  // 设置“蒙板”路径
  drawable.mMaskPath.addCircle(drawable.mCenterX, drawable.mCenterY, r, Path.Direction.CW);
  drawable.mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);
 }

 // 设置第一个头像的缺口,头像数量少于3个的时候没有
 if (N > 2) {
  DrawableInfo first = drawables.get(0);
  DrawableInfo last = drawables.get(N - 1);
  first.mHasGap = true;
  first.mGapCenterX = last.mCenterX;
  first.mGapCenterY = last.mCenterY;
 }

 mSteinerCircleRadius = r;
 }

 invalidate();
}

绘制

计算好每个头像的大小和位置后,就可以把它们绘制出来了。但在此之前,还得先解决一个问题——如何使头像图像变圆?因为输入Drawable对象并没有任何限制。

在上面的 layoutDrawables 方法中有这样两行代码:

drawable.mMaskPath.addCircle(drawable.mCenterX, drawable.mCenterY, r, Path.Direction.CW);
drawable.mMaskPath.setFillType(Path.FillType.INVERSE_WINDING);

其中第一行是添加一个圆形路径,这个路径就是布局图中蓝色圆的路径,而第二行是设置路径的填充模式,默认的填充模式是填充路径内部,而 INVERSE_WINDING 模式是填充路径外部,再配合 Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)) 就可以绘制出圆形的图像了。头像上的缺口同理。(ps:关于Path.FillTypePorterDuff.Mode网上介绍挺多的,这里就不详细介绍了)

下面来看一下 onDraw 方法:

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 ...
 canvas.translate(0, mOffsetY);

 final Paint paint = mPaint;
 final float gapRadius = mSteinerCircleRadius * (mGap + 1f);
 for (int i = 0; i < drawables.size(); i++) {
  DrawableInfo drawable = drawables.get(i);
  RectF bounds = drawable.mBounds;
  final int savedLayer = canvas.saveLayer(0, 0, mContentSize, mContentSize, null, Canvas.ALL_SAVE_FLAG);

  // 设置Drawable的边界
  drawable.mDrawable.setBounds((int) bounds.left, (int) bounds.top,
    Math.round(bounds.right), Math.round(bounds.bottom));
  // 绘制Drawable
  drawable.mDrawable.draw(canvas);

  // 绘制“蒙板”路径,将Drawable绘制的图像“剪”成圆形
  canvas.drawPath(drawable.mMaskPath, paint);
  // “剪”出弧形的缺口
  if (drawable.mHasGap && mGap > 0f) {
   canvas.drawCircle(drawable.mGapCenterX, drawable.mGapCenterY, gapRadius, paint);
  }

  canvas.restoreToCount(savedLayer);
 }
}

Drawable支持

既然输入的是 Drawable 对象,那就不能像 Bitmap 那样绘制出来就完事了的,除非你不打算支持Drawable的一些功能,如自更新、动画、状态等。

1、Drawable自更新和动画Drawable

Drawable的自更新和动画Drawable(如 AnimationDrawable , AnimatedVectorDrawable 等)都是依赖于 Drawable.Callback 接口。其定义如下:

public interface Callback {
 /**
  * 当drawable需要重新绘制时调用。此时的view应该使其自身失效(至少drawable展示部分失效)
  * @param who 要求重新绘制的drawable
  */
 void invalidateDrawable(@NonNull Drawable who);

 /**
  * drawable可以通过调用该方法来安排动画的下一帧。
  * @param who 要预定的drawable
  * @param what 要执行的动作
  * @param when 执行的时间(以毫秒为单位),基于android.os.SystemClock.uptimeMillis()
  */
 void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when);

 /**
  * drawable可以通过调用该方法来取消先前通过scheduleDrawable(Drawable, Runnable, long)调度的动作。
  * @param who 要取消预定的drawable
  * @param what 要取消执行的动作
  */
 void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what);
}

所以要支持Drawable自更新和动画Drawable,得通过 Drawable.setCallback(Drawable.Callback) 方法设置 Drawable.Callback 接口的实现对象才行。好在 android.view.View 已经实现了这个接口,在设置Drawable的时候调用一下 Drawable.setCallback(MyView.this) 即可。但需要注意的是, android.view.View 实现 Drawable.Callback 接口的时候都调用了 View.verifyDrawable(Drawable) 以验证需要显示更新的Drawable是不是自己的Drawable,且其实现只是验证了View自己的背景和前景:

protected boolean verifyDrawable(@NonNull Drawable who) {
 // ...
 return who == mBackground || (mForegroundInfo != null && mForegroundInfo.mDrawable == who);
}

所以只是设置了Callback的话,当Drawable内容改变需要重新绘制时View还是不会更新重绘的,动画需要计划下一帧或者取消一个计划时也不会成功。因此我们也得验证自己的Drawable:

private boolean hasSameDrawable(Drawable drawable) {
 for (DrawableInfo d : mDrawables) {
  if (d.mDrawable == drawable) {
   return true;
  }
 }
 return false;
}

@Override
protected boolean verifyDrawable(@NonNull Drawable drawable) {
 return hasSameDrawable(drawable) || super.verifyDrawable(drawable);
}

此时,Drawable自更新的支持和动画Drawable的支持基本上是完成了。当然,View不可见和 onDetachedFromWindow() 时应该是要暂停或者停止动画的,这些在这里就不多说了,可以去看源码(在文章结尾处有链接),主要是调用 Drawable.setVisible(boolean, boolean) 方法。

下面展示一下效果:


AnimationDrawable

2、状态

一些Drawable是有状态的,它能根据View的状态(按下,选中,激活等)改变其显示内容,如 StateListDrawable 。要支持View状态的话,其实只要扩展 View.drawableStateChanged() View.jumpDrawablesToCurrentState() 方法,当View的状态改变的时候更新Drawable的状态就行了:

// 状态改变时被调用
@Override
protected void drawableStateChanged() {
 super.drawableStateChanged();
 boolean invalidate = false;
 for (DrawableInfo drawable : mDrawables) {
  Drawable d = drawable.mDrawable;
  // 判断Drawable是否支持状态并更新状态
  if (d.isStateful() && d.setState(getDrawableState())) {
   invalidate = true;
  }
 }
 if (invalidate) {
  invalidate();
 }
}

// 这个方法主要针对状态改变时有过渡动画的Drawable
@Override
public void jumpDrawablesToCurrentState() {
 super.jumpDrawablesToCurrentState();
 for (DrawableInfo drawable : mDrawables) {
  drawable.mDrawable.jumpToCurrentState();
 }
}

效果:


状态

好了,到这里控件算是完成了。

其他效果展示:

效果1

效果2

项目主页:https://github.com/YiiGuxing/CompositionAvatar

本地下载:http://xiazai.jb51.net/201704/yuanma/CompositionAvatar-master(jb51.net).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Android仿微信QQ设置图形头像裁剪功能

    最近在做毕业设计,想有一个功能和QQ一样可以裁剪头像并设置圆形头像,额,这是设计狮的一种潮流. 而纵观现在主流的APP,只要有用户系统这个功能,这个需求一般都是在(bu)劫(de)难(bu)逃(xue)! 图片裁剪实现方式有两种,一种是利用系统自带的裁剪工具,一种是使用开源工具Cropper.本节就为大家带来如何使用系统自带的裁剪工具进行图片裁剪~ 还是先来个简单的运行图. 额,简单说下,我待会会把代码写成小demo分享给大家,在文章末尾会附上github链接,需要的可以自行下载~ 下面来简单分

  • Android仿微信群聊头像

    工作中需要实现仿钉钉群头像的一个功能,就是个人的头像拼到一起显示,看了一下市场上的APP好像微信的群聊头像是组合的,QQ的头像不是,别的好像也没有了. 给大家分享一下怎么实现的吧.首先我们先看一下效果图: 好了,下面说一下具体怎么实现的: 实现思路 1.首先获取Bitmap图片(本地.网络) 2.创建一个指定大小的缩略图 3.组合Bitmap图片 很简单,本地图片需要我们从本地读取,如果是网络图片我们也可以根据URL来获取bitmap进行组合 具体实现过程 1.布局文件: <LinearLayo

  • Android自定义控件仿QQ编辑和选取圆形头像

    android大家都有很多需要用户上传头像的需求,有的是选方形,有的是圆角矩形,有的是圆形. 首先我们要做一个处理图片的自定义控件,把传入的图片,经过用户选择区域,处理成一定的形状. 有的app是通过在图片上画一个矩形区域表示选中的内容,有的则是通过双指放大缩小,拖动图片来选取图片.圆形头像,还是改变图片比较好 圆形区域可调节大小. 这个自定义View的图像部分分为三个,背景图片,半透明蒙层,和亮色区域--还是直接贴代码得了 package com.example.jjj.widget; imp

  • Android实现本地上传图片并设置为圆形头像

    先从本地把图片上传到服务器,然后根据URL把头像处理成圆形头像. 因为上传图片用到bmob的平台,所以要到bmob(http://www.bmob.cn)申请密钥. 效果图: 核心代码: 复制代码 代码如下: public class MainActivity extends Activity {         private ImageView iv;         private String appKey="";                //填写你的Applicatio

  • Android仿QQ圆形头像个性名片

    先看看效果图: 中间的圆形头像和光环波形讲解请看:http://www.jb51.net/article/96508.htm 周围的气泡布局,因为布局RatioLayout是继承自ViewGroup,所以布局layout就可以根据自己的需求来布局其子view,view.layout(int l,int t,int r,int b);用于布局子view在父ViewGroup中的位置(相对于父容器),所以在RatioLayout中计算所有子view的left,top,right,bottom.那么头

  • Android 仿QQ头像自定义截取功能

    看了Android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识. 先看看效果: 思路分析: 这个效果可以用两个View来完成,上层View是一个遮盖物,绘制半透明的颜色,中间挖了一个圆:下层的View用来显示图片,具备移动和缩放的功能,并且能截取某区域内的图片. 涉及到的知识点: 1.Matrix,图片的移动和缩放 2.Paint的setXfermode方法 3.图片放大移动后,截取一部分 编码实现: 自定义三个View: 1.下层View:ClipP

  • Android自定义View模仿QQ讨论组头像效果

    首先来看看我们模仿的效果图,相信对于使用过QQ的人来说都不陌生,效果图如下: 在以前的一个项目中,需要实现类似QQ讨论组头像的控件,只是头像数量和布局有一小点不一样:一是最头像数是4个,二是头像数是2个时的布局是横着排的.其实当时GitHub上就有类似的开源控件,只是那个控件在每一次绘制View的时候都会新创建一些Bitmap对象,这肯定是不可取的,而且那个控件头像输入的是Bitmap对象,不满足需求.所以只能自己实现一个了.实现的时候也没有过多的考虑,传入头像Drawable对象,根据数量排列

  • Android自定义View模仿即刻点赞数字切换效果实例

    目录 即刻点赞展示 自己如何实现这种数字切换呢? 效果展示 源码 总结 即刻点赞展示 点赞的数字增加和减少并不是整个替换,而是差异化替换.再加上动画效果就看的很舒服. 自己如何实现这种数字切换呢? 下面用一张图来展示我的思路: 现在只需要根据这张图,写出对应的动画即可. 分为2种场景: 数字+1: 差异化的数字从3号区域由渐变动画(透明度 0- 255) + 偏移动画 (3号区域绘制文字的基线,2号区域绘制文字的基线),将数字移动到2号位置处 差异化的数字从2号区域由渐变动画(透明度 255-

  • Android仿QQ讨论组头像效果

    本文实例为大家分享了Android仿QQ讨论组头像展示的具体代码,供大家参考,具体内容如下 一.效果图 二.实现 基本实现过程: 1.将原图片读取为bitmap 2.在Canvas画布上计算出图片位置,并绘制新的图片. (ps:计算位置对我来说是难点,花了好长时间): 三.源码 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/

  • Android自定义View 仿QQ侧滑菜单的实现代码

    先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的错位感,代码很简单: import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.vi

  • Android自定义View实现QQ消息气泡

    本文实例为大家分享了Android自定义View实现QQ消息气泡的具体代码,供大家参考,具体内容如下 效果图: 原理: 控件源码: public class DragView extends View {     private int defaultZoomSize = 8;     //初始化圆的大小     private int initRadius;     //圆1的圆心位置     private PointF center1;     private PointF center2

  • Android自定义View实现loading动画加载效果

    项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. 先自定义一个View,继承自LinearLayout,在Layout中,添加布局控件 /** * Created by xiedong on 2017/3/7. */ public class Loading_view extends LinearLayout { private Context m

  • Android自定义View实现简单的圆形Progress效果

    先给大家展示下效果图,如果感觉不错,请参考实现思路: 我们要实现一个自定义的再一个圆形中绘制一个弧形的自定义View,思路是这样的: 先要创建一个类ProgressView,继承自View类,然后重写其中的两个构造方法,一个是一个参数的,一个是两个参数的,因为我们要在xml文件中使用该自定义控件,所以必须要定义这个两个参数的构造函数.创建完了这个类后,我们先不去管它,先考虑我们实现的这个自定义View,我们想让它的哪些部分可以由使用者自己指定,比如说这个Demo中我们让他的外面圆的外边框颜色和宽

  • Android 自定义view实现进度条加载效果实例代码

    这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

  • Android 自定义View之边缘凹凸的优惠券效果的开发过程

    本篇文章讲的是自定义View之边缘凹凸的优惠券效果,之前有见过很多优惠券的效果都是使用了边缘凹凸的样式.和往常一样,主要总结一下在自定义View的开发过程中需要注意的一些地方. 按照惯例,我们先来看看效果图 一.写代码之前,我们先弄清楚view的启动过程: 之所以想要弄清楚这个问题是因为代码里面用到了onSizeChanged()方法,一开始我有点犹豫onSizeChanged是在什么时候启动的呢,所以看看View的启动流程吧 package per.lijuan.coupondisplayvi

随机推荐