Android仿微信、QQ附近好友雷达扫描效果_Android

1.概述

　　最近一直到在带实习生，因为人比较多，所以很长一段时间没有更新博客了，今天更新一篇雷达扫描附近好友效果，以后尽量每周更新一篇，先看一下效果：

2．实现　

1、效果分析

效果分为两个部分，一个是上半部分的自定义RadarView，还有就是下半部分的ViewPager，至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍，这里主要实现扫描效果部分。

2、扫描效果实现

2.1自定义RadarView在onDraw()方法中画六个圆圈，至于圆圈的半径是多少我们需要通过onMeasure(int widthMeasureSpec, int heightMeasureSpec)测量方法获取控件的宽高来确定圆的半径，每个圆的半径是宽度的1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f，这只是自己测试出来感觉比较舒适的效果，下面请看代码：

//每个圆圈所占的比例
private static float[] circleProportion = {1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f};
private Paint mPaintCircle;//画圆需要用到的paint

public class RadarView extends View {
 public RadarView(Context context) {
 this(context, null);
 }

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

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

 private void init() {
 mPaintCircle = new Paint();
 mPaintCircle.setColor(Color.WHITE);
 mPaintCircle.setAntiAlias(true);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 // 获取控件的宽高
 setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(widthMeasureSpec));
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();
 mWidth = mHeight = Math.min(mWidth, mHeight);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 // 绘制六个白色圆圈
 drawCircle(canvas);
 }

 /**
 * 绘制圆线圈
 *
 * @param canvas
 */
 private void drawCircle(Canvas canvas) {
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[1], mPaintLine); // 绘制最小圆
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[1], mPaintLine); // 绘制小圆
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[2], mPaintLine); // 绘制中圆
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[3], mPaintLine); // 绘制中大圆
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[4], mPaintLine); // 绘制大圆
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[5], mPaintLine); // 绘制大大圆
 }
}

2.2下面需要去画中间的用户图像，可以运行看看中间的六个圆圈有没有达到效果，这里就不看了直接在onDraw()方法中画中间图像：

 private Bitmap centerBitmap;//最中间icon

 private void init(){
 // 通过bitmap工厂区获取用户图像的bitmap
 centerBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.circle_photo);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 drawCenterIcon(canvas);
 }

 /**
 * 绘制最中间的图标
 *
 * @param canvas
 */
 private void drawCenterIcon(Canvas canvas) {
 int iconWidth = mWidth * circleProportion[0];
 canvas.drawBitmap(centerBitmap, 0,0,iconWidth ,iconWidth , null);
 }

2.3最后只需要实现这个扫描的效果这个控件基本就完成了，第一需要开启线程不断调用invalidate()去更新onDraw()方法，第二需要熟悉扫描渲染SweepGradient这个类，如果这两个都没问题那么大功告成：

private Paint mPaintScan;//画扫描需要用到的paint
private Matrix matrix = new Matrix();//旋转需要的矩阵
private int mRoteDegree;//扫描旋转的角度
private Shader scanShader;//扫描渲染shader

public Runnable run = new Runnable() {
 @Override
 public void run() {
  mRoteDegree +=2;
  mRoteMatrix.postRotate(mRoteDegree,cx,cy);
  invalidate();
  postDelayed(run,60);
 }
 };

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 //设置扫描渲染的shader
 scanShader = new SweepGradient(mWidth / 2, mHeight / 2,
  new int[]{Color.TRANSPARENT, Color.parseColor("#84B5CA")}, null);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 drawScan(canvas);
 }

 /**
 * 绘制扫描
 *
 * @param canvas
 */
 private void drawScan(Canvas canvas) {
 canvas.save();
 mPaintScan.setShader(scanShader);
 canvas.concat(matrix);
 canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * circleProportion[4], mPaintScan);
 canvas.restore();
 }

2.4.到这里我们来看一下扫描RadarView的效果

