Android雷達(dá)掃描動(dòng)態(tài)界面制作
更新時(shí)間:2016年10月19日 17:22:00 作者:chaoyu168
這篇文章主要為大家詳細(xì)介紹了Android雷達(dá)掃描動(dòng)態(tài)界面制作資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
先看看效果圖:
源碼:
package com.zihao.radar; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import com.zihao.radar.view.RadarView; public class MainActivity extends Activity { private RadarView mRadarView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); // 取消狀態(tài)欄 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); mRadarView = (RadarView) findViewById(R.id.radar_view); mRadarView.setSearching(true); mRadarView.addPoint(); mRadarView.addPoint(); } }
package com.zihao.radar.view; import java.util.ArrayList; import java.util.List; import java.util.Random; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Style; import android.util.AttributeSet; import android.view.View; import com.zihao.radar.R; /** * @ClassName:RadarView * @Description:TODO<雷達(dá)掃描視圖> * @author:zihao * @date:2015年11月11日 上午12:26:11 * @version:v1.1 */ @SuppressLint("DrawAllocation") public class RadarView extends View { private Context mContext; private boolean isSearching = false;// 標(biāo)識(shí)是否處于掃描狀態(tài),默認(rèn)為不在掃描狀態(tài) private Paint mPaint;// 畫筆 private Bitmap mScanBmp;// 執(zhí)行掃描運(yùn)動(dòng)的圖片 private int mOffsetArgs = 0;// 掃描運(yùn)動(dòng)偏移量參數(shù) private Bitmap mDefaultPointBmp;// 標(biāo)識(shí)設(shè)備的圓點(diǎn)-默認(rèn) private Bitmap mLightPointBmp;// 標(biāo)識(shí)設(shè)備的圓點(diǎn)-高亮 private int mPointCount = 0;// 圓點(diǎn)總數(shù) private List<String> mPointArray = new ArrayList<String>();// 存放偏移量的map private Random mRandom = new Random(); private int mWidth, mHeight;// 寬高 int mOutWidth;// 外圓寬度(w/4/5*2=w/10) int mCx, mCy;// x、y軸中心點(diǎn) int mOutsideRadius, mInsideRadius;// 外、內(nèi)圓半徑 public RadarView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // TODO Auto-generated constructor stub init(context); } public RadarView(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub init(context); } public RadarView(Context context) { super(context); // TODO Auto-generated constructor stub init(context); } /** * TODO<提前初始化好需要使用的對(duì)象,避免在繪制過程中多次初始化> * * @return void */ private void init(Context context) { mPaint = new Paint(); this.mContext = context; this.mDefaultPointBmp = Bitmap.createBitmap(BitmapFactory .decodeResource(mContext.getResources(), R.drawable.radar_default_point_ico)); this.mLightPointBmp = Bitmap.createBitmap(BitmapFactory.decodeResource( mContext.getResources(), R.drawable.radar_light_point_ico)); } /** * 測(cè)量視圖及其內(nèi)容,以確定所測(cè)量的寬度和高度(測(cè)量獲取控件尺寸). */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 獲取控件區(qū)域?qū)捀? if (mWidth == 0 || mHeight == 0) { final int minimumWidth = getSuggestedMinimumWidth(); final int minimumHeight = getSuggestedMinimumHeight(); mWidth = resolveMeasured(widthMeasureSpec, minimumWidth); mHeight = resolveMeasured(heightMeasureSpec, minimumHeight); mScanBmp = Bitmap.createScaledBitmap(BitmapFactory.decodeResource( mContext.getResources(), R.drawable.radar_scan_img), mWidth - mOutWidth, mWidth - mOutWidth, false); // 獲取x/y軸中心點(diǎn) mCx = mWidth / 2; mCy = mHeight / 2; // 獲取外圓寬度 mOutWidth = mWidth / 10; // 計(jì)算內(nèi)、外半徑 mOutsideRadius = mWidth / 2;// 外圓的半徑 mInsideRadius = (mWidth - mOutWidth) / 4 / 2;// 內(nèi)圓的半徑,除最外層,其它圓的半徑=層數(shù)*insideRadius } } /** * 繪制視圖--從外部向內(nèi)部繪制 */ @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); // 開始繪制最外層的圓 mPaint.setAntiAlias(true);// 設(shè)置抗鋸齒 mPaint.setStyle(Style.FILL);// 設(shè)置填充樣式 mPaint.setColor(0xffB8DCFC);// 設(shè)置畫筆顏色 // 1.開始繪制圓形 canvas.drawCircle(mCx, mCy, mOutsideRadius, mPaint); // 開始繪制內(nèi)4圓 mPaint.setColor(0xff3278B4); canvas.drawCircle(mCx, mCy, mInsideRadius * 4, mPaint); // 開始繪制內(nèi)3圓 mPaint.setStyle(Style.STROKE); mPaint.setColor(0xff31C9F2); canvas.drawCircle(mCx, mCy, mInsideRadius * 3, mPaint); // 開始繪制內(nèi)2圓 canvas.drawCircle(mCx, mCy, mInsideRadius * 2, mPaint); // 開始繪制內(nèi)1圓 canvas.drawCircle(mCx, mCy, mInsideRadius * 1, mPaint); // 2.開始繪制對(duì)角線 canvas.drawLine(mOutWidth / 2, mCy, mWidth - mOutWidth / 2, mCy, mPaint);// 繪制0°~180°對(duì)角線 canvas.drawLine(mCx, mHeight - mOutWidth / 2, mCx, mOutWidth / 2, mPaint);// 繪制90°~270°對(duì)角線 // 根據(jù)角度繪制對(duì)角線 int startX, startY, endX, endY; double radian; // 繪制45°~225°對(duì)角線 // 計(jì)算開始位置x/y坐標(biāo)點(diǎn) radian = Math.toRadians((double) 45);// 將角度轉(zhuǎn)換為弧度 startX = (int) (mCx + mInsideRadius * 4 * Math.cos(radian));// 通過圓心坐標(biāo)、半徑和當(dāng)前角度計(jì)算當(dāng)前圓周的某點(diǎn)橫坐標(biāo) startY = (int) (mCy + mInsideRadius * 4 * Math.sin(radian));// 通過圓心坐標(biāo)、半徑和當(dāng)前角度計(jì)算當(dāng)前圓周的某點(diǎn)縱坐標(biāo) // 計(jì)算結(jié)束位置x/y坐標(biāo)點(diǎn) radian = Math.toRadians((double) 45 + 180); endX = (int) (mCx + mInsideRadius * 4 * Math.cos(radian)); endY = (int) (mCy + mInsideRadius * 4 * Math.sin(radian)); canvas.drawLine(startX, startY, endX, endY, mPaint); // 繪制135°~315°對(duì)角線 // 計(jì)算開始位置x/y坐標(biāo)點(diǎn) radian = Math.toRadians((double) 135); startX = (int) (mCx + mInsideRadius * 4 * Math.cos(radian)); startY = (int) (mCy + mInsideRadius * 4 * Math.sin(radian)); // 計(jì)算結(jié)束位置x/y坐標(biāo)點(diǎn) radian = Math.toRadians((double) 135 + 180); endX = (int) (mCx + mInsideRadius * 4 * Math.cos(radian)); endY = (int) (mCy + mInsideRadius * 4 * Math.sin(radian)); canvas.drawLine(startX, startY, endX, endY, mPaint); // 3.繪制掃描扇形圖 canvas.save();// 用來保存Canvas的狀態(tài).save之后,可以調(diào)用Canvas的平移、放縮、旋轉(zhuǎn)、錯(cuò)切、裁剪等操作. if (isSearching) {// 判斷是否處于掃描 canvas.rotate(mOffsetArgs, mCx, mCy);// 繪制旋轉(zhuǎn)角度,參數(shù)一:角度;參數(shù)二:x中心;參數(shù)三:y中心. canvas.drawBitmap(mScanBmp, mCx - mScanBmp.getWidth() / 2, mCy - mScanBmp.getHeight() / 2, null);// 繪制Bitmap掃描圖片效果 mOffsetArgs += 3; } else { canvas.drawBitmap(mScanBmp, mCx - mScanBmp.getWidth() / 2, mCy - mScanBmp.getHeight() / 2, null); } // 4.開始繪制動(dòng)態(tài)點(diǎn) canvas.restore();// 用來恢復(fù)Canvas之前保存的狀態(tài).防止save后對(duì)Canvas執(zhí)行的操作對(duì)后續(xù)的繪制有影響. if (mPointCount > 0) {// 當(dāng)圓點(diǎn)總數(shù)>0時(shí),進(jìn)入下一層判斷 if (mPointCount > mPointArray.size()) {// 當(dāng)圓點(diǎn)總數(shù)大于存儲(chǔ)坐標(biāo)點(diǎn)數(shù)目時(shí),說明有增加,需要重新生成隨機(jī)坐標(biāo)點(diǎn) int mx = mInsideRadius + mRandom.nextInt(mInsideRadius * 6); int my = mInsideRadius + mRandom.nextInt(mInsideRadius * 6); mPointArray.add(mx + "/" + my); } // 開始繪制坐標(biāo)點(diǎn) for (int i = 0; i < mPointArray.size(); i++) { String[] result = mPointArray.get(i).split("/"); // 開始繪制動(dòng)態(tài)點(diǎn) if (i < mPointArray.size() - 1) canvas.drawBitmap(mDefaultPointBmp, Integer.parseInt(result[0]), Integer.parseInt(result[1]), null); else canvas.drawBitmap(mLightPointBmp, Integer.parseInt(result[0]), Integer.parseInt(result[1]), null); } } if (isSearching) this.invalidate(); } /** * TODO<設(shè)置掃描狀態(tài)> * * @return void */ public void setSearching(boolean status) { this.isSearching = status; this.invalidate(); } /** * TODO<新增動(dòng)態(tài)點(diǎn)> * * @return void */ public void addPoint() { mPointCount++; this.invalidate(); } /** * TODO<解析獲取控件寬高> * * @return int */ private int resolveMeasured(int measureSpec, int desired) { int result = 0; int specSize = MeasureSpec.getSize(measureSpec); switch (MeasureSpec.getMode(measureSpec)) { case MeasureSpec.UNSPECIFIED: result = desired; break; case MeasureSpec.AT_MOST: result = Math.min(specSize, desired); break; case MeasureSpec.EXACTLY: default: result = specSize; } return result; } }
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bgp" tools:context="com.zihao.radar.MainActivity" > <com.zihao.radar.view.RadarView android:id="@+id/radar_view" android:layout_width="600px" android:layout_height="600px" android:layout_centerInParent="true" /> </RelativeLayout>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android 2.3.7.r1 camera錄像過程中按menu菜單鍵時(shí)會(huì)停止錄像
android GB版本的camera錄像過程中按“菜單”鍵會(huì)停止錄像,改成錄像時(shí)按menu鍵不做處理,具體修改方法如下,感興趣的朋友可以參考下哈2013-06-06Android Activity 完全結(jié)束并退出程序的實(shí)例
2013-11-11解決android 顯示內(nèi)容被底部導(dǎo)航欄遮擋的問題
今天小編就為大家分享一篇解決android 顯示內(nèi)容被底部導(dǎo)航欄遮擋的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07Flutter 快速實(shí)現(xiàn)聊天會(huì)話列表效果示例詳解
這篇文章主要為大家介紹了Flutter 快速實(shí)現(xiàn)聊天會(huì)話列表效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Flutter上的數(shù)據(jù)監(jiān)控深入理解
這篇文章主要給大家介紹了關(guān)于Flutter上的數(shù)據(jù)監(jiān)控的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06談?wù)凙ndroid中的Divider是個(gè)什么東東
在Android應(yīng)用開發(fā)中會(huì)經(jīng)常碰到一個(gè)叫divider的東西,就是兩個(gè)View之間的分割線,本文主要給大家介紹android中的divider相關(guān)知識(shí),需要的朋友可以參考下2016-03-03