[[384269]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

基于安卓平臺(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)的組件，通常用于向用戶顯示某個(gè)耗時(shí)操作完成的百分比，例如：加載狀態(tài)、下載進(jìn)度、刷新網(wǎng)頁(yè)等。進(jìn)度輪可以動(dòng)態(tài)地顯示操作進(jìn)度，避免用戶誤以為程序失去響應(yīng)，從而更好地提高用戶界面的友好性。

組件功能展示

基于鴻蒙系統(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”用戶可以隨時(shí)停止旋轉(zhuǎn)，效果如圖1所示。進(jìn)度輪旋轉(zhuǎn)功能主要用于展示服務(wù)器正在加載數(shù)據(jù)的狀態(tài)，此時(shí)的作用和加載動(dòng)畫庫(kù)AVLoadingIndicatorView類似。

圖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中向用戶提供了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類的開(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 類產(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)實(shí)現(xiàn)的，在該類中首先聲明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í)在不同的位置畫進(jìn)度條 
        if (isSpinning) { 
            scheduleRedraw(); 
        } 
    }; 
    addDrawTask(task); 
} 

(2)進(jìn)度輪旋轉(zhuǎn)

該功能只提供給用戶進(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ù)，用戶可以清晰地了解當(dāng)前的線程進(jìn)度，是一種對(duì)用戶更友好的交互模式。

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ù)方法需要重寫，如處理進(jìn)度輪旋轉(zhuǎn)的時(shí)候重寫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) 
        { 
            //更新畫進(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ū)

https://harmonyos.51cto.com