Window Title Bar Customization Development (C++)
Overview
Introduction
OpenHarmony has a default UX style for window titles. It also allows you to customize the window titles in your own style to accommodate diverse needs.
Constraints
A folder for storing the custom title bar code must be placed in foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal. The build configuration must be specified in foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn.
How to Develop
Development
To customize the title bar:
- In the frameworks/core/components/common/layout/constants.h file, define the values for MaximizeMode – a parameter that specifies the mode for maximizing or minimizing the window. In the following example, MODE_AVOID_SYSTEM_BAR and MODE_FULL_FILL are the values defined by vendor enhance.
enum class MaximizeMode : uint32_t { MODE_AVOID_SYSTEM_BAR, MODE_FULL_FILL, MODE_RECOVER, }; - In the foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal/container_modal_view_factory.h file, add code to ContainerModalViewFactory::GetView for creating a custom window title bar based on the MaximizeMode settings.
NOTE
ContainerModalViewFactory::GetView is a factory method that creates a window title bar based on the MaximizeMode settings. It is expanded as follows:
```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 from vendor enhance, a custom window title bar is created depending 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 the custom title bar code.
NOTE
The entry to a custom title bar has been completed in steps 1 and 2. This step is to write the specific implementation code.
The structure of the container_modal folder is as follows: ```shell ├── 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_*** file under **container_modal** contains the code related to the default title bar view. You can add your code file in the created folder for the custom title bar. In the preceding example, the **container_modal_*** file under **enhance** is the code file by vendor enhance.
4. Complete the build configuration for .cpp files in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn**.
When the development is complete, you can debug and verify the custom title bar.
### Debugging and Verification
Before getting started, prepare the following files in the same directory:
- **open_maximize.bat**, the content of which is as follows:
```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**, the content of which is as follows:
```html
<?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**
>
> **window_manager_config_open.xml** contains configuration items. Among them, change the value of **defaultMaximizeMode** to one of the values you define for **MaximizeMode**. The value is the one obtained by **MaximizeMode maximizeMode = GetWindowManager()->GetWindowMaximizeMode()**. The system loads the title bar according to this value.
Now with the prepared files, debug and verify your title bar as follows:
1. Burn the image that contains the title bar code to the target device.
2. Run the **open_maximize.bat** script.
3. Run the demo to examine the effect.