Android自定義View實現(xiàn)APP啟動頁倒計時效果
Android自定義View實現(xiàn)APP啟動頁倒計時效果,供大家參考,具體內(nèi)容如下
之前也是做過APP啟動頁的倒計時效果,但是只有文字變化,沒有動畫效果,這次通過使用自定義View控件來制作一個帶有動畫效果的倒計時。
倒計時效果的基本思路如下:
Canvas提供了繪制弧形的方法,drawArc(),使用這個方法通過定時刷新計算當前弧形的角度,就可以模擬出倒計時的動畫效果,同時借助drawText()方法可以實現(xiàn)倒計時文字。
(1)繼承View
(2)使用canvas的drawArc()來繪制弧形,模擬動畫效果
(3)使用canvas的drawText()來繪制倒計時文字
(4)向外部(Activity或者Fragment)提供接口,倒計時結(jié)束之后通過接口告訴外部
具體看代碼:
首先定義當前view的寬度和高度的默認值,并重寫onMeasure()方法,否則在布局文件中即使使用wrap_content當前view也會布滿全屏
?//當前view高度和寬度的默認值 ?private static final int DEFAULT_WIDTH = 100; ?private static final int DEFAULT_HEIGHT = 100;
定義三個變量,分別是倒計時總長度,當前剩余倒計時長度,以及剩余時間比例,根據(jù)這個比例繪制弧形劃過的角度
private int countDownTime = 5000;//倒計時的時間,默認是5秒 private int countDownNow = 5000;//當前的時間,默認也是5秒 private float timeTatio = 1f;//剩余時間比例,默認為1
定義畫筆以及向外部提供的接口
使用Android提供的倒計時類,如果不使用這個類,也可以通過thread+handler實現(xiàn),初始化這個類需要傳入兩個參數(shù),第一個參數(shù)是倒計時總長度,第二個參數(shù)是倒計時間隔,也就是每隔多長時間停止一次。這個類重寫了兩個方法,第一個方法是倒計時暫停的時候需要執(zhí)行的操作,第二個方法是倒計時完全結(jié)束之后需要執(zhí)行的操作,在這里,我設置了每隔10ms暫停一次,計算剩余時間的比例并重新繪制整個view,倒計時完全結(jié)束后通過接口告訴外部。
private Paint paint; ? ? private ViewCountDownFinishListener viewCountDownFinishListener; ? ? //倒計時,每隔100毫秒倒計時一次 ? ? private CountDownTimer countDownTimer = new CountDownTimer(countDownTime,10) { ? ? ? ? @Override ? ? ? ? public void onTick(long l) { ? ? ? ? ? ? LogUtils.logI("倒計時:"+l); ? ? ? ? ? ? countDownNow = (int) l; ? ? ? ? ? ? //計算比例 ? ? ? ? ? ? timeTatio = (float) countDownNow / (float)countDownTime; ? ? ? ? ? ? invalidate(); ? ? ? ? } ? ? ? ? @Override ? ? ? ? public void onFinish() { ? ? ? ? ? ? countDownTimer.cancel(); ? ? ? ? ? ? if(viewCountDownFinishListener != null){ ? ? ? ? ? ? ? ? viewCountDownFinishListener.countDownFinish(); ? ? ? ? ? ? } ? ? ? ? } ? ? };
在構(gòu)造方法中調(diào)用init()方法以啟動倒計時
private void init(){ ? ? ? ? if(countDownTimer != null) { ? ? ? ? ? ? countDownTimer.start(); ? ? ? ? } ? ? }
//設置倒計時完成的接口 ? ? public void setViewCountDownFinishListener(ViewCountDownFinishListener viewCountDownFinishListener){ ? ? ? ? this.viewCountDownFinishListener = viewCountDownFinishListener; ? ? }
重寫onDraw()方法,根據(jù)
canvas.drawArc(float left,float top,float right,float bottom,float startAngle,float sweepAngle,boolean useCenter, Paint paint)
參數(shù)說明:
前四個參數(shù)表明當前的弧形所在的橢圓,只要設置橢圓寬度和高度一樣,就是一個圓了,
startAngle是開始繪制的角度,以正右方向(X軸正方向)為0都,順時針為正度數(shù),逆時針為負度數(shù),這里我設置從-90°(也就是Y軸負方向)開始,
sweep是指弧形劃過的角度,這里我設置的是從0開始一直劃過360度,剛好畫一個圓,但是其實并沒有完全到360度,因為我設置了每隔10ms執(zhí)行一次,最后并不會完全是360度,但是非常接近,幾乎看不出來。
useCenter表示是否連接到圓心,如果連接到圓心,就是扇形,這里需要弧形,就選擇false
繪制完弧形后開始繪制倒計時文字,這個比較簡單,就是計算倒計時剩余時間就可以了,然后繪制出來。
protected void onDraw(Canvas canvas) { ? ? ? ? LogUtils.logI("onDraw()方法執(zhí)行"); ? ? ? ? super.onDraw(canvas); ? ? ? ? paint = new Paint(); ? ? ? ? paint.setStyle(Paint.Style.STROKE); ? ? ? ? paint.setColor(Color.BLACK); ? ? ? ? paint.setAntiAlias(true); ? ? ? ? paint.setStrokeWidth(2); ? ? ? ? paint.setAntiAlias(true); ? ? ? ? //根據(jù)比例繪制一個扇形,也就是一個圓形 ? ? ? ? //當前的弧度 ? ? ? ? float currentRadian = 360 - 360 * timeTatio; ? ? ? ? canvas.drawArc(10,10,60,60,-90,currentRadian,false,paint); ? ? ? ? //繪制文字 ? ? ? ? paint.reset(); ? ? ? ? paint.setStyle(Paint.Style.FILL); ? ? ? ? paint.setColor(Color.parseColor("#3399ff")); ? ? ? ? paint.setAntiAlias(true); ? ? ? ? paint.setTextSize(30); ? ? ? ? canvas.drawText(String.valueOf((int) (countDownNow/1000)),27,45,paint); ? ? }
重寫onMeasure()方法,為了將View顯示在正確的位置上。
//重寫onMeasure方法 ? ? @Override ? ? protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { ? ? ? ? //super.onMeasure(widthMeasureSpec, heightMeasureSpec); ? ? ? ? setMeasuredDimension(measureSpecHandler(widthMeasureSpec,DEFAULT_WIDTH),measureSpecHandler(heightMeasureSpec,DEFAULT_HEIGHT)); ? ? } ? ? //計算高度和寬度的具體值 ? ? private int measureSpecHandler(int measureSpec,int defaultSize){ ? ? ? ? int result = defaultSize; ? ? ? ? int specModel = MeasureSpec.getMode(measureSpec); ? ? ? ? int specSize = MeasureSpec.getSize(measureSpec); ? ? ? ? switch(specModel){ ? ? ? ? ? ? case MeasureSpec.EXACTLY: ? ? ? ? ? ? ? ? result = specSize; ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? case MeasureSpec.AT_MOST: ? ? ? ? ? ? ? ? result = Math.min(result,specSize); ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? default: ? ? ? ? ? ? ? ? result = defaultSize; ? ? ? ? ? ? ? ? break; ? ? ? ? } ? ? ? ? return result; ? ? }
定義接口,向外部提供倒計時完成的通知信息
?//定義一個接口,當?shù)褂嫊r完成之后通知activity做出相應改變 ? ? public interface ViewCountDownFinishListener{ ? ? ? ? void countDownFinish(); ? ? }
在xml中直接使用:
<FrameLayout 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:layout_width="match_parent" ? ? android:layout_height="match_parent" ? ? tools:context="com.fanjuan.project.wisdomclass.activity.ActivityMain"> ? ? <com.fanjuan.project.wisdomclass.view.CountDownView ? ? ? ? android:id="@+id/cv_count_down" ? ? ? ? android:layout_width="wrap_content" ? ? ? ? android:layout_height="wrap_content" ? ? ? ? android:layout_gravity="right" ? ? ? ? android:layout_marginRight="20dp" ? ? ? ? android:layout_marginTop="20dp" /> </FrameLayout>
在activity中使用:
?protected void initView() { ? ? ? ? countDownView = findViewById(R.id.cv_count_down); ? ? } ? ? @Override ? ? protected void initListener() { ? ? ? ? super.initListener(); ? ? ? ? countDownView.setViewCountDownFinishListener(new CountDownView.ViewCountDownFinishListener() { ? ? ? ? ? ? @Override ? ? ? ? ? ? public void countDownFinish() { ? ? ? ? ? ? ? ? ToastUtils.toastInfo("倒計時結(jié)束"); ? ? ? ? ? ? } ? ? ? ? }); ? ? }
最后的效果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android 消息分發(fā)使用EventBus的實例詳解
這篇文章主要介紹了Android 消息分發(fā)使用EventBus的實例詳解的相關資料,在項目中用了許多Handler和broadcast導致代碼冗余,顯得雜亂無章,這里使用EventBus來實現(xiàn)相同的功能,需要的朋友可以參考下2017-07-07Android UI動態(tài)設置帶有Stroke漸變色背景Drawable
這篇文章主要為大家介紹了Android UI動態(tài)設置帶有Stroke漸變色背景Drawable,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01android getActivity.findViewById獲取ListView 返回NULL的方法
下面小編就為大家?guī)硪黄猘ndroid getActivity.findViewById獲取ListView 返回NULL的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11Android UI之ImageView實現(xiàn)圖片旋轉(zhuǎn)和縮放
這篇文章主要介紹了Android UI之ImageView實現(xiàn)圖片旋轉(zhuǎn)和縮放的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-09-09Android使用ftp方式實現(xiàn)文件上傳和下載功能
這篇文章主要介紹了Android使用ftp方式實現(xiàn)文件上傳和下載功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06