Android自定義View實(shí)現(xiàn)進(jìn)度條動(dòng)畫
本文實(shí)例為大家分享了Android自定義View實(shí)現(xiàn)進(jìn)度條動(dòng)畫的具體代碼,供大家參考,具體內(nèi)容如下
控件效果
原理:
控制代碼/
/更新進(jìn)度值 val mHandler = object : Handler() { ? ? ? ? override fun handleMessage(msg: Message?) { ? ? ? ? ? ? progressView.setCurrentProgress(progress1.toFloat()) ? ? ? ? } ? ? } //開啟動(dòng)畫,更新進(jìn)度值 ?private fun progressAdd() { ? ? ? ? isAnimate = true ? ? ? ? progress1 = 0 ? ? ? ? Thread(Runnable { ? ? ? ? ? ? while (isAnimate) { ? ? ? ? ? ? ? ? Thread.sleep(random.nextInt(200).toLong()) ? ? ? ? ? ? ? ? progress1 += 1 ? ? ? ? ? ? ? ? mHandler.sendEmptyMessage(0) ? ? ? ? ? ? } ? ? ? ? }).start() ? ? } ?? ?//停止動(dòng)畫 ? ? private fun progressReduce() { ? ? ? ? isAnimate = false ? ? }
控件源碼:
public class ProgressView extends View { ? ? //前景顏色 ? ? private int FIRST_COLOR = 0xffFEA711; // ?0xff00574B;// ? ? //背景顏色 ? ? private int SECOND_COLOR = 0xffFBE39C; ? ? private int mSecondWidth; ? ? private int mFirstWidth; ? ? private int mHeight; ? ? private int mSecondRadius; ? ? private int mFirstRadius; ? ? private int progressPadding = 30; ? ? private float currentValue; ? ? private int maxProgress = 100; ? ? //畫筆 ? ? private Paint paint; ? ? private RectF rectF; ? ? private Bitmap leafBitmap; ? ? private int mLeafWidth; ? ? private int mLeafHeight; ? ? private List<Leaf> mLeafInfos; ? ? public ProgressView(Context context) { ? ? ? ? super(context, null); ? ? } ? ? public ProgressView(Context context, @Nullable AttributeSet attrs) { ? ? ? ? this(context, attrs, 0); ? ? } ? ? public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { ? ? ? ? super(context, attrs, defStyleAttr); ? ? ? ? paint = new Paint(); ? ? ? ? paint.setStyle(Paint.Style.FILL); ? ? ? ? paint.setColor(FIRST_COLOR); ? ? ? ? paint.setAntiAlias(true); ? ? ? ? rectF = new RectF(); ? ? ? ? leafBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.icon_leaf); ? ? ? ? mLeafWidth = leafBitmap.getWidth(); ? ? ? ? mLeafHeight = leafBitmap.getHeight(); ? ? ? ? Log.e("zhen", " mLeafWidth: " + mLeafWidth + " mLeafHeight: " + mLeafHeight); ? ? } ? ? @Override ? ? protected void onSizeChanged(int w, int h, int oldw, int oldh) { ? ? ? ? super.onSizeChanged(w, h, oldw, oldh); ? ? ? ? mHeight = h; ? ? ? ? //外圍 ? ? ? ? mSecondWidth = w; ? ? ? ? mSecondRadius = (int) ((mSecondWidth * 1f / 5) / 2); ? ? ? ? //內(nèi)部進(jìn)度條 ? ? ? ? mFirstWidth = mSecondWidth - progressPadding - mSecondRadius; ? ? ? ? mFirstRadius = mSecondRadius - progressPadding; ? ? ? ? mLeafInfos = new LeafFactory(mFirstRadius - mLeafWidth, 6).generateLeafs(); ? ? ? ? Log.e("zhen", " mSecondWidth: " + mSecondWidth + " mHeight: " + mHeight + ? ? ? ? ? ? ? ? " mSecondRadius: " + mSecondRadius + " mFirstWidth: " + mFirstWidth + " mFirstRadius: " + mFirstRadius); ? ? } ? ? public void setCurrentProgress(float currentProgress) { ? ? ? ? Log.e("zhen", "currentProgress: " + currentProgress); ? ? ? ? if (currentProgress > 100) return; ? ? ? ? currentValue = currentProgress / maxProgress * mFirstWidth; ? ? ? ? invalidate(); ? ? } ? ? @Override ? ? protected void onDraw(Canvas canvas) { ? ? ? ? super.onDraw(canvas); ? ? ? ? //畫布移動(dòng) ? ? ? ? canvas.translate(mSecondRadius, mHeight / 2); ? ? ? ? //畫背景左半圓 ? ? ? ? paint.setStyle(Paint.Style.FILL); ? ? ? ? paint.setColor(SECOND_COLOR); ? ? ? ? rectF.left = -mSecondRadius; ? ? ? ? rectF.top = -mSecondRadius; ? ? ? ? rectF.right = mSecondRadius; ? ? ? ? rectF.bottom = mSecondRadius; ? ? ? ? canvas.drawArc(rectF, 90, 180, false, paint); ? ? ? ? //畫背景右半圓 ? ? ? ? rectF.left = mSecondWidth - 3 * mSecondRadius; ? ? ? ? rectF.top = -mSecondRadius; ? ? ? ? rectF.right = mSecondWidth - mSecondRadius; ? ? ? ? rectF.bottom = mSecondRadius; ? ? ? ? canvas.drawArc(rectF, -90, 180, false, paint); ? ? ? ? //畫背景中間方形 ? ? ? ? rectF.left = 0; ? ? ? ? rectF.top = -mSecondRadius; ? ? ? ? rectF.right = mSecondWidth - 2 * mSecondRadius; ? ? ? ? rectF.bottom = mSecondRadius; ? ? ? ? canvas.drawRect(rectF, paint); ? ? ? ? //繪制進(jìn)度條半圓 ? ? ? ? paint.setColor(FIRST_COLOR); ? ? ? ? float leftValue = (mFirstRadius - currentValue) > 0 ? (mFirstRadius - currentValue) : 0; ? ? ? ? float angel = (float) Math.toDegrees(Math.acos(leftValue / mFirstRadius)); ? ? ? ? rectF.left = -mFirstRadius; ? ? ? ? rectF.top = -mFirstRadius; ? ? ? ? rectF.right = mFirstRadius; ? ? ? ? rectF.bottom = mFirstRadius; ? ? ? ? canvas.drawArc(rectF, 180 - angel, 2 * angel, false, paint); ? ? ? ? //繪制進(jìn)度條方形 ? ? ? ? if (currentValue >= mFirstRadius) { ? ? ? ? ? ? currentValue = currentValue > mFirstWidth ? mFirstWidth : currentValue; ? ? ? ? ? ? rectF.left = 0; ? ? ? ? ? ? rectF.top = -mFirstRadius; ? ? ? ? ? ? rectF.right = currentValue - mFirstRadius; ? ? ? ? ? ? rectF.bottom = mFirstRadius; ? ? ? ? ? ? canvas.drawRect(rectF, paint); ? ? ? ? } ? ? ? ? //落葉紛飛 ? ? ? ? if (currentValue > 0 && currentValue < mFirstWidth) { ? ? ? ? ? ? long currentTime = System.currentTimeMillis(); ? ? ? ? ? ? for (int i = 0; i < mLeafInfos.size(); i++) { ? ? ? ? ? ? ? ? Leaf leaf = mLeafInfos.get(i); ? ? ? ? ? ? ? ? int delay = (int) ((currentTime - leaf.startTime) % CIRCLE_TIME); ? ? ? ? ? ? ? ? leaf.x = mFirstWidth - mFirstRadius - delay * (mFirstWidth * 1f / CIRCLE_TIME); ? ? ? ? ? ? ? ? if (leaf.x + mFirstRadius + mLeafWidth < currentValue) continue; ? ? ? ? ? ? ? ? leaf.y = (float) (leaf.amplitude * Math.sin(2 * Math.PI / CIRCLE_TIME * delay + leaf.phaseOffeset)); ? ? ? ? ? ? ? ? Log.e("zhen", "延時(shí)ms數(shù)" + delay + " 角速度: " + (2 * Math.PI / CIRCLE_TIME) + " leaf.x: " + leaf.x + " leaf.y: " + leaf.y); ? ? ? ? ? ? ? ? // 通過Matrix控制葉子旋轉(zhuǎn) ? ? ? ? ? ? ? ? Matrix matrix = new Matrix(); ? ? ? ? ? ? ? ? matrix.postTranslate(leaf.x, leaf.y); ? ? ? ? ? ? ? ? // 根據(jù)葉子旋轉(zhuǎn)方向確定葉子旋轉(zhuǎn)角度 ? ? ? ? ? ? ? ? float rotate = leaf.rotateOrientation ? leaf.x % 360f : -leaf.x % 360; ? ? ? ? ? ? ? ? matrix.postRotate(rotate, leaf.x + mLeafWidth / 2, leaf.y + mLeafHeight / 2); ? ? ? ? ? ? ? ? Log.e("zhen", "落葉子旋轉(zhuǎn)角度: " + rotate); ? ? ? ? ? ? ? ? canvas.drawBitmap(leafBitmap, matrix, paint); ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? //繪制旋轉(zhuǎn)風(fēng)車 ? ? ? ? paint.setColor(Color.WHITE); ? ? ? ? paint.setStyle(Paint.Style.STROKE); ? ? ? ? paint.setStrokeWidth(10); ? ? ? ? float x = mSecondWidth - 2 * mSecondRadius; ? ? ? ? float y = 0; ? ? ? ? canvas.drawCircle(x, y, mSecondRadius, paint); ? ? ? ? paint.setStyle(Paint.Style.FILL); ? ? ? ? paint.setColor(0XFFFCD158); ? ? ? ? canvas.drawCircle(x, y, mSecondRadius - 5, paint); ? ? } ? ? @IntDef({Amplitude.SMALL, Amplitude.MIDDLE, Amplitude.LARGE}) ? ? public @interface Amplitude { ? ? ? ? int SMALL = 0; ? ? ? ? int MIDDLE = 1; ? ? ? ? int LARGE = 2; ? ? } ? ? public static class Leaf { ? ? ? ? public static long CIRCLE_TIME = 3000; //一個(gè)周期所需要的時(shí)間 ? ? ? ? //振幅大小 ? ? ? ? private int amplitude; ? ? ? ? //初始相位偏移 ? ? ? ? private int phaseOffeset; ? ? ? ? //旋轉(zhuǎn)方向 ? ? ? ? private boolean rotateOrientation; ? ? ? ? //延時(shí)時(shí)間 ? ? ? ? private long startTime; ? ? ? ? //x位置取決于初始位置偏移 ? ? ? ? private float x; ? ? ? ? //y位置取決于振幅,初始相位 ? ? ? ? private float y; ? ? ? ? @Override ? ? ? ? public String toString() { ? ? ? ? ? ? return "Leaf{" + ? ? ? ? ? ? ? ? ? ? "amplitude=" + amplitude + ? ? ? ? ? ? ? ? ? ? ", phaseOffeset=" + phaseOffeset + ? ? ? ? ? ? ? ? ? ? ", rotateOrientation=" + rotateOrientation + ? ? ? ? ? ? ? ? ? ? ", startTime=" + startTime + ? ? ? ? ? ? ? ? ? ? ", x=" + x + ? ? ? ? ? ? ? ? ? ? ", y=" + y + ? ? ? ? ? ? ? ? ? ? '}'; ? ? ? ? } ? ? } ? ? public static class LeafFactory { ? ? ? ? private Random random = new Random(); ? ? ? ? int randomValue; ? ? ? ? private int mHeight; ? ? ? ? private int mLeafSize; ? ? ? ? public LeafFactory(int mHeight, int mLeafSize) { ? ? ? ? ? ? this.mHeight = mHeight; ? ? ? ? ? ? this.mLeafSize = mLeafSize; ? ? ? ? } ? ? ? ? public List<Leaf> generateLeafs() { ? ? ? ? ? ? List<Leaf> mLeafsInfo = new ArrayList<>(); ? ? ? ? ? ? for (int i = 0; i < mLeafSize; i++) { ? ? ? ? ? ? ? ? mLeafsInfo.add(generateLeaf()); ? ? ? ? ? ? } ? ? ? ? ? ? return mLeafsInfo; ? ? ? ? } ? ? ? ? private Leaf generateLeaf() { ? ? ? ? ? ? Leaf leaf = new Leaf(); ? ? ? ? ? ? randomValue = random.nextInt(3); ? ? ? ? ? ? switch (randomValue) { ? ? ? ? ? ? ? ? case Amplitude.SMALL: ? ? ? ? ? ? ? ? ? ? leaf.amplitude = (int) (mHeight * 1f / 3); ? ? ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? ? case Amplitude.MIDDLE: ? ? ? ? ? ? ? ? ? ? leaf.amplitude = (int) (mHeight * 2f / 3); ? ? ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? ? case Amplitude.LARGE: ? ? ? ? ? ? ? ? ? ? leaf.amplitude = (int) (mHeight * 3f / 3); ? ? ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? } ? ? ? ? ? ? leaf.startTime = random.nextInt((int) CIRCLE_TIME); ? ? ? ? ? ? leaf.phaseOffeset = random.nextInt(8); ? ? ? ? ? ? leaf.rotateOrientation = random.nextBoolean(); ? ? ? ? ? ? Log.e("zhen", "生成一個(gè)葉子:" + leaf); ? ? ? ? ? ? return leaf; ? ? ? ? } ? ? } ? ?? }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android入門之彈出式對(duì)話框的實(shí)現(xiàn)
- Android入門之利用Spinner實(shí)現(xiàn)彈出選擇對(duì)話框
- Android對(duì)話框使用方法詳解
- Android自定義對(duì)話框的簡單實(shí)現(xiàn)
- 五分了解Android?Progress?Bar進(jìn)度條加載
- Android開發(fā)基礎(chǔ)使用ProgressBar加載進(jìn)度條示例
- Android實(shí)現(xiàn)簡單實(shí)用的垂直進(jìn)度條
- android實(shí)現(xiàn)簡單進(jìn)度條ProgressBar效果
- Jetpack Compose實(shí)現(xiàn)對(duì)話框和進(jìn)度條實(shí)例解析
相關(guān)文章
Android?性能優(yōu)化實(shí)現(xiàn)全量編譯提速的黑科技
這篇文章主要為大家介紹了Android?性能優(yōu)化實(shí)現(xiàn)全量編譯提速的黑科技,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Android Flutter實(shí)現(xiàn)點(diǎn)贊效果的示例代碼
點(diǎn)贊這個(gè)動(dòng)作不得不說在社交、短視頻等App中實(shí)在是太常見了。本文將利用Flutter制作出一個(gè)點(diǎn)贊動(dòng)畫效果,感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04ReactiveCocoa代碼實(shí)踐之-RAC網(wǎng)絡(luò)請(qǐng)求重構(gòu)
這篇文章主要介紹了ReactiveCocoa代碼實(shí)踐之-RAC網(wǎng)絡(luò)請(qǐng)求重構(gòu) 的相關(guān)資料,需要的朋友可以參考下2016-04-04Android Studio使用recyclerview實(shí)現(xiàn)展開和折疊功能(在之前的微信頁面基礎(chǔ)之上)
這篇文章主要介紹了Android Studio使用recyclerview實(shí)現(xiàn)展開和折疊(在之前的微信頁面基礎(chǔ)之上),本文通過截圖實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2020-03-03Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果
ViewPager是一個(gè)常用的Android組件,不過通常我們使用ViewPager的時(shí)候不能實(shí)現(xiàn)左右無限循環(huán)滑動(dòng),在滑到邊界的時(shí)候會(huì)看到一個(gè)不能翻頁的動(dòng)畫,可能影響用戶體驗(yàn),接下來通過本文給大家介紹Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果,一起看看吧2017-02-02