微信QQ附近好友雷达扫描

来源：互联网发布：open vswich 知乎编辑：程序博客网时间：2024/04/28 15:48

1.概述

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

2．实现　

　　１．效果分析
　　效果分为两个部分，一个是上半部分的自定义RadarView，还有就是下半部分的ViewPager，至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍,也可以去慕课网看看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，这只是自己测试出来感觉比较舒适的效果，下面请看代码：

//每个圆圈所占的比例private static float[] circleProportion = {1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f};private Paint mPaintCircle;//画圆需要用到的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：
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://download.csdn.net/detail/z240336124/9590748

0 1