亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Android仿微信、QQ附近好友雷達掃描效果

 更新時間:2016年11月02日 10:33:12   作者:z240336124  
這篇文章主要為大家詳細介紹了Android仿微信、QQ附近好友雷達掃描效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下

1.概述

  最近一直到在帶實習(xí)生,因為人比較多,所以很長一段時間沒有更新博客了,今天更新一篇雷達掃描附近好友效果,以后盡量每周更新一篇,先看一下效果:

2.實現(xiàn) 

1、效果分析

效果分為兩個部分,一個是上半部分的自定義RadarView,還有就是下半部分的ViewPager,至于怎么做到縮放和背景虛化的效果大家可以去看看LazyViewPager這里不詳細介紹,這里主要實現(xiàn)掃描效果部分。

2、掃描效果實現(xiàn)

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工廠區(qū)獲取用戶圖像的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最后只需要實現(xiàn)這個掃描的效果這個控件基本就完成了,第一需要開啟線程不斷調(diào)用invalidate()去更新onDraw()方法,第二需要熟悉掃描渲染SweepGradient這個類,如果這兩個都沒問題那么大功告成:

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. 實現(xiàn)添加數(shù)據(jù)效果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;//數(shù)據(jù)源
 private int dataLength;//數(shù)據(jù)源長度
 private int minItemPosition;//最小距離的item所在數(shù)據(jù)源中的位置
 private CircleView currentShowChild;//當(dāng)前展示的item
 private CircleView minShowChild;//最小距離的item
 private IRadarClickListener iRadarClickListener;//雷達圖中點擊監(jiān)聽CircleView小圓點回調(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);
 //測量每個children
 measureChildren(widthMeasureSpec, heightMeasureSpec);
 for (int i = 0; i < getChildCount(); i++) {
  View child = getChildAt(i);
  if (child.getId() == R.id.id_scan_circle) {
  //為雷達掃描圖設(shè)置需要的屬性
  ((RadarView) child).setScanningListener(this);
  //考慮到數(shù)據(jù)沒有添加前掃描圖在掃描,但是不會開始為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;
  }
  //設(shè)置CircleView小圓點的坐標信息
  //坐標 = 旋轉(zhuǎ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中的對應(yīng)的item的值為0,
  // 說明還沒有掃描到該item,跳過對該item的layout
  //(scanAngleList設(shè)置數(shù)據(jù)時全部設(shè)置的value=0,
  // 當(dāng)onScanning時,value設(shè)置的值始終不會0,具體可以看onScanning中的實現(xiàn))
  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);
  //設(shè)置點擊事件
  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;

 }

 /**
 * 設(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;
 //找到距離的最大值,最小值對應(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ù)源信息動態(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ù)遠近距離的不同計算得到的應(yīng)該占的半徑比例 0.312-0.832
  circleView.setProportion((mDatas.get(i).getDistance() / max + 0.6f) * 0.52f);
  if (minItemPosition == i) {
  minShowChild = circleView;
  }
  addView(circleView);
 }
 }

 /**
 * 雷達圖沒有掃描完畢時回調(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();
 }

 /**
 * 雷達圖掃描完畢時回調(diào)
 */
 @Override
 public void onScanSuccess() {
 LogUtil.m("完成回調(diào)");
 resetAnim(currentShowChild);
 currentShowChild = minShowChild;
 startAnim(currentShowChild, minItemPosition);
 }

 /**
 * 恢復(fù)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();
 }
 }

 /**
 * 雷達圖中點擊監(jiān)聽CircleView小圓點回調(diào)接口
 */
 public interface IRadarClickListener {
 void onRadarItemClick(int position);
 }

 /**
 * 根據(jù)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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Android實現(xiàn)爆炸式菜單按鈕彈出效果

    Android實現(xiàn)爆炸式菜單按鈕彈出效果

    這篇文章主要介紹了Android實現(xiàn)爆炸式菜單按鈕彈出效果,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • AndroidManifest.xml <uses-feature>和<uses-permisstion>分析及比較

    AndroidManifest.xml <uses-feature>和<uses-permisstio

    這篇文章主要介紹了AndroidManifest.xml <uses-feature>和<uses-permisstion>分析及比較的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • Android動態(tài)修改ToolBar的Menu菜單示例

    Android動態(tài)修改ToolBar的Menu菜單示例

    本篇文章主要介紹了Android動態(tài)修改ToolBar的Menu菜單示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 解析ScrollView--仿QQ空間標題欄漸變

    解析ScrollView--仿QQ空間標題欄漸變

    本篇文章主要介紹了仿QQ空間標題欄漸變的實現(xiàn)方法的相關(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-05-05
  • Android如何跳轉(zhuǎn)到應(yīng)用商店的APP詳情頁面

    Android如何跳轉(zhuǎn)到應(yīng)用商店的APP詳情頁面

    最近做項目遇到這樣的需求,要求從App內(nèi)部點擊按鈕或鏈接,跳轉(zhuǎn)到應(yīng)用商店的某個APP的詳情頁面,怎么實現(xiàn)此功能呢?下面小編給大家分享Android如何跳轉(zhuǎn)到應(yīng)用商店的APP詳情頁面,需要的朋友參考下
    2017-01-01
  • 詳解Android截屏事件監(jiān)聽

    詳解Android截屏事件監(jiān)聽

    本篇文章主要介紹了Android截屏事件監(jiān)聽,Android系統(tǒng)沒有直接對截屏事件監(jiān)聽的接口,本文介紹了2種方法,有興趣的可以了解一下。
    2016-12-12
  • Android消息機制Handler的工作過程詳解

    Android消息機制Handler的工作過程詳解

    這篇文章主要為大家詳細介紹了Android消息機制Handler的工作過程,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • Android ListView填充數(shù)據(jù)的方法

    Android ListView填充數(shù)據(jù)的方法

    這篇文章主要介紹了Android ListView填充數(shù)據(jù)的方法的相關(guān)資料,大多數(shù)實現(xiàn)這樣的功能都是使用XML文件,這里就說下不使用布局文件如何實現(xiàn),需要的朋友可以參考下
    2017-09-09
  • Android給圖片加文字和圖片水印實例代碼

    Android給圖片加文字和圖片水印實例代碼

    本篇文章主要介紹了Android給圖片加文字和圖片水印實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • android studio git 刪除已在遠程倉庫的文件或文件夾方式

    android studio git 刪除已在遠程倉庫的文件或文件夾方式

    這篇文章主要介紹了android studio git 刪除已在遠程倉庫的文件或文件夾方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-04-04

最新評論