harmony 鸿蒙Custom Window Title Bar Development

  • 2023-10-30
  • 浏览 (449)

Custom Window Title Bar Development

Overview

While OpenHarmony provides default UX styles for window title bars, it allows device vendors to develop custom window title bars to meet specific needs.

Development Guidelines

How to Develop

Perform the following steps: 1. In MaximizeMode (in frameworks/core/components/common/layout/constants.h), define the enums, for example, MODE_AVOID_SYSTEM_BAR and MODE_FULL_FILL. cpp enum class MaximizeMode : uint32_t { MODE_AVOID_SYSTEM_BAR, MODE_FULL_FILL, MODE_RECOVER, }; 2. In ContainerModalViewFactory::GetView (in foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal/container_modal_view_factory.h), add the creation of the custom window title bar based on the current value of MaximizeMode. > icon-note.gif NOTE > > The ContainerModalViewFactory::GetView method is a factory method. Below shows the method expanded:

```cpp
    class ACE_EXPORT ContainerModalViewFactory {
    public:
        static RefPtr<FrameNode> GetView(RefPtr<FrameNode>& content, MaximizeMode mode) {
            if (mode == MaximizeMode::MODE_AVOID_SYSTEM_BAR||
                mode == MaximizeMode::MODE_FULL_FILL) {
                return ContainerModalViewEnhance::Create(content);
            } else {
                return ContainerModalView::Create(content);
            }
         }
    };
```

In the preceding example, vendor enhance creates a custom title bar branch based on the value of MaximizeMode (MaximizeMode::MODE_AVOID_SYSTEM_BAR or MaximizeMode::MODE_FULL_FILL).

  1. Create a folder in the foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal directory to store your custom title bar code. > icon-note.gif NOTE >
    > The structure of the container_modal folder is as follows:

    ├── container_modal_accessibility_property.cpp
    ├── container_modal_accessibility_property.h
    ├── container_modal_pattern.cpp
    ├── container_modal_pattern.h
    ├── container_modal_view.cpp
    ├── container_modal_view_factory.h
    ├── container_modal_view.h
    └── enhance
        ├── container_modal_pattern_enhance.cpp
        ├── container_modal_pattern_enhance.h
        ├── container_modal_view_enhance.cpp
        └── container_modal_view_enhance.h
    

    The containermodal* files in the container_modal folder contain the code related to the default title bar view. You can add your custom code files in the created folder, enhance in this example.

  2. Complete build configuration for the new .cpp files in foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn.

When your development of the custom title bar is complete, debug and verify the title bar.

Debugging and Verification

Before the verification, prepare the following files (which must be stored in the same path): - open_maximize.bat

Below shows the content of this file:

```shell
hdc shell mount -o rw,remount /sys_prod
hdc file send window_manager_config_open.xml sys_prod/etc/window/resources/window_manager_config.xml
hdc shell reboot
```
  • window_manager_config_open.xml

    Below shows the content of this file:

    <?xml version="1.0" encoding="utf-8"?>
        <Configs>
          <decor enable="true"/>
          <modeChangeHotZones>50 50 50</modeChangeHotZones>
          <maxFloatingWidth>1706</maxFloatingWidth>
          <maxFloatingHeight>1000</maxFloatingHeight>
          <minFloatingWidth>398</minFloatingWidth>
          <minFloatingHeight>528</minFloatingHeight>
          <floatingBottomPosY>0</floatingBottomPosY>
          <defaultFloatingWindow>82 121 1068 706</defaultFloatingWindow>
          <defaultWindowMode>102</defaultWindowMode>
          <defaultMaximizeMode>0</defaultMaximizeMode>
          <dragFrameGravity>5</dragFrameGravity>
          <maxUniRenderAppWindowNumber>10</maxUniRenderAppWindowNumber>
          <maxFloatingWindowSize>2880</maxFloatingWindowSize>
          <splitRatios>0.5 0.33 0.67</splitRatios>
          <keyboardAnimation>
            <timing>
              <durationIn>500</durationIn>
              <durationOut>150</durationOut>
              <curve name="cubic">0.2 0.0 0.2 1.0</curve>
            </timing>
          </keyboardAnimation>
          <windowAnimation>
            <timing>
              <duration>200</duration>
              <curve name="cubic">0.0 0.0 0.2 1.0</curve>
            </timing>
            <scale>0.9 0.9</scale>
            <rotation>0 0 1 0</rotation>
            <translate>0 0</translate>
            <opacity>0</opacity>
          </windowAnimation>
          <windowEffect>
            <appWindows>
              <cornerRadius>
                <fullScreen>off</fullScreen>
                <split>off</split>
                <float>defaultCornerRadiusL</float>
              </cornerRadius>
              <shadow>
                <focused>
                  <elevation>0</elevation>
                  <color>#000000</color>
                  <offsetX>0</offsetX>
                  <offsetY>15</offsetY>
                  <alpha>0.4</alpha>
                  <radius>34</radius>
                </focused>
                <unfocused>
                  <elevation>0</elevation>
                  <color>#000000</color>
                  <offsetX>0</offsetX>
                  <offsetY>15</offsetY>
                  <alpha>0.2</alpha>
                  <radius>17</radius>
                </unfocused>
              </shadow>
            </appWindows>
          </windowEffect>
        </Configs>
    

    icon-note.gif NOTE

    The window_manager_config_open.xml file contains various configuration items. Before the verification, you must change the default value of MaximizeMode to the one you have defined, that is, the value obtained by MaximizeMode maximizeMode = GetWindowManager()->GetWindowMaximizeMode(). The system loads the corresponding title bar according to the value.

Then, debug the custom title bar as follows: 1. Burn the image that contains the custom title bar code to the device. 2. Run the open_maximize.bat script. 3. Run the demo to check whether the title bar works properly.

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Subsystems

harmony 鸿蒙AI Framework Development Guide

harmony 鸿蒙NNRt Access Adaptation

harmony 鸿蒙Application Privilege Configuration

harmony 鸿蒙Development Example

harmony 鸿蒙Setting Up a Development Environment

harmony 鸿蒙Development Guidelines

harmony 鸿蒙Application Framework Overview

harmony 鸿蒙ArkCompiler Development

harmony 鸿蒙appspawn Module

0  赞