Android仿微信、QQ附近好友雷達(dá)掃描效果
1.概述
最近一直到在帶實(shí)習(xí)生,因?yàn)槿吮容^多,所以很長(zhǎng)一段時(shí)間沒有更新博客了,今天更新一篇雷達(dá)掃描附近好友效果,以后盡量每周更新一篇,先看一下效果:
2.實(shí)現(xiàn)
1、效果分析
效果分為兩個(gè)部分,一個(gè)是上半部分的自定義RadarView,還有就是下半部分的ViewPager,至于怎么做到縮放和背景虛化的效果大家可以去看看LazyViewPager這里不詳細(xì)介紹,這里主要實(shí)現(xiàn)掃描效果部分。
2、掃描效果實(shí)現(xiàn)
2.1自定義RadarView在onDraw()方法中畫六個(gè)圓圈,至于圓圈的半徑是多少我們需要通過onMeasure(int widthMeasureSpec, int heightMeasureSpec)測(cè)量方法獲取控件的寬高來確定圓的半徑,每個(gè)圓的半徑是寬度的1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f,這只是自己測(cè)試出來感覺比較舒適的效果,下面請(qǐng)看代碼:
//每個(gè)圓圈所占的比例 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) { // 繪制六個(gè)白色圓圈 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下面需要去畫中間的用戶圖像,可以運(yùn)行看看中間的六個(gè)圓圈有沒有達(dá)到效果,這里就不看了直接在onDraw()方法中畫中間圖像:
private Bitmap centerBitmap;//最中間icon private void init(){ // 通過bitmap工廠區(qū)獲取用戶圖像的bitmap centerBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.circle_photo); } @Override protected void onDraw(Canvas canvas) { drawCenterIcon(canvas); } /** * 繪制最中間的圖標(biāo) * * @param canvas */ private void drawCenterIcon(Canvas canvas) { int iconWidth = mWidth * circleProportion[0]; canvas.drawBitmap(centerBitmap, 0,0,iconWidth ,iconWidth , null); }
2.3最后只需要實(shí)現(xiàn)這個(gè)掃描的效果這個(gè)控件基本就完成了,第一需要開啟線程不斷調(diào)用invalidate()去更新onDraw()方法,第二需要熟悉掃描渲染SweepGradient這個(gè)類,如果這兩個(gè)都沒問題那么大功告成:
private Paint mPaintScan;//畫掃描需要用到的paint private Matrix matrix = new Matrix();//旋轉(zhuǎn)需要的矩陣 private int mRoteDegree;//掃描旋轉(zhuǎn)的角度 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) { //設(shè)置掃描渲染的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. 實(shí)現(xiàn)添加數(shù)據(jù)效果RadarViewGroup,我們的圖像附近點(diǎn)需要加入ViewGroup這里又需要自定義了,這里簡(jiǎn)單說一下自定ViewGroup:
1).onMeasure()測(cè)量方法這里就不說了
2).只要搞清楚onLayout()方法是干嘛的就Ok,ViewGroup里面的子View都顯示在什么位置就是寫在這個(gè)方法里面的,換句話說有的隔得近有的隔得遠(yuǎn)都是由 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;//數(shù)據(jù)源 private int dataLength;//數(shù)據(jù)源長(zhǎng)度 private int minItemPosition;//最小距離的item所在數(shù)據(jù)源中的位置 private CircleView currentShowChild;//當(dāng)前展示的item private CircleView minShowChild;//最小距離的item private IRadarClickListener iRadarClickListener;//雷達(dá)圖中點(diǎn)擊監(jiān)聽CircleView小圓點(diǎn)回調(diào)接口 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); //測(cè)量每個(gè)children measureChildren(widthMeasureSpec, heightMeasureSpec); for (int i = 0; i < getChildCount(); i++) { View child = getChildAt(i); if (child.getId() == R.id.id_scan_circle) { //為雷達(dá)掃描圖設(shè)置需要的屬性 ((RadarView) child).setScanningListener(this); //考慮到數(shù)據(jù)沒有添加前掃描圖在掃描,但是不會(huì)開始為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(); //首先放置雷達(dá)掃描圖 View view = findViewById(R.id.id_scan_circle); if (view != null) { view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight()); } //放置雷達(dá)圖中需要展示的item圓點(diǎn) 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; } //設(shè)置CircleView小圓點(diǎn)的坐標(biāo)信息 //坐標(biāo) = 旋轉(zhuǎn)角度 * 半徑 * 根據(jù)遠(yuǎn)近距離的不同計(jì)算得到的應(yīng)該占的半徑比例 ((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中的對(duì)應(yīng)的item的值為0, // 說明還沒有掃描到該item,跳過對(duì)該item的layout //(scanAngleList設(shè)置數(shù)據(jù)時(shí)全部設(shè)置的value=0, // 當(dāng)onScanning時(shí),value設(shè)置的值始終不會(huì)0,具體可以看onScanning中的實(shí)現(xiàn)) if (scanAngleList.get(i - 1) == 0) { continue; } //放置Circle小圓點(diǎn) 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); //設(shè)置點(diǎn)擊事件 child.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { resetAnim(currentShowChild); currentShowChild = (CircleView) child; //因?yàn)槔走_(dá)圖是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; } /** * 設(shè)置數(shù)據(jù) * * @param mDatas */ public void setDatas(SparseArray<Info> mDatas) { this.mDatas = mDatas; dataLength = mDatas.size(); float min = Float.MAX_VALUE; float max = Float.MIN_VALUE; //找到距離的最大值,最小值對(duì)應(yīng)的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); } //根據(jù)數(shù)據(jù)源信息動(dòng)態(tài)添加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)); } //根據(jù)遠(yuǎn)近距離的不同計(jì)算得到的應(yīng)該占的半徑比例 0.312-0.832 circleView.setProportion((mDatas.get(i).getDistance() / max + 0.6f) * 0.52f); if (minItemPosition == i) { minShowChild = circleView; } addView(circleView); } } /** * 雷達(dá)圖沒有掃描完畢時(shí)回調(diào) * * @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(); } /** * 雷達(dá)圖掃描完畢時(shí)回調(diào) */ @Override public void onScanSuccess() { LogUtil.m("完成回調(diào)"); resetAnim(currentShowChild); currentShowChild = minShowChild; startAnim(currentShowChild, minItemPosition); } /** * 恢復(fù)CircleView小圓點(diǎn)原大小 * * @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小圓點(diǎn)大小 * * @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(); } } /** * 雷達(dá)圖中點(diǎn)擊監(jiān)聽CircleView小圓點(diǎn)回調(diào)接口 */ public interface IRadarClickListener { void onRadarItemClick(int position); } /** * 根據(jù)position,放大指定的CircleView小圓點(diǎn) * * @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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android實(shí)現(xiàn)爆炸式菜單按鈕彈出效果
這篇文章主要介紹了Android實(shí)現(xiàn)爆炸式菜單按鈕彈出效果,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05AndroidManifest.xml <uses-feature>和<uses-permisstio
這篇文章主要介紹了AndroidManifest.xml <uses-feature>和<uses-permisstion>分析及比較的相關(guān)資料,需要的朋友可以參考下2017-06-06Android動(dòng)態(tài)修改ToolBar的Menu菜單示例
本篇文章主要介紹了Android動(dòng)態(tài)修改ToolBar的Menu菜單示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02解析ScrollView--仿QQ空間標(biāo)題欄漸變
本篇文章主要介紹了仿QQ空間標(biāo)題欄漸變的實(shí)現(xiàn)方法的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05Android如何跳轉(zhuǎn)到應(yīng)用商店的APP詳情頁面
最近做項(xiàng)目遇到這樣的需求,要求從App內(nèi)部點(diǎn)擊按鈕或鏈接,跳轉(zhuǎn)到應(yīng)用商店的某個(gè)APP的詳情頁面,怎么實(shí)現(xiàn)此功能呢?下面小編給大家分享Android如何跳轉(zhuǎn)到應(yīng)用商店的APP詳情頁面,需要的朋友參考下2017-01-01Android ListView填充數(shù)據(jù)的方法
這篇文章主要介紹了Android ListView填充數(shù)據(jù)的方法的相關(guān)資料,大多數(shù)實(shí)現(xiàn)這樣的功能都是使用XML文件,這里就說下不使用布局文件如何實(shí)現(xiàn),需要的朋友可以參考下2017-09-09android studio git 刪除已在遠(yuǎn)程倉庫的文件或文件夾方式
這篇文章主要介紹了android studio git 刪除已在遠(yuǎn)程倉庫的文件或文件夾方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04