自學鴻蒙應用開發(fā)（31）- 為UI組件定義描畫動作
準備描畫接口
UI組件的描畫動作由應用架構觸發(fā)，而自定義組件的開發(fā)者只要實現(xiàn)并登錄描畫接口即可。
下面的代碼通過多重繼承實現(xiàn)UI組件的描畫接口Component.DrawTask之后在第9行構造函數(shù)中為自定義組件執(zhí)行描畫處理。
public class MultiRoundProgressBar extends Component implements Component.DrawTask {// HiLogLabelprivate static final HiLogLabel Label = new HiLogLabel(HiLog.LOG_APP, 0x00101, "MultiRoundProgressBar");private float minAngle = 30;private float maxAngle = 360;public MultiRoundProgressBar(Context context) {super(context);addDrawTask(this);}
需要說明，這種指定描畫的方式并沒有要求一定使用實現(xiàn)接口的方式。開發(fā)者完全可以單獨實現(xiàn)一個描畫類并同樣調(diào)用addDrawTask將該類對象指定給UI組件類。這種方式的描畫類更為獨立，更容易重用。
實現(xiàn)描畫動作
實現(xiàn)Component.DrawTask的主要工作就是編寫onDraw方法。
@Overridepublic void onDraw(Component component, Canvas canvas) {Paint paint = new Paint();paint.setColor(Color.WHITE);canvas.drawRect(getProgressRect(0), paint);paint.setStyle(Paint.Style.STROKE_STYLE);paint.setStrokeCap(Paint.StrokeCap.SQUARE_CAP);drawProgressBar(canvas, paint, 1, Color.BLACK, Color.LTGRAY, 25, 0, 100);drawProgressBar(canvas, paint, 2, Color.BLACK, Color.RED, 50, 0, 100);drawProgressBar(canvas, paint, 3, Color.BLACK, Color.CYAN, 100, 0, 100);}
這段代碼的功能就是描畫3個圓形的Progressbar，顯示效果如下：
代碼中使用了getProgressRect和drawProgressBar兩個方法，內(nèi)容主要是使用Cavas,Paint類進行基本都描畫動作。如果必要可以自行理解。
private RectFloat getProgressRect(int round_index){int width = getWidth();int height = getHeight();int size = Math.min(width, height);int x_padding = (width - size) / 2;int y_padding = (height - size) / 2;int stoke_width = 20;RectFloat arcRect = new RectFloat(x_padding, y_padding, width - x_padding, height - y_padding);arcRect.shrink(stoke_width * round_index * 2 * 2, stoke_width * round_index * 2 * 2);return arcRect;}private void drawProgressBar(Canvas canvas, Paint paint, int index, Color edge, Color bar, float value, float min, float max){float startAngle = minAngle - 90;float sweepAngle = (value - min)/(max - min) * (maxAngle - minAngle);RectFloat arc_rect = getProgressRect(index);paint.setColor(edge);paint.setStrokeWidth(50);canvas.drawArc(arc_rect, new Arc(startAngle, sweepAngle, false), paint);paint.setColor(bar);paint.setStrokeWidth(40);canvas.drawArc(arc_rect, new Arc(startAngle, sweepAngle, false), paint);}
參考代碼
完整代碼可以從以下鏈接下載：
https://github.com/xueweiguo/Harmony/tree/master/CustomizeComponent
作者著作介紹
《實戰(zhàn)Python設計模式》是作者去年3月份出版的技術書籍，該書利用Python 的標準GUI 工具包tkinter，通過可執(zhí)行的示例對23 個設計模式逐個進行說明。這樣一方面可以使讀者了解真實的軟件開發(fā)工作中每個設計模式的運用場景和想要解決的問題；另一方面通過對這些問題的解決過程進行說明，讓讀者明白在編寫代碼時如何判斷使用設計模式的利弊，并合理運用設計模式。
對設計模式感興趣而且希望隨學隨用的讀者通過本書可以快速跨越從理解到運用的門檻；希望學習Python GUI 編程的讀者可以將本書中的示例作為設計和開發(fā)的參考；使用Python 語言進行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎，迅速構建自己的系統(tǒng)架構。
覺得本文有幫助？請分享給更多人。
關注微信公眾號【面向?qū)ο笏伎肌枯p松學習每一天！
面向?qū)ο箝_發(fā)，面向?qū)ο笏伎迹?/span>