1. 程式人生 > 其它 >HarmonyOS鴻蒙之自定義屬性實現TitleBar

HarmonyOS鴻蒙之自定義屬性實現TitleBar

技術標籤:HarmonyOSapp

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>