基于Android自定義控件實(shí)現(xiàn)雷達(dá)效果
如何制作出類似雷達(dá)掃描的效果,具體方法如下
一、效果圖
二、實(shí)現(xiàn)思路
1、自定義控件RadarView用來畫雷達(dá)的效果圖,可以自定義屬性包括
backgroundColor:背景顏色
circleNum:圓的數(shù)量
startColor:開始顏色
endColor:結(jié)束顏色
lineColor:線的顏色
2、通過Handler循環(huán)發(fā)送消息到MessageQueue中,將mRotate加3,使Matrix旋轉(zhuǎn)mRotate,重繪雷達(dá)掃描的圓。
3、通過梯度漸變掃描渲染器SweepGradient,在繪制圓的過程中,將顏色從startColor變?yōu)閑ndColor。
三、實(shí)例代碼
public class RadarView extends View { private final String TAG = "RadarView"; private static final int MSG_WHAT = 1; private static final int DELAY_TIME = 20; //設(shè)置默認(rèn)寬高,雷達(dá)一般都是圓形,所以我們下面取寬高會(huì)取Math.min(寬,高) private final int DEFAULT_WIDTH = 200; private final int DEFAULT_HEIGHT = 200; //雷達(dá)的半徑 private int mRadarRadius; //雷達(dá)畫筆 private Paint mRadarPaint; //雷達(dá)底色畫筆 private Paint mRadarBg; //雷達(dá)圓圈的個(gè)數(shù),默認(rèn)4個(gè) private int mCircleNum = 4; //雷達(dá)線條的顏色,默認(rèn)為白色 private int mCircleColor = Color.WHITE; //雷達(dá)圓圈背景色 private int mRadarBgColor = Color.BLACK; //paintShader private Shader mRadarShader; //雷達(dá)掃描時(shí)候的起始和終止顏色 private int mStartColor = 0x0000ff00; private int mEndColor = 0xaa00ff00; private Matrix mMatrix; //旋轉(zhuǎn)的角度 private int mRotate = 0; private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); mRotate += 3; postInvalidate(); mMatrix.reset(); mMatrix.preRotate(mRotate, 0, 0); //延時(shí)DELAY_TIME后再發(fā)送消息 mHandler.sendEmptyMessageDelayed(MSG_WHAT, DELAY_TIME); } }; 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(context, attrs); //設(shè)置抗鋸齒 mRadarBg = new Paint(Paint.ANTI_ALIAS_FLAG); //畫筆顏色 mRadarBg.setColor(mRadarBgColor); //畫實(shí)心圓 mRadarBg.setStyle(Paint.Style.FILL); //設(shè)置抗鋸齒 mRadarPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //畫筆顏色 mRadarPaint.setColor(mCircleColor); //設(shè)置空心的畫筆,只畫圓邊 mRadarPaint.setStyle(Paint.Style.STROKE); //畫筆寬度 mRadarPaint.setStrokeWidth(2); //使用梯度漸變渲染器, mRadarShader = new SweepGradient(0, 0, mStartColor, mEndColor); mMatrix = new Matrix(); } //初始化,拓展可設(shè)置參數(shù)供布局使用 private void init(Context context, AttributeSet attrs) { if (attrs != null) { TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RadarView); mStartColor = ta.getColor(R.styleable.RadarView_startColor, mStartColor); mEndColor = ta.getColor(R.styleable.RadarView_endColor, mEndColor); mRadarBgColor = ta.getColor(R.styleable.RadarView_backgroundColor, mRadarBgColor); mCircleColor = ta.getColor(R.styleable.RadarView_lineColor, mCircleColor); mCircleNum = ta.getInteger(R.styleable.RadarView_circleNum, mCircleNum); ta.recycle(); } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //雷達(dá)的半徑為寬的一半或高的一半的最小值 mRadarRadius = Math.min(w / 2, h / 2); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //獲取寬度 int width = measureSize(1, DEFAULT_WIDTH, widthMeasureSpec); //獲取高度 int height = measureSize(0, DEFAULT_HEIGHT, heightMeasureSpec); //取最大的 寬|高 int measureSize = Math.max(width, height); setMeasuredDimension(measureSize, measureSize); } /** * 測(cè)繪measure * * @param specType 1為寬, 其他為高 * @param contentSize 默認(rèn)值 */ private int measureSize(int specType, int contentSize, int measureSpec) { int result; //獲取測(cè)量的模式和Size int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { result = Math.max(contentSize, specSize); } else { result = contentSize; if (specType == 1) { // 根據(jù)傳入方式計(jì)算寬 result += (getPaddingLeft() + getPaddingRight()); } else { // 根據(jù)傳入方式計(jì)算高 result += (getPaddingTop() + getPaddingBottom()); } } return result; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Log.d(TAG, "onDraw " + mRotate); mRadarBg.setShader(null); //將畫布移動(dòng)到屏幕的中心點(diǎn) canvas.translate(mRadarRadius, mRadarRadius); //繪制底色,讓雷達(dá)的線看起來更清晰 canvas.drawCircle(0, 0, mRadarRadius, mRadarBg); //畫圓圈 for (int i = 1; i <= mCircleNum; i++) { canvas.drawCircle(0, 0, (float) (i * 1.0 / mCircleNum * mRadarRadius), mRadarPaint); } //繪制雷達(dá)基線 x軸 canvas.drawLine(-mRadarRadius, 0, mRadarRadius, 0, mRadarPaint); //繪制雷達(dá)基線 y軸 canvas.drawLine(0, mRadarRadius, 0, -mRadarRadius, mRadarPaint); //設(shè)置顏色漸變從透明到不透明 mRadarBg.setShader(mRadarShader); //設(shè)置矩陣 canvas.concat(mMatrix); canvas.drawCircle(0, 0, mRadarRadius, mRadarBg); } public void startScan() { mHandler.removeMessages(MSG_WHAT); mHandler.sendEmptyMessage(MSG_WHAT); } public void stopScan() { mHandler.removeMessages(MSG_WHAT); } }
布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" > <com.android.demo.ui.shader.RadarView android:id="@+id/radarview" android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" app:backgroundColor="#000000" app:circleNum="4" app:endColor="#aaff0000" app:lineColor="#00ff00" app:startColor="#aa0000ff"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" android:onClick="start" android:text="開始" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:onClick="stop" android:text="停止" /> </RelativeLayout>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android自定義控件ImageView實(shí)現(xiàn)圓形圖片
- Android自定義控件ImageView實(shí)現(xiàn)點(diǎn)擊之后出現(xiàn)陰影效果
- Android自定義控件ViewFipper實(shí)現(xiàn)豎直跑馬燈效果
- Android自定義控件打造絢麗平行空間引導(dǎo)頁
- Android自定義控件EditText實(shí)現(xiàn)清除和抖動(dòng)功能
- Android自定義控件EditText使用詳解
- Android自定義控件實(shí)現(xiàn)下拉刷新效果
- Android編程實(shí)現(xiàn)自定義控件的方法示例
- Android自定義控件之日期選擇控件使用詳解
- Android自定義控件實(shí)現(xiàn)九宮格解鎖功能
- 實(shí)例講解Android自定義控件
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)Android倒計(jì)時(shí)效果
這篇文章主要教大家如何簡(jiǎn)單的實(shí)現(xiàn)Android倒計(jì)時(shí)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10Android PopupWindow使用方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了Android PopupWindow使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Android運(yùn)用onTouchEvent自定義滑動(dòng)布局
這篇文章主要為大家詳細(xì)介紹了Android運(yùn)用onTouchEvent寫一個(gè)上下滑動(dòng)的布局,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Android 實(shí)現(xiàn)不依賴焦點(diǎn)和選中的TextView跑馬燈
本文主要介紹Android 跑馬燈的實(shí)現(xiàn),這里提供實(shí)現(xiàn)詳細(xì)實(shí)現(xiàn)代碼供大家參考,有需要的小伙伴可以看下2016-07-07Android自定義SwipeLayout仿QQ側(cè)滑條目
這篇文章主要為大家詳細(xì)介紹了Android自定義SwipeLayout仿QQ側(cè)滑條目,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Android編程獲取包名,版本信息及VersionName名稱的方法
這篇文章主要介紹了Android編程獲取包名,版本信息及VersionName名稱的方法,涉及Android包及版本相關(guān)操作函數(shù)使用技巧,需要的朋友可以參考下2016-10-10Android入門之PopupWindow用法實(shí)例解析
這篇文章主要介紹了Android入門之PopupWindow用法,對(duì)于Android初學(xué)者來說有一定的學(xué)習(xí)借鑒價(jià)值,需要的朋友可以參考下2014-08-08Jetpack?Compose?的新型架構(gòu)?MVI使用詳解
這篇文章主要介紹了Jetpack?Compose?的新型架構(gòu)?MVI使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Android監(jiān)聽系統(tǒng)來電并彈出提示窗口
本篇文章主要介紹了Android監(jiān)聽系統(tǒng)來電并彈出提示窗口,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10