微信QQ附近好友雷达扫描效果的实现

开发者技术前线

发布于 2020-11-23 15:24:02

1.9K0

发布于 2020-11-23 15:24:02

文章被收录于专栏：开发者技术前线

本介绍主流的微信雷达效果在Android的实现方式，目前探探，陌陌交友软件都有此功能，接下来就看看姿势吧！

一、概说

这一期的效果，我记得我是仿照别人的方式实现的，具体记不太清了（早几年的事了），附具体效果图：

二实现

１．效果分析

效果分为两个部分，一个是上半部分的自定义 RadarView，还有就是下半部分的 ViewPager，至于怎么做到缩放和背景虚化的效果大家可以去看看 LazyViewPager 这里不详细介绍,也可以去慕课网 (hyman) 看看http://www.imooc.com/view/226，这里主要实现扫描效果部分。

２．扫描效果实现

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

paintpublic 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;//画扫描需要用到的
paintprivate Matrix matrix = new Matrix();
//旋转需要的矩阵
private int mRoteDegree;//扫描旋转的角度
private Shader scanShader;//扫描渲染shaderpublic 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 ：

onMeasure() 测量方法这里就不说了，具体请看这里自定义View简介 - onMeasure,onDraw,自定义属性
搞清楚 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;

    }    
 
    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);
        }
    }    
    
    @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);
    }   
    
    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();
        }

    }    
   
    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);
    }
}

作者：红橙Darren 链接：http://www.jianshu.com/p/8a5c55a80bc7

精彩推荐

坚持了很久，我毅然的选择逃离北京！

技术 - 资讯 - 感悟

END

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2017-07-17，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法