自學(xué)鴻蒙應(yīng)用開發(fā)（32）- 為UI組件定義接口
前一篇文章為自定義組件實(shí)現(xiàn)了描畫功能，但是代碼中的描畫動作都是硬編碼，無法由開發(fā)者控制。本文對之前的代碼進(jìn)行重構(gòu)，以對外提供控制接口。
定義RoundProgressBar內(nèi)部類
定義一個實(shí)現(xiàn)單個進(jìn)度條功能的內(nèi)部類，用于管理每個進(jìn)度條的邊緣顏色，內(nèi)部顏色，最大值，最小值和當(dāng)前值。
class RoundProgressBar{MultiRoundProgressBar ownerBar;private Color edgeColor;private Color barColor;private float minValue;private float maxValue;private float progressValue;RoundProgressBar(MultiRoundProgressBar owner, Color edge, Color bar, float min, float max){ownerBar = owner;edgeColor = edge;barColor = bar;minValue = min;maxValue = max;progressValue = 0;}void setValue(float value){progressValue = value;}void onDraw(Canvas canvas, Paint paint, RectFloat rect, float width, boolean active){float startAngle = ownerBar.minAngle - 90;float sweepAngle = (progressValue - minValue)/(maxValue - minValue) * (ownerBar.maxAngle - ownerBar.minAngle);if(active){width *= 0.8f;}else{width *= 0.6f;}paint.setColor(edgeColor);paint.setStrokeWidth(width);canvas.drawArc(rect, new Arc(startAngle, sweepAngle, false), paint);paint.setColor(barColor);paint.setStrokeWidth(width * 0.8f);canvas.drawArc(rect, new Arc(startAngle, sweepAngle, false), paint);}}
重構(gòu)MultiRoundProgressBar
增加List成員，以管理RoundProgressBar對象；增加active_bar對象，以管理當(dāng)前激活的進(jìn)度條。
List<RoundProgressBar> barList;private int active_bar = 0;
增加addBar和setValue方法，用于增加進(jìn)度條和設(shè)定進(jìn)度值。
public void addBar(Color edge, Color bar, float min, float max){barList.add(new RoundProgressBar(this, edge, bar, min, max));}public void setValue(int index, float value){barList.get(index).setValue(value);}
重構(gòu)描畫相關(guān)方法：
@Overridepublic void onDraw(Component component, Canvas canvas) {Paint paint = new Paint();paint.setColor(Color.WHITE);canvas.drawRect(getBoundRect(), paint);paint.setStyle(Paint.Style.STROKE_STYLE);paint.setStrokeCap(Paint.StrokeCap.SQUARE_CAP);for(int i = 0; i < barList.size(); i++){barList.get(i).onDraw(canvas, paint, getProgressRect(i), barWidth(), i==active_bar);}}private RectFloat getBoundRect(){int width = getWidth();int height = getHeight();int size = Math.min(width, height);int x_padding = (width - size) / 2;int y_padding = (height - size) / 2;return new RectFloat(x_padding, y_padding, width - x_padding, height - y_padding);}private float barWidth(){RectFloat bound = getBoundRect();if(barList.size() > 0) {return bound.getWidth() / 2 * 0.7f / barList.size();}else{return 0;}}private RectFloat getProgressRect(int round_index){RectFloat arcRect = getBoundRect();arcRect.shrink(barWidth(), barWidth());arcRect.shrink(barWidth() * round_index, barWidth() * round_index);return arcRect;}
使用自定義接口
下面的代碼增加增加4個進(jìn)度條并指定當(dāng)前值。增加進(jìn)度條是可以指定邊界顏色，進(jìn)度條顏色，最大值和最小值。
public class MainAbilitySlice extends AbilitySlice {public void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);MultiRoundProgressBar bar = (MultiRoundProgressBar) findComponentById(ResourceTable.Id_mrprogressId);bar.addBar(Color.BLACK, Color.LTGRAY, 0, 100);bar.setValue(0, 50);bar.addBar(Color.BLUE, Color.WHITE, 0, 100);bar.setValue(1, 60);bar.addBar(Color.BLACK, Color.CYAN, 0, 100);bar.setValue(2, 70);bar.addBar(Color.BLACK, Color.RED, 0, 100);bar.setValue(3, 80);}}
效果展示
下面的代碼執(zhí)行之后的效果：
最外層的灰色進(jìn)度條處于活動狀態(tài)。
參考代碼
完整代碼可以從以下鏈接下載：
https://github.com/xueweiguo/Harmony/tree/master/CustomizeComponent
作者著作介紹
《實(shí)戰(zhàn)Python設(shè)計(jì)模式》是作者去年3月份出版的技術(shù)書籍，該書利用Python 的標(biāo)準(zhǔn)GUI 工具包tkinter，通過可執(zhí)行的示例對23 個設(shè)計(jì)模式逐個進(jìn)行說明。這樣一方面可以使讀者了解真實(shí)的軟件開發(fā)工作中每個設(shè)計(jì)模式的運(yùn)用場景和想要解決的問題；另一方面通過對這些問題的解決過程進(jìn)行說明，讓讀者明白在編寫代碼時(shí)如何判斷使用設(shè)計(jì)模式的利弊，并合理運(yùn)用設(shè)計(jì)模式。
對設(shè)計(jì)模式感興趣而且希望隨學(xué)隨用的讀者通過本書可以快速跨越從理解到運(yùn)用的門檻；希望學(xué)習(xí)Python GUI 編程的讀者可以將本書中的示例作為設(shè)計(jì)和開發(fā)的參考；使用Python 語言進(jìn)行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎(chǔ)，迅速構(gòu)建自己的系統(tǒng)架構(gòu)。
覺得本文有幫助？請分享給更多人。
關(guān)注微信公眾號【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天！
面向?qū)ο箝_發(fā)，面向?qū)ο笏伎迹?/span>