鴻蒙開(kāi)源第三方組件-進(jìn)度輪ProgressWheel
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
前言
基于安卓平臺(tái)的進(jìn)度輪組件ProgressWheel(https://github.com/Alford087/ProgressWheel)，實(shí)現(xiàn)了鴻蒙化遷移和重構(gòu)，代碼已經(jīng)開(kāi)源到(https://gitee.com/isrc_ohos/progress-wheel_ohos)，歡迎各位下載使用并提出寶貴意見(jiàn)!
背景
進(jìn)度輪是UI界面中常見(jiàn)的組件，通常用于向用戶(hù)顯示某個(gè)耗時(shí)操作完成的百分比，例如：加載狀態(tài)、下載進(jìn)度、刷新網(wǎng)頁(yè)等。進(jìn)度輪可以動(dòng)態(tài)地顯示操作進(jìn)度，避免用戶(hù)誤以為程序失去響應(yīng)，從而更好地提高用戶(hù)界面的友好性。
組件功能展示
基于鴻蒙系統(tǒng)，通過(guò)自定義控件屬性的方式實(shí)現(xiàn)了進(jìn)度輪組件，該組件支持進(jìn)度輪的旋轉(zhuǎn)、進(jìn)度增加兩種功能。
1、旋轉(zhuǎn)
點(diǎn)擊“Start spinning”按鈕，此時(shí)進(jìn)度輪會(huì)開(kāi)始旋轉(zhuǎn)，在旋轉(zhuǎn)過(guò)程中按鈕上的“Start spinning”變成“Stop spinning”，點(diǎn)擊“Stop spinning”用戶(hù)可以隨時(shí)停止旋轉(zhuǎn)，效果如圖1所示。進(jìn)度輪旋轉(zhuǎn)功能主要用于展示服務(wù)器正在加載數(shù)據(jù)的狀態(tài)，此時(shí)的作用和加載動(dòng)畫(huà)庫(kù)AVLoadingIndicatorView類(lèi)似。
圖1 進(jìn)度輪旋轉(zhuǎn)
2、進(jìn)度增加
點(diǎn)擊“Increment”按鈕，進(jìn)度輪會(huì)定量增加進(jìn)度，進(jìn)度值會(huì)實(shí)時(shí)顯示在進(jìn)度輪的中間，效果如圖2所示，進(jìn)度增加功能主要用于展示服務(wù)器加載數(shù)據(jù)的進(jìn)度。
圖2 按鈕控制進(jìn)度增加
Sample解析
在Sample中向用戶(hù)提供了5個(gè)場(chǎng)景，分別是：(1)進(jìn)度輪旋轉(zhuǎn)、(2)按鈕控制進(jìn)度增加、(3)原生進(jìn)度條控制進(jìn)度增加、(4)背景改變、(5)樣式改變。其中(1)、(2)兩種場(chǎng)景較為簡(jiǎn)單，均為按鈕觸發(fā)，調(diào)用ProgressWheel類(lèi)的開(kāi)始旋轉(zhuǎn)、進(jìn)度增加方法即可，在Library解析部分會(huì)詳解解釋。此處重點(diǎn)介紹(3)、(4)、(5)三種場(chǎng)景。
1、原生進(jìn)度條控制進(jìn)度增加
圖3 原生進(jìn)度條控制進(jìn)度增加
原生進(jìn)度條是指鴻蒙系統(tǒng)的基本組件slider，它也可以用于顯示內(nèi)容加載或操作處理的進(jìn)度，此處我們通過(guò)拖動(dòng)原生進(jìn)度條來(lái)改變進(jìn)度輪的進(jìn)度值，并將進(jìn)度值實(shí)時(shí)顯示。效果如圖3所示，代碼實(shí)現(xiàn)如下：
- @Override
- public void onProgressUpdated(Slider seekBar, int i, boolean b){
- //原生進(jìn)度條和進(jìn)度輪換算，100代表原生進(jìn)度條的進(jìn)度最大值，360代表進(jìn)度輪的進(jìn)度最大值
- double progress = 360.0 * (seekBar.getProgress() / 100.0);
- //進(jìn)度輪進(jìn)度設(shè)置
- wheel.setProgress((int) progress);
- }
2、背景改變
圖4 進(jìn)度輪背景改變
使用Random 類(lèi)產(chǎn)生隨機(jī)數(shù)，特定處理后作為背景像素點(diǎn)。點(diǎn)擊“Random bg”按鈕，背景像素點(diǎn)顯示，進(jìn)度輪的背景會(huì)發(fā)生隨機(jī)變化。效果如圖4所示。代碼如下：
- //背景改變
- private static void randomBg(ProgressWheel wheel) {
- //隨機(jī)產(chǎn)生背景元素
- Random random = new Random();
- int firstColour = random.nextInt();//隨機(jī)數(shù)獲取
- int secondColour = random.nextInt();
- int patternSize = (1 + random.nextInt(3)) * 8;//隨機(jī)數(shù)處理
- int patternChange = (1 + random.nextInt(3)) * 8;
- int[] pixels = new int[patternSize];
- for (int i = 0; i < patternSize; i++) {
- pixels[i] = (i > patternChange) ? firstColour : secondColour;//得到像素點(diǎn)
- }
- PixelMap.InitializationOptions options=new PixelMap.InitializationOptions();
- options.size=new Size(1,patternSize);
- options.pixelFormat=PixelFormat.ARGB_8888;
- //設(shè)置背景元素
- wheel.setRimShader(new PixelMapShader(
- new PixelMapHolder(PixelMap.create(pixels, options)),
- Shader.TileMode.REPEAT_TILEMODE,
- Shader.TileMode.REPEAT_TILEMODE), Paint.ShaderType.RADIAL_SHADER);
- }
3、樣式改變
圖5 進(jìn)度輪樣式改變
通過(guò)自定義進(jìn)度輪的長(zhǎng)度、寬度、背景等來(lái)設(shè)計(jì)不同的樣式，點(diǎn)擊“A different style”按鈕觸發(fā)樣式改變，效果如圖5所示，代碼如下：
- //樣式改變
- private static void styleRandom(ProgressWheel wheel, Context ctx) {
- wheel.setRimShader(null, Paint.ShaderType.RADIAL_SHADER);
- wheel.setRimColor(0xFFFFFFFF);
- wheel.setCircleColor(0x00000000);//內(nèi)圓顏色
- wheel.setBarColor(0xFF000000);//進(jìn)度輪體顏色
- wheel.setContourColor(0xFFFFFFFF);//外圓顏色
- wheel.setBarWidth(pxFromDp(ctx, 8));//寬度
- wheel.setBarLength(pxFromDp(ctx, 100));//長(zhǎng)度
- wheel.setSpinSpeed(2);//旋轉(zhuǎn)速度
- wheel.setDelayMillis(3);//間隔時(shí)間
- }
Library解析
1.功能實(shí)現(xiàn)
(1)進(jìn)度輪繪制。
該功能是通過(guò)ProgressWheel類(lèi)來(lái)實(shí)現(xiàn)的，在該類(lèi)中首先聲明setupBounds()、setupPaints()方法，后使用canvas繪制進(jìn)度輪，設(shè)定內(nèi)圓、外圓、條紋等、文字等屬性。文字用于顯示進(jìn)度輪的屬性值，不局限于顯示當(dāng)前進(jìn)度。
- public ProgressWheel(Context context) {
- super(context);
- DrawTask task = (component, canvas) -> {
- //初始化元素邊界
- setupBounds();
- //初始化繪制屬性
- setupPaints();
- //繪制內(nèi)圓
- canvas.drawArc(innerCircleBounds, new Arc(360, 360, false), circlePaint);
- //繪制外圓
- canvas.drawArc(circleBounds, new Arc(360, 360, false), rimPaint);
- canvas.drawArc(circleOuterContour, new Arc(360, 360, false), contourPaint);
- //繪制條紋
- if (isSpinning) {
- canvas.drawArc(circleBounds, new Arc(progress - 90, barLength, false), barPaint);
- } else {
- canvas.drawArc(circleBounds, new Arc(-90, progress, false), barPaint);
- }
- //設(shè)置文字于圓心處顯示
- float textHeight = textPaint.descent() - textPaint.ascent();
- float verticalTextOffset = (textHeight / 2) - textPaint.descent();
- for (String line : splitText) {
- float horizontalTextOffset = textPaint.measureText(line) / 2;
- canvas.drawText(
- textPaint,
- line,
- (float) component.getWidth() / 2 - horizontalTextOffset,
- (float) component.getHeight() / 2 + verticalTextOffset);
- }
- //旋轉(zhuǎn)時(shí)在不同的位置畫(huà)進(jìn)度條
- if (isSpinning) {
- scheduleRedraw();
- }
- };
- addDrawTask(task);
- }
(2)進(jìn)度輪旋轉(zhuǎn)
該功能只提供給用戶(hù)進(jìn)度輪旋轉(zhuǎn)的展示形式，不提供當(dāng)前線程的量化進(jìn)度。
1)開(kāi)始旋轉(zhuǎn)。進(jìn)度輪進(jìn)入旋轉(zhuǎn)模式時(shí)，需要開(kāi)辟新的線程，每隔一定時(shí)間重新繪制進(jìn)度,來(lái)達(dá)到旋轉(zhuǎn)的效果。
- public void startSpinning() {
- isSpinning = true;//設(shè)置當(dāng)前為旋轉(zhuǎn)狀態(tài)
- pinHandler.sendEvent(0);//更新進(jìn)度
- }
2）停止旋轉(zhuǎn)。進(jìn)度輪停止旋轉(zhuǎn)時(shí)，進(jìn)度值被置零。
- public void stopSpinning() {
- isSpinning = false;//設(shè)置當(dāng)前為停止?fàn)顟B(tài)
- progress = 0;//進(jìn)度清零
- invalidate();
- }
(3)進(jìn)度增加
該功能需提前設(shè)定好增量，每次增加固定的進(jìn)度，進(jìn)度的最大值設(shè)置為360，當(dāng)超過(guò)最大值時(shí)，進(jìn)度值被置零。該模式在旋轉(zhuǎn)時(shí)提供當(dāng)前的量化進(jìn)度數(shù)據(jù)，用戶(hù)可以清晰地了解當(dāng)前的線程進(jìn)度，是一種對(duì)用戶(hù)更友好的交互模式。
- public void incrementProgress(int amount) {
- isSpinning = false;//增加進(jìn)度時(shí)進(jìn)度輪不旋轉(zhuǎn)
- progress+= amount;//定量增加
- if (progress > 360){
- progress %= 360;//超過(guò)360會(huì)自動(dòng)重置
- }
- invalidate();
- }
2.移植方法
本組件在移植時(shí)大部分采用API替換的方法，少數(shù)方法需要重寫(xiě)，如處理進(jìn)度輪旋轉(zhuǎn)的時(shí)候重寫(xiě)spinHandler()方法，該方法的功能是：進(jìn)度輪旋轉(zhuǎn)時(shí)在不同的像素位置繪制進(jìn)度條，移動(dòng)的位置超過(guò)360度則置為0度，重新旋轉(zhuǎn)。代碼如下：
- //每次繪制要移動(dòng)的像素?cái)?shù)目
- private float spinSpeed = 2f;
- //繪制過(guò)程的時(shí)間間隔
- private int delayMillis = 100;
- private EventHandler spinHandler = new EventHandler(EventRunner.getMainEventRunner())
- {
- @Override
- public void processEvent(InnerEvent msg)
- {
- invalidate();
- if (isSpinning)
- {
- //更新畫(huà)進(jìn)度的位置
- progress += spinSpeed;
- //要移動(dòng)的像素?cái)?shù)目超過(guò)360則重置
- if (progress > 360)
- {
- progress = 0;
- }
- spinHandler.sendEvent(0, delayMillis);
- }
- super.processEvent(msg);
- }
- };
項(xiàng)目貢獻(xiàn)人
劉磊 鄭森文 朱偉 陳美汝 張馨心
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
