Android模擬實現(xiàn)華為系統(tǒng)升級進度條
更新時間：2022年01月20日 16:03:41 作者：吐爾洪江Coding
這篇文章主要介紹了如何通過Android模擬實現(xiàn)華為在系統(tǒng)升級時顯示的進度條。文中的實現(xiàn)過程講解詳細，感興趣的小伙伴可以動手試一試
前言
之前用華為Android系統(tǒng)的時候總是會想到這種虛線進度條是怎么實現(xiàn)的，因為直接用canvas的drawArc方法畫出來的是實線，所以最近在網(wǎng)上搜了很多進度條相關的文章，也了解到了其中的原理，下面分享給大家。下面這兩篇文章是我之前寫的Android進度條相關的文章，有興趣的朋友們可以看看：
詳解Android如何自定義view實現(xiàn)圓形進度條
下面開始講解虛線進度條的實現(xiàn)方法，首先看一張圖：
實現(xiàn)步驟
大家可以先想想這種進度條是怎么實現(xiàn)的？網(wǎng)上有各種各樣的方法，也有人用path的lineTo()方法實現(xiàn)了類似的效果。但是我個人覺得canvas的drawArc方法也是個不錯的選擇，適合自己的才是最好的。
canvas.drawArc(rectF, 0, process, false, mPaint);
閱讀了大量文章，最后發(fā)現(xiàn)改變paint的樣式是最簡單好用的方法。給paint設置一個effect就好了。
1.用DashPathEffect給paint加上虛線效果
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{8, 6}, 0);
mPaintBack.setPathEffect(dashPathEffect);
build一下項目，看到的結果是這樣的：
能實現(xiàn)這個效果就大功告成了，如果看過我前面兩篇文章的朋友們就知道，后面的步驟就簡單了，加個進度條和動畫效果就可以了。
private void drawBack(Canvas canvas) {
RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
PathEffect effects = new DashPathEffect(new float[]{8, 6}, 0);
mPaintBack.setPathEffect(effects);
canvas.drawArc(rectF, 0, 360, false, mPaintBack);
}
2.畫出進度條
畫進度條和畫背景完全一樣，只是畫筆顏色和小點個數(shù)不一樣。
代碼如下：
private void drawProgress(Canvas canvas) {
RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
PathEffect effects = new DashPathEffect(new float[]{8, 6}, 0);
mPaint.setPathEffect(effects);
canvas.drawArc(rectF, 0, process, false, mPaint);
}
3.繪制文字
接下來是繪制文字，實現(xiàn)文字居中的效果。思路是計算出圓心，調用canvas.drawText的方法就能在canvas上面繪制文字了。這里不需要更新進度文字，所以就更省事了。
EMUI 下面的10.0.0也是一樣的方法，只是給Y坐標加一下55，往下移一點就好。
//繪制文字
private void drawText(Canvas canvas) {
int mTxtWidth = getTextWidth();
int mTxtHeight = getTextHeight();
int x = getWidth() / 2 - mTxtWidth / 2;
int y = getHeight() / 2 + mTxtHeight / 4;
canvas.drawText(getResources().getString(R.string.defaultTextEmui), x, y, mPaintText);
}
//繪制下方文字
private void drawTextBlow(Canvas canvas) {
int mTxtWidth = getTextWidthBlow();
int mTxtHeight = getTextHeight();
int x = getWidth() / 2 - mTxtWidth / 2;
int y = getHeight() / 2 + mTxtHeight / 4 + 55;
canvas.drawText(getResources().getString(R.string.defaultTextBelow), x, y, mPaintTextLevel);
}
4.加入動畫效果
/**
* 設置動畫效果
*/
public void start() {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 360);
valueAnimator.setDuration(duration);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(animation -> {
process = (int) animation.getAnimatedValue();
invalidate();
});
valueAnimator.start();
}
最終效果：
完整代碼
package com.example.floatingwindow.widget;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.PathEffect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.LinearInterpolator;
import androidx.annotation.Nullable;
import com.example.floatingwindow.R;
public class DottedLineProgressBar extends View {
private Paint mPaint;
private Paint mPaintBack;
private Paint mPaintText;
private Paint mPaintTextLevel;
private int strokeWidth = 30;
private int textSize = 22;
private int textSizeBlow = 15;
private long duration = 3500;
private int process;
public DottedLineProgressBar(Context context) {
super(context);
init();
}
public DottedLineProgressBar(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public DottedLineProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void setStrokeWidth(int width) {
strokeWidth = width;
}
public void setTextSize(int textSize) {
this.textSize = textSize;
}
public void setDuration(long duration) {
this.duration = duration;
}
public void setTextSizeBlow(int textSizeBlow) {
this.textSizeBlow = textSizeBlow;
}
//初始化畫筆
private void init() {
mPaintBack = new Paint();//圓角矩形
mPaintBack.setColor(getResources().getColor(R.color.gray));//圓角矩形顏色
mPaintBack.setAntiAlias(true);// 抗鋸齒效果
mPaintBack.setStyle(Paint.Style.STROKE);//設置畫筆樣式
mPaintBack.setStrokeWidth(strokeWidth);//設置畫筆寬度
mPaint = new Paint();
mPaint.setColor(getResources().getColor(R.color.blue));
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
mPaintText = new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setStyle(Paint.Style.FILL);
mPaintText.setColor(getResources().getColor(R.color.blue));
mPaintText.setTextSize(sp2px(textSize));
mPaintTextLevel = new Paint();
mPaintTextLevel.setAntiAlias(true);
mPaintTextLevel.setStyle(Paint.Style.FILL);
mPaintTextLevel.setColor(getResources().getColor(R.color.gray));
mPaintTextLevel.setTextSize(sp2px(textSizeBlow));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawBack(canvas);
drawProgress(canvas);
drawText(canvas);
drawTextBlow(canvas);
}
private void drawBack(Canvas canvas) {
RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
PathEffect effects = new DashPathEffect(new float[]{8, 6}, 0);
mPaintBack.setPathEffect(effects);
canvas.drawArc(rectF, 0, 360, false, mPaintBack);
}
private void drawProgress(Canvas canvas) {
RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
PathEffect effects = new DashPathEffect(new float[]{8, 6}, 0);
mPaint.setPathEffect(effects);
canvas.drawArc(rectF, 0, process, false, mPaint);
}
//繪制文字
private void drawText(Canvas canvas) {
int mTxtWidth = getTextWidth();
int mTxtHeight = getTextHeight();
int x = getWidth() / 2 - mTxtWidth / 2;
int y = getHeight() / 2 + mTxtHeight / 4;
canvas.drawText(getResources().getString(R.string.defaultTextEmui), x, y, mPaintText);
}
//繪制下方文字
private void drawTextBlow(Canvas canvas) {
int mTxtWidth = getTextWidthBlow();
int mTxtHeight = getTextHeight();
int x = getWidth() / 2 - mTxtWidth / 2;
int y = getHeight() / 2 + mTxtHeight / 4 + 55;
canvas.drawText(getResources().getString(R.string.defaultTextBelow), x, y, mPaintTextLevel);
}
private int getTextWidth() {
String text = getResources().getString(R.string.defaultTextEmui);
return (int) mPaintText.measureText(text, 0, text.length());
}
private int getTextWidthBlow() {
String text = getResources().getString(R.string.defaultTextBelow);
return (int) mPaintTextLevel.measureText(text, 0, text.length());
}
private int getTextHeight() {
Paint.FontMetrics fm = mPaintText.getFontMetrics();
return (int) Math.ceil(fm.descent - fm.ascent);
}
private int sp2px(int sp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,
getResources().getDisplayMetrics());
}
/**
* 設置動畫效果
*/
public void start() {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 360);
valueAnimator.setDuration(duration);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(animation -> {
process = (int) animation.getAnimatedValue();
invalidate();
});
valueAnimator.start();
}
}
kotlin調用：
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
dottedLineProgressBar.post {
dottedLineProgressBar.start()
}
}
}
XML:
<com.example.floatingwindow.widget.DottedLineProgressBar
android:id="@+id/dottedLineProgressBar"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center">
</com.example.floatingwindow.widget.DottedLineProgressBar>
以上就是完整的實現(xiàn)過程了。
項目源碼：https://gitee.com/tu_erhongjiang/android-progress-bar
到此這篇關于Android模擬實現(xiàn)華為系統(tǒng)升級進度條的文章就介紹到這了,更多相關Android進度條內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章就使用tablayout、scrollview來實現(xiàn)android錨點定位的功能。通過<a href="#head" rel="external nofollow" > 去設置頁面內錨點定位跳轉。具體實現(xiàn)思路大家跟隨腳本之家小編一起通過本文看下吧2018-07-07
Android使用ListView實現(xiàn)下拉刷新及上拉顯示更多的方法
這篇文章主要介紹了Android使用ListView實現(xiàn)下拉刷新及上拉顯示更多的方法,結合實例形式分析了ListView滾動刷新與加載的相關操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了Android帶進度的圓形進度條，實現(xiàn)自定義View，自定義屬性，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細介紹了Android使用網(wǎng)絡獲取定位的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了淺析Android手機衛(wèi)士之輸入框抖動和手機震動的相關資料,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了Flutter質感設計之持久底部面板，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Android開發(fā)實現(xiàn)Files文件讀取解析功能示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)Files文件讀取解析功能,結合實例形式分析了Android針對txt文本文件的讀取、保存功能實現(xiàn)方法與布局操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了Android小程序實現(xiàn)選項菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
最近在開發(fā)項目的時候，有一個需求是展示歷史搜索記錄 ，展示的樣式是流式布局（就是根據(jù)內容自動換行）。接下來通過本文給大家分享android流式布局實現(xiàn)歷史搜索記錄功能，感興趣的的小伙伴參考下2017-05-05
在Flutter中使用GestureDetector可以來完成對手勢的識別，包括長按、滑動、雙擊等手勢，這篇文章主要介紹了Flutter實現(xiàn)手勢識別功能2022-11-11