日韩精品十区,亚洲深喉口爆,91香蕉,麻豆啪啪,亚洲黄色视频在线免费观看,国产婬乱片A片AAA毛姪片,色婷婷影院,男女操逼免费视频

在布局中使用自定義組件

開發(fā)一個自定義UI組件，當(dāng)然會希望在布局中像原生組件那樣使用它。就像下面這樣：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">    <Text        ohos:id="$+id:text_helloworld"        ohos:height="match_content"        ohos:width="match_content"        ohos:background_element="$graphic:background_ability_main"        ohos:layout_alignment="horizontal_center"        ohos:text="$string:HelloWorld"        ohos:text_size="50"        />    <com.components.cusomized.ArcProgressBarContainer        ohos:id="$+id:mrprogressId"        ohos:height="500vp"        ohos:width="match_parent"        ohos:background_element="#FFEEE20D">        <com.components.cusomized.ArcProgressBar            ohos:id="$+id:red_bar"            ohos:height="match_parent"            ohos:width="match_parent"            ohos:progress_element="#FF0000"            ohos:start_angle="45"            ohos:max_angle="270"            ohos:progress="20"            ohos:min = "0"            ohos:max = "100"            />        <com.components.cusomized.ArcProgressBar            ohos:id="$+id:green_bar"            ohos:height="match_parent"            ohos:width="match_parent"            ohos:progress_element="#00FF00"            ohos:start_angle="45"            ohos:max_angle="270"            ohos:progress="100"            ohos:min = "0"            ohos:max = "100"            />        <com.components.cusomized.ArcProgressBar            ohos:id="$+id:blue_bar"            ohos:height="match_parent"            ohos:width="match_parent"            ohos:progress_element="#00FFFF"            ohos:start_angle="45"            ohos:max_angle="270"            ohos:progress="50"            ohos:min = "0"            ohos:max = "100"            />    </com.components.cusomized.ArcProgressBarContainer>    <DirectionalLayout        ohos:height="match_content"        ohos:width="match_parent"        ohos:orientation="horizontal"        >        <Button            ohos:id="$+id:increase"            ohos:width="0"            ohos:weight="1"            ohos:height="match_content"            ohos:text_size="27fp"            ohos:text="+1"            ohos:text_color="#FFFFFF"            ohos:background_element="#00007F"            />        <Button            ohos:id="$+id:decrease"            ohos:width="0"            ohos:weight="1"            ohos:height="match_content"            ohos:text_size="27fp"            ohos:text="-1"            ohos:text_color="#FFFFFF"            ohos:background_element="#00007F"            ohos:left_margin="15vp"            ohos:bottom_margin="15vp"            ohos:right_padding="8vp"            ohos:left_padding="8vp"            />    </DirectionalLayout></DirectionalLayout>

上述代碼中16~54行定義了一個包含3個ArcProgressBar的ArcProgressBarContainer。ArcProgressBar的屬性借用的鴻蒙原生RoundProgressBar的屬性。以下是這個布局的效果。

自定義組件容器

組建容器類ArcProgressBarContainer負(fù)責(zé)協(xié)調(diào)每個ArcProgressBar的描畫動作。

public class ArcProgressBarContainer extends ComponentContainer implements Component.DrawTask {    // HiLogLabel    private static final HiLogLabel Label = new HiLogLabel(HiLog.LOG_APP, 0x00101, "RoundProgressBarContainer");    private int active_bar = 1;
    public ArcProgressBarContainer(Context context) {        super(context);        addDrawTask(this);    }
    public ArcProgressBarContainer(Context context, AttrSet attrSet) {        super(context, attrSet);        HiLog.warn(Label, attrSet.toString());        addDrawTask(this);    }
    public ArcProgressBarContainer(Context context, AttrSet attrSet, String styleName) {        super(context, attrSet, styleName);        addDrawTask(this);    }
    @Override    public 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 < getChildCount(); i++){            Component child = getComponentAt(i);            ((ArcProgressBar) child).onDraw(canvas, paint, getProgressRect(i), barWidth(), i == active_bar);        }        paint.setColor(Color.LTGRAY);    }
    private RectFloat getBoundRect(){        float width = getWidth();        float height = getHeight();        float size = Math.min(width, height);        float x_padding = (width - size) / 2;        float 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(getChildCount() > 0) {            return bound.getWidth() / 2 * 0.7f / getChildCount();        }        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;    }}

這段代碼的實現(xiàn)和上一篇文章中的RoundProgressBar基本相同，區(qū)別在于：

將基類由Component替換為ComponentContainer
使用ComponentContainer的子要素管理機制管理ArcProgressBar。

自定義進(jìn)度條類ArcProgressBar

ArcProgressBar負(fù)責(zé)實現(xiàn)單曲圓弧進(jìn)度條的顯示。代碼如下：

