HarmonyOS鴻蒙之自定義屬性實現TitleBar
阿新 • • 發佈:2021-01-13
android上自定義屬性通過attrs.xml獲取,比如:
<declare-styleable name="View"> <attr name="id" format="reference" /> <attr name="background" format="reference|color" /> <attr name="padding" format="dimension" /> ... <attr name="focusable" format="boolean" /> ... </declare-styleable>
那如何在鴻蒙上使用自定義屬性呢?先上效果圖(專案地址:https://github.com/wshililei25/HarmonyOS_TitleBar)
1、自定義TitleBar繼承ComponentContainer
package com.hos.hostitlebar.widget; import com.hos.hostitlebar.ResourceTable; import ohos.agp.components.*; import ohos.agp.utils.Color; import ohos.app.Context; import java.util.Optional; public class HosTitleBar extends ComponentContainer { public HosTitleBar(Context context) { super(context); } public HosTitleBar(Context context, AttrSet attrSet) { super(context, attrSet); initView(context, attrSet); } public HosTitleBar(Context context, AttrSet attrSet, String styleName) { super(context, attrSet, styleName); initView(context, attrSet); } private void initView(Context context, AttrSet attrSet) { //動態載入layout Component component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_titlebar, null, false); Image backImage = (Image) component.findComponentById(ResourceTable.Id_backImage); Text titleText = (Text) component.findComponentById(ResourceTable.Id_titleText); Text rightText = (Text) component.findComponentById(ResourceTable.Id_rightText); //新增layout到父元件 addComponent(component); //設定TitleBar背景色 component.setBackground(attrSet.getAttr("bg_color").get().getElement()); //設定返回圖示 backImage.setImageElement(attrSet.getAttr("back_image").get().getElement()); //title字型樣式 titleText.setText(attrSet.getAttr("title_text").get().getStringValue()); titleText.setTextColor(attrSet.getAttr("title_color").get().getColorValue()); titleText.setTextSize(attrSet.getAttr("title_size").get().getIntegerValue(), Text.TextSizeType.FP); //副標題字型樣式 rightText.setText(attrSet.getAttr("right_text").get().getStringValue()); rightText.setTextColor(attrSet.getAttr("right_color").get().getColorValue()); rightText.setTextSize(attrSet.getAttr("right_size").get().getIntegerValue(), Text.TextSizeType.FP); } }
layout_titlebar.xml
<?xml version="1.0" encoding="utf-8"?> <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="50vp" ohos:width="match_parent" ohos:orientation="vertical"> <Image ohos:id="$+id:backImage" ohos:height="match_content" ohos:width="match_content" ohos:left_padding="15vp" ohos:vertical_center="true"/> <Text ohos:id="$+id:titleText" ohos:height="match_content" ohos:width="match_content" ohos:center_in_parent="true" ohos:text="TitleBar"/> <Text ohos:id="$+id:rightText" ohos:height="match_content" ohos:width="match_content" ohos:align_parent_right="true" ohos:right_padding="15vp" ohos:text="分享" ohos:vertical_center="true"/> </DependentLayout>
2、在layout.xml中引用
通過app:自定義屬性=""來引用,重要的在跟佈局新增 xmlns:app="http://schemas.android.com/apk/res/android",否則attrSet.getAttr()獲取不到
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:app="http://schemas.android.com/apk/res/android"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<com.hos.hostitlebar.widget.HosTitleBar
ohos:height="match_content"
ohos:width="match_parent"
app:back_image="$media:ic_back"
app:bg_color="$color:blue"
app:right_color="$color:white"
app:right_size="15"
app:right_text="分享"
app:title_color="$color:white"
app:title_size="18"
app:title_text="這是自定義屬性標題"/>
</DirectionalLayout>