Android自定義view實(shí)現(xiàn)圓形waveview
最近學(xué)習(xí)了貝塞爾曲線的一些知識(shí),剛好項(xiàng)目中需要實(shí)現(xiàn)一個(gè)圓形進(jìn)度,然后就將實(shí)現(xiàn)的waveView記錄一下。需要使用的知識(shí)大概有自定義view、貝塞爾曲線、valueAnimator(屬性動(dòng)畫(huà))、Xfermode等。
以下為效果圖:
廢話不多說(shuō),直接上代碼這里只是一些重要的代碼。如果需要demo可以去下載。
首先需要自定義view的屬性:
<declare-styleable name="custom_wave_view_attr"> <attr name="circle_color" format="color"></attr> //圓的顏色 <attr name="circle_background_color" format="color"></attr> //圓的背景色 <attr name="progress_wave_color" format="color"></attr> //水波紋的顏色 <attr name="progress_text_size" format="dimension"></attr> //字體的大小 <attr name="progress_text_color" format="color"></attr> //字體的顏色 </declare-styleable>
第二步自定義CustomWaveView
1、實(shí)現(xiàn)構(gòu)造方法,在構(gòu)造方法中獲取屬性值
TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.custom_wave_view_attr); //圓的顏色 circle_color = ta.getColor(R.styleable.custom_wave_view_attr_circle_color,getResources().getColor(android.R.color.black)); //圓的背景色 circle_bg_color = ta.getColor(R.styleable.custom_wave_view_attr_circle_background_color,getResources().getColor(android.R.color.white)); //水波紋顏色 wave_color = ta.getColor(R.styleable.custom_wave_view_attr_progress_wave_color,getResources().getColor(android.R.color.holo_blue_dark)); //字體的顏色 text_color = ta.getColor(R.styleable.custom_wave_view_attr_progress_text_color,getResources().getColor(android.R.color.black)); //字體的大小 textSize = ta.getDimension(R.styleable.custom_wave_view_attr_progress_text_size,30f); //釋放資源 ta.recycle();
2、初始化畫(huà)筆
//初始化背景圓畫(huà)筆 mBgCirclePaint = new Paint(); //抗鋸齒 mBgCirclePaint.setAntiAlias(true); //設(shè)置背景圓的背景色 mBgCirclePaint.setColor(circle_bg_color); //設(shè)置充滿 mBgCirclePaint.setStyle(Paint.Style.FILL); //初始化水波紋畫(huà)筆 mWavePaint = new Paint(); //抗鋸齒 mWavePaint.setAntiAlias(true); //設(shè)置水波紋的背景色 mWavePaint.setColor(wave_color); //設(shè)置充滿 mWavePaint.setStyle(Paint.Style.FILL); //使用Xfermode獲取重疊部分 mWavePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
3、繪制貝塞爾曲線。以下為原理圖。
/** * 初始化貝塞爾曲線上的點(diǎn) */ private void reset() { startP = new PointF(-width, height); nextP = new PointF(-width/2, height); threeP = new PointF(0, height); fourP = new PointF(width/2, height); endP = new PointF(width, height); controllerP1 = new PointF(-width/4, height); controllerP2 = new PointF(-width * 3/4, height); controllerP3 = new PointF(width/4, height); controllerP4 = new PointF(width * 3/4, height); }
4、在onDraw方法中畫(huà)貝塞爾曲線和圓
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //在透明畫(huà)布上畫(huà)背景圓 mCanvas.drawCircle(width/2, height/2, radius, mBgCirclePaint); //貝塞爾曲線 mPath.reset(); mPath.moveTo(startP.x, startP.y); mPath.quadTo(controllerP1.x, controllerP1.y, nextP.x, nextP.y); mPath.quadTo(controllerP2.x, controllerP2.y, threeP.x, threeP.y); mPath.quadTo(controllerP3.x, controllerP3.y, fourP.x, fourP.y); mPath.quadTo(controllerP4.x, controllerP4.y, endP.x, endP.y); mPath.lineTo(endP.x, height); mPath.lineTo(-width, height); //在透明畫(huà)布上繪制水波紋 mCanvas.drawPath(mPath,mWavePaint); //將畫(huà)好的圓繪制在畫(huà)布上 canvas.drawBitmap(mBitmap, 0, 0, null); }
5、使用動(dòng)畫(huà)讓貝塞爾曲線動(dòng)起來(lái)
/** * 開(kāi)始動(dòng)畫(huà) 讓startP的x點(diǎn)坐標(biāo)在2S時(shí)間內(nèi)循環(huán)移動(dòng)到0點(diǎn)。 * depth---進(jìn)度 * waveRipple----水波紋的振幅 */ private void startAnimator() { animator = ValueAnimator.ofFloat(startP.x, 0); animator.setInterpolator(new LinearInterpolator()); animator.setDuration(2000); //重復(fù)循環(huán) animator.setRepeatCount(ValueAnimator.INFINITE); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { startP.x = (Float) animation.getAnimatedValue(); startP = new PointF(startP.x, height - depth); nextP = new PointF(startP.x + width/2, height - depth); threeP = new PointF(nextP.x + width/2, height - depth); fourP = new PointF(threeP.x + width/2, height - depth); endP = new PointF(fourP.x + width/2, height - depth); controllerP1 = new PointF(startP.x + width/4, height - depth + waveRipple); controllerP2 = new PointF(nextP.x + width/4, height - depth - waveRipple); controllerP3 = new PointF(threeP.x + width/4, height - depth + waveRipple); controllerP4 = new PointF(fourP.x + width/4, height - depth - waveRipple); invalidate(); } }); animator.start(); }
第三步在XML中使用自定義View
<com.criclewaveview_master.CustomWaveView android:id="@+id/custom_circle_wave_view" android:layout_width="wrap_content" android:layout_height="wrap_content" wave:circle_color = "@color/circle_color" android:layout_centerInParent="true" wave:circle_background_color = "@color/circle_bg_color" wave:progress_wave_color = "@color/colorAccent" wave:progress_text_size = "20sp" wave:progress_text_color = "@color/circle_color"/>
這樣就完成了自定義WaveView。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡的示例
- Android Path繪制貝塞爾曲線實(shí)現(xiàn)QQ拖拽泡泡
- Android貝塞爾曲線初步學(xué)習(xí)第三課 Android實(shí)現(xiàn)添加至購(gòu)物車(chē)的運(yùn)動(dòng)軌跡
- Android貝塞爾曲線實(shí)現(xiàn)直播點(diǎn)贊效果
- Android貝塞爾曲線初步學(xué)習(xí)第一課
- Android仿百度地圖小度語(yǔ)音助手的貝塞爾曲線動(dòng)畫(huà)
- Android利用二階貝塞爾曲線實(shí)現(xiàn)添加購(gòu)物車(chē)動(dòng)畫(huà)詳解
- Android貝塞爾曲線實(shí)現(xiàn)填充不規(guī)則圖形并隨手指運(yùn)動(dòng)
- Android使用貝塞爾曲線仿QQ聊天消息氣泡拖拽效果
- Android貝塞爾曲線實(shí)現(xiàn)消息拖拽消失
相關(guān)文章
android基礎(chǔ)總結(jié)篇之二:Activity的四種launchMode
這篇文章主要介紹了android基礎(chǔ)總結(jié)篇之二:Activity的四種launchMode,有需要的可以了解一下。2016-11-11Android開(kāi)發(fā)Activity毛玻璃背景效果
這篇文章主要為大家詳細(xì)介紹了Android開(kāi)發(fā)Activity毛玻璃背景效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Android中ActionBar和ToolBar添加返回箭頭的實(shí)例代碼
這篇文章主要介紹了Android中ActionBar和ToolBar添加返回箭頭的實(shí)例代碼,需要的朋友可以參考下2017-09-09PC版與Android手機(jī)版帶斷點(diǎn)續(xù)傳的多線程下載
這篇文章主要介紹了PC版與Android手機(jī)版帶斷點(diǎn)續(xù)傳的多線程下載的相關(guān)資料,需要的朋友可以參考下2015-10-10Android應(yīng)用開(kāi)發(fā)中控制反轉(zhuǎn)IoC設(shè)計(jì)模式使用教程
這篇文章主要介紹了Android應(yīng)用開(kāi)發(fā)中控制反轉(zhuǎn)IoC設(shè)計(jì)模式使用教程,IoC其實(shí)更常被理解為一種依賴注入的模式,用來(lái)分解業(yè)務(wù)層降低耦合,需要的朋友可以參考下2016-04-04Android實(shí)現(xiàn)阿里云oss上傳流程解析
這篇文章主要介紹了Android實(shí)現(xiàn)阿里云oss上傳流程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09Android端使用Modbus協(xié)議的簡(jiǎn)單方法
Modbus協(xié)議是全球第一個(gè)用于工業(yè)現(xiàn)場(chǎng)的總線協(xié)議,與外設(shè)交互可以采用串口通信,tcp等方式,這篇文章主要給大家介紹了關(guān)于Android端使用Modbus協(xié)議的簡(jiǎn)單方法,需要的朋友可以參考下2021-11-11