public class ArcProgressBar extends Component{    // HiLogLabel    private Color edgeColor;    private Color barColor;    private float minValue;    private float maxValue;    private float startAngle;    private float maxAngle;    private float progressValue;
    public ArcProgressBar(Context context) {        super(context);    }
    public ArcProgressBar(Context context, AttrSet attrSet) {        super(context, attrSet);        Initialize(attrSet);    }
    public ArcProgressBar(Context context, AttrSet attrSet, String styleName) {        super(context, attrSet, styleName);        Initialize(attrSet);    }
    public ArcProgressBar(Context context, AttrSet attrSet, int resId) {        super(context, attrSet, resId);        Initialize(attrSet);     }
    public void setValue(float value)    {        progressValue = value;        invalidate();    }
    public float getValue(){ return progressValue; }
    void onDraw(Canvas canvas, Paint paint, RectFloat rect, float width, boolean active){        float minAngle = startAngle - 90;        float sweepAngle = (progressValue - minValue)/(maxValue - minValue) * (maxAngle - minAngle);        if(active){            width *= 0.8f;        }        else{            width *= 0.6f;        }        paint.setColor(edgeColor);        paint.setStrokeWidth(width);        canvas.drawArc(rect, new Arc(minAngle, sweepAngle, false), paint);
        paint.setColor(barColor);        paint.setStrokeWidth(width * 0.8f);        canvas.drawArc(rect, new Arc(minAngle, sweepAngle, false), paint);    }
    private void Initialize(AttrSet attrSet){        edgeColor = Color.BLACK;        if(attrSet.getAttr("progress_element").isPresent()){            barColor = attrSet.getAttr("progress_element").get().getColorValue();        }else {            barColor = Color.GRAY;        }        if(attrSet.getAttr("start_angle").isPresent()){            startAngle = attrSet.getAttr("start_angle").get().getFloatValue();        }else {            startAngle = 0;        }        if(attrSet.getAttr("max_angle").isPresent()){            maxAngle = attrSet.getAttr("max_angle").get().getFloatValue();        }else {            maxAngle = 0;        }        if(attrSet.getAttr("min").isPresent()){            minValue = attrSet.getAttr("min").get().getFloatValue();        }else {            minValue = 0;        }        if(attrSet.getAttr("max").isPresent()){            maxValue = attrSet.getAttr("max").get().getFloatValue();        }else {            maxValue = 0;        }        if(attrSet.getAttr("progress").isPresent()){            progressValue = attrSet.getAttr("progress").get().getFloatValue();        }else {            progressValue = 0;        }    }}

最大的變化在于

ArcProgressBar繼承了Component
增加了一個Initialize方法用于獲取布局文件中指定的屬性值。

在代碼中使用ArcProgressBar

可以像系統(tǒng)原生UI組件一樣使用自定義組件：

public class MainAbilitySlice extends AbilitySlice {    @Override    public void onStart(Intent intent) {        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_main);
        ArcProgressBar bar = (ArcProgressBar) findComponentById(ResourceTable.Id_green_bar);        Button increase = (Button)findComponentById(ResourceTable.Id_increase);        increase.setClickedListener(new Component.ClickedListener(){            @Override            public void onClick(Component component) {                bar.setValue(bar.getValue() + 1);            }        });        Button decrease = (Button)findComponentById(ResourceTable.Id_decrease);        decrease.setClickedListener(new Component.ClickedListener(){            @Override            public void onClick(Component component) {                bar.setValue(bar.getValue() - 1);            }        });    }
    @Override    public void onActive() {        super.onActive();    }
    @Override    public void onForeground(Intent intent) {        super.onForeground(intent);    }}

下面這段代碼的動作效果視頻：

參考代碼

完整代碼可以從以下鏈接下載：

https://github.com/xueweiguo/Harmony/tree/master/CustomizeComponent

作者著作介紹

《實戰(zhàn)Python設(shè)計模式》是作者去年3月份出版的技術(shù)書籍，該書利用Python 的標(biāo)準(zhǔn)GUI 工具包tkinter，通過可執(zhí)行的示例對23 個設(shè)計模式逐個進(jìn)行說明。這樣一方面可以使讀者了解真實的軟件開發(fā)工作中每個設(shè)計模式的運用場景和想要解決的問題；另一方面通過對這些問題的解決過程進(jìn)行說明，讓讀者明白在編寫代碼時如何判斷使用設(shè)計模式的利弊，并合理運用設(shè)計模式。

對設(shè)計模式感興趣而且希望隨學(xué)隨用的讀者通過本書可以快速跨越從理解到運用的門檻；希望學(xué)習(xí)Python GUI 編程的讀者可以將本書中的示例作為設(shè)計和開發(fā)的參考；使用Python 語言進(jìn)行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎(chǔ)，迅速構(gòu)建自己的系統(tǒng)架構(gòu)。

覺得本文有幫助？請分享給更多人。

關(guān)注微信公眾號【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天！

面向?qū)ο箝_發(fā)，面向?qū)ο笏伎迹?/span>

自學(xué)鴻蒙應(yīng)用開發(fā)（33）- 在布局中使用自定義UI組件