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:

In MaximizeMode (in frameworks/core/components/common/layout/constants.h), define the enums, for example, MODE_AVOID_SYSTEM_BAR and MODE_FULL_FILL.
```
enum class MaximizeMode : uint32_t {
    MODE_AVOID_SYSTEM_BAR,
    MODE_FULL_FILL,
    MODE_RECOVER,
};
```

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.

NOTE

The ContainerModalViewFactory::GetView method is a factory method. Below shows the method expanded:

    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).

Create a folder in the foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal directory to store your custom title bar code.

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 container_modal_* 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.

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:

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>

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:

Burn the image that contains the custom title bar code to the device.
Run the open_maximize.bat script.
Run the demo to check whether the title bar works properly.