3. 实现添加数据效果RadarViewGroup,我们的图像附近点需要加入ViewGroup这里又需要自定义了，这里简单说一下自定ViewGroup：
1）.onMeasure()测量方法这里就不说了
2）.只要搞清楚onLayout()方法是干嘛的就Ok,ViewGroup里面的子View都显示在什么位置就是写在这个方法里面的，换句话说有的隔得近有的隔得远都是由 child.layout(int l, int t, int r, int b)决定的，下面我们看一下代码：

 public class RadarViewGroup extends ViewGroup implements RadarView.IScanningListener {
 private int mWidth, mHeight;//viewgroup的宽高
 private SparseArray<Float> scanAngleList = new SparseArray<>();//记录展示的item所在的扫描位置角度
 private SparseArray<Info> mDatas;//数据源
 private int dataLength;//数据源长度
 private int minItemPosition;//最小距离的item所在数据源中的位置
 private CircleView currentShowChild;//当前展示的item
 private CircleView minShowChild;//最小距离的item
 private IRadarClickListener iRadarClickListener;//雷达图中点击监听CircleView小圆点回调接口

 public void setiRadarClickListener(IRadarClickListener iRadarClickListener) {
 this.iRadarClickListener = iRadarClickListener;
 }

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

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

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

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 setMeasuredDimension(measureSize(widthMeasureSpec), measureSize(heightMeasureSpec));
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();
 mWidth = mHeight = Math.min(mWidth, mHeight);
 //测量每个children
 measureChildren(widthMeasureSpec, heightMeasureSpec);
 for (int i = 0; i < getChildCount(); i++) {
  View child = getChildAt(i);
  if (child.getId() == R.id.id_scan_circle) {
  //为雷达扫描图设置需要的属性
  ((RadarView) child).setScanningListener(this);
  //考虑到数据没有添加前扫描图在扫描，但是不会开始为CircleView布局
  if (mDatas != null && mDatas.size() > 0) {
   ((RadarView) child).setMaxScanItemCount(mDatas.size());
   ((RadarView) child).startScan();
  }
  continue;
  }
 }
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int childCount = getChildCount();
 //首先放置雷达扫描图
 View view = findViewById(R.id.id_scan_circle);
 if (view != null) {
  view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
 }
 //放置雷达图中需要展示的item圆点
 for (int i = 0; i < childCount; i++) {
  final int j = i;
  final View child = getChildAt(i);
  if (child.getId() == R.id.id_scan_circle) {
  //如果不是Circleview跳过
  continue;
  }
  //设置CircleView小圆点的坐标信息
  //坐标 = 旋转角度 * 半径 * 根据远近距离的不同计算得到的应该占的半径比例
  ((CircleView) child).setDisX((float) Math.cos(Math.toRadians(scanAngleList.get(i - 1) - 5))
   * ((CircleView) child).getProportion() * mWidth / 2);
  ((CircleView) child).setDisY((float) Math.sin(Math.toRadians(scanAngleList.get(i - 1) - 5))
   * ((CircleView) child).getProportion() * mWidth / 2);
  //如果扫描角度记录SparseArray中的对应的item的值为0，
  // 说明还没有扫描到该item，跳过对该item的layout
  //（scanAngleList设置数据时全部设置的value=0，
  // 当onScanning时，value设置的值始终不会0，具体可以看onScanning中的实现）
  if (scanAngleList.get(i - 1) == 0) {
  continue;
  }
  //放置Circle小圆点
  child.layout((int) ((CircleView) child).getDisX() + mWidth / 2, (int) ((CircleView) child).getDisY() + mHeight / 2,
   (int) ((CircleView) child).getDisX() + child.getMeasuredWidth() + mWidth / 2,
   (int) ((CircleView) child).getDisY() + child.getMeasuredHeight() + mHeight / 2);
  //设置点击事件
  child.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
   resetAnim(currentShowChild);
   currentShowChild = (CircleView) child;
   //因为雷达图是childAt(0),所以这里需要作-1才是正确的Circle
   startAnim(currentShowChild, j - 1);
   if (iRadarClickListener != null) {
   iRadarClickListener.onRadarItemClick(j - 1);

   }
  }
  });
 }

 }

 private int measureSize(int measureSpec) {
 int result = 0;
 int specMode = MeasureSpec.getMode(measureSpec);
 int specSize = MeasureSpec.getSize(measureSpec);
 if (specMode == MeasureSpec.EXACTLY) {
  result = specSize;
 } else {
  result = 300;
  if (specMode == MeasureSpec.AT_MOST) {
  result = Math.min(result, specSize);
  }
 }
 return result;

 }

 /**
 * 设置数据
 *
 * @param mDatas
 */
 public void setDatas(SparseArray<Info> mDatas) {
 this.mDatas = mDatas;
 dataLength = mDatas.size();
 float min = Float.MAX_VALUE;
 float max = Float.MIN_VALUE;
 //找到距离的最大值，最小值对应的minItemPosition
 for (int j = 0; j < dataLength; j++) {
  Info item = mDatas.get(j);
  if (item.getDistance() < min) {
  min = item.getDistance();
  minItemPosition = j;
  }
  if (item.getDistance() > max) {
  max = item.getDistance();
  }
  scanAngleList.put(j, 0f);
 }
 //根据数据源信息动态添加CircleView
 for (int i = 0; i < dataLength; i++) {
  CircleView circleView = new CircleView(getContext());
  if (mDatas.get(i).getSex()) {
  circleView.setPaintColor(getResources().getColor(R.color.bg_color_pink));
  } else {
  circleView.setPaintColor(getResources().getColor(R.color.bg_color_blue));
  }
  //根据远近距离的不同计算得到的应该占的半径比例 0.312-0.832
  circleView.setProportion((mDatas.get(i).getDistance() / max + 0.6f) * 0.52f);
  if (minItemPosition == i) {
  minShowChild = circleView;
  }
  addView(circleView);
 }
 }

 /**
 * 雷达图没有扫描完毕时回调
 *
 * @param position
 * @param scanAngle
 */
 @Override
 public void onScanning(int position, float scanAngle) {
 if (scanAngle == 0) {
  scanAngleList.put(position, 1f);
 } else {
  scanAngleList.put(position, scanAngle);
 }
 requestLayout();
 }

 /**
 * 雷达图扫描完毕时回调
 */
 @Override
 public void onScanSuccess() {
 LogUtil.m("完成回调");
 resetAnim(currentShowChild);
 currentShowChild = minShowChild;
 startAnim(currentShowChild, minItemPosition);
 }

 /**
 * 恢复CircleView小圆点原大小
 *
 * @param object
 */
 private void resetAnim(CircleView object) {
 if (object != null) {
  object.clearPortaitIcon();
  ObjectAnimator.ofFloat(object, "scaleX", 1f).setDuration(300).start();
  ObjectAnimator.ofFloat(object, "scaleY", 1f).setDuration(300).start();
 }

 }

 /**
 * 放大CircleView小圆点大小
 *
 * @param object
 * @param position
 */
 private void startAnim(CircleView object, int position) {
 if (object != null) {
  object.setPortraitIcon(mDatas.get(position).getPortraitId());
  ObjectAnimator.ofFloat(object, "scaleX", 2f).setDuration(300).start();
  ObjectAnimator.ofFloat(object, "scaleY", 2f).setDuration(300).start();
 }
 }

 /**
 * 雷达图中点击监听CircleView小圆点回调接口
 */
 public interface IRadarClickListener {
 void onRadarItemClick(int position);
 }

 /**
 * 根据position，放大指定的CircleView小圆点
 *
 * @param position
 */
 public void setCurrentShowItem(int position) {
 CircleView child = (CircleView) getChildAt(position + 1);
 resetAnim(currentShowChild);
 currentShowChild = child;
 startAnim(currentShowChild, position);
 }
}

源码下载：http://xiazai.jb51.net/201611/yuanma/AndroidRadarScan(jb51.net).rar

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索Android雷达扫描效
qq雷达扫描附近的好友、qq雷达扫描附近的人、qq雷达10km内的好友、手机qq雷达扫描、qq 雷达 附近的好友，以便于您获取更多的相关知识。

时间： 2024-11-05 14:49:06

Android仿微信、QQ附近好友雷达扫描效果_Android的相关文章

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

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

Android仿微信图片点击全屏效果_Android

废话不多说先看下效果 先是微信的 再是模仿的 先说下实现原理再一步步分析 这里总共有2个Activity一个就是主页一个就是显示我们图片效果的页面参数通过Intent传送素材内容均来自网络(感谢聪明的蘑菇) 图片都是Glide异步下的下的下的重要的事情说三次然后就是用动画做放大操作然后显示出来了并没有做下载原图的实现反正也是一样 下载下来Set上去而且动画都不需要更简便. OK我们来看分析下 obj目录下分别创建了2个对象一个用来使用来处理显示页面的图片尺寸信息以及位置信息还有一个是用来附带UR

Android仿微信发朋友圈浏览图片效果_Android

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/

Android仿微信图片点击浏览的效果_Android

本篇我们来做一个类似于微信的图片点击浏览的效果,点击小图图片后会放大至全屏显示,且中间有一个2D平滑过渡的效果. 思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 其次,一般缩略界面的ImageView的是正方形的,并且是CENTER_CROP缩放属性的.CENTER_CROP属性会

Android仿微信底部实现Tab选项卡切换效果_Android

在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单.  直接点击或者是滑动界面,都可以转到相应的页面. 效果图:  原理是用了三个按钮和Vi

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

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

Android仿微信图片点击全屏效果

废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

Android仿微信发朋友圈浏览图片效果

先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路 1.首先我们要获取数据源,数据源就是我们的每条说说(包括姓名.标题.图片数组) 2.自定义适配器(ListView嵌套着GridView) 3.图片点击浏览图片(Fragment+ViewPager) 具体实现 1.初始化数据源,设置适配器,看一下代码: public class MyActivity extends Activity { /*图片显示列表*/ private ListView listView; /*图片URL数组*/

Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果_Android

去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福--那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) --我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读