1.概述
最近一直到在带实习生,因为人比较多,所以很长一段时间没有更新博客了,今天更新一篇雷达扫描附近好友效果,以后尽量每周更新一篇,先看一下效果:
2.实现
1. 效果分析
效果分为两个部分,一个是上半部分的自定义RadarView,还有就是下半部分的ViewPager,至于怎么做到缩放和背景虚化的效果大家可以去看看LazyViewPager这里不详细介绍,也可以去慕课网看看http://www.imooc.com/view/226,这里主要实现扫描效果部分
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;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); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
2.2下面需要去画中间的用户图像,可以运行看看中间的六个圆圈有没有达到效果,这里就不看了直接在onDraw()方法中画中间图像:
private Bitmap centerBitmap; private void init(){ 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); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
2.3最后只需要实现这个扫描的效果这个控件基本就完成了,第一需要开启线程不断调用invalidate()去更新onDraw()方法,第二需要熟悉扫描渲染SweepGradient这个类,如果这两个都没问题那么大功告成:
private Paint mPaintScan;private Matrix matrix = new Matrix();private int mRoteDegree;private Shader scanShader;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) { 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(); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
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; private SparseArray<Float> scanAngleList = new SparseArray<>(); private SparseArray<Info> mDatas; private int dataLength; private int minItemPosition; private CircleView currentShowChild; private CircleView minShowChild; private IRadarClickListener iRadarClickListener; 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); 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); 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()); } for (int i = 0; i < childCount; i++) { final int j = i; final View child = getChildAt(i); if (child.getId() == R.id.id_scan_circle) { continue; } ((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); if (scanAngleList.get(i - 1) == 0) { continue; } 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; 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; 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); } 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)); } 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); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
附源码地址:http://download.csdn.net/detail/z240336124/9590748