Tri-Fold Phone App Development

Overview

Huawei's tri-fold flagship phone features three interconnected screens that can operate in sync, with the hinges allowing the entire screen assembly to fold into three sections. Compared with a bar phone, a tri-fold phone has the following features:

• Its screen size is variable, and the device has user interfaces of different sizes and forms. Its three common usage states are the single-screen state (F state), dual-screen state (M state), and triple-screen state (G state).
• It has special folding status and interaction events. A tri-fold phone can be folded in nine states. For details, see Device Folding Capability.
• The available camera and its position vary depending on the folding status.

The main tri-fold phones is the Mate XT series, as shown in the following figure.

Hardware Specifications

This topic uses the Mate XTs as an example to describe the screen orientation, screen size, and camera hardware parameters of tri-fold phones.

Screen Specification Information

The following table lists the screen orientation and size parameters of tri-fold phones in single-screen, dual-screen, and triple-screen states.

Screen specifications in single-screen state

Screen specifications in the dual-screen state

Screen specifications in the triple-screen state

Camera Hardware Information

The camera has a default camera lens installation angle. When using the camera, you need to consider both the lens angle and the device rotation angle. For details, see Preview Rotation Angle.

Camera hardware information in single-screen state

Camera hardware information in dual-screen state

Camera hardware information in triple-screen state

Device Folding Capability

The tri-fold phone has nine folding states, each with its own unique features. You can think of it as two bi-fold screens combined. Each of the three screens has three folding states (folded, unfolded, and half-folded), resulting in a total of nine folding states (3 × 3 = 9).

The display.getFoldStatus() API can be used to obtain the current folding state of a device. For details about the returned result, see FoldStatus. The display.getFoldDisplayMode() API can be used to obtain the current folding state of a device. For details about the returned result, see FoldDisplayMode. The following table uses the Mate XTs as an example to describe the folded state and attributes of a tri-fold phone.

Innovation and Experience Improvement

Finger-Following Interaction

The dual-screen and triple-screen states of a tri-fold phone provide a wider display area, larger information capacity, and wider operation area. To further improve user experience of a tri-fold phone in dual-screen and triple-screen states, it is recommended that the system's new interaction capabilities be adapted. By integrating new features such as smart reachability, popup sheet, and finger-following sheet, users can perform operations more quickly and efficiently.

1. Smart reachability: The system provides the capability to detect the user's current holding hand information. Apps can use the detected hand information to adaptively adjust the display position of core interaction components, effectively improving the convenience of one-handed operation.

   

   Subscribe to the motion.on('holdingHandChanged') event to obtain the hand holding information and change the display position of the component.

2. Popup sheet: To minimize lengthy user operation paths, position a popover dialog closer to the hand for quicker user interaction on phones in dual-screen or triple-screen state.

   

   When building the UI layout, you can use a conditional expression to determine the display behavior. If the horizontal breakpoint is sm, use a regular centered dialog box. Otherwise, use a popover dialog PopoverDialog to improve the operation efficiency on large-screen devices.

3. Finger-following sheet: In single-screen state, the sheet usually pops up from the bottom of the screen. In dual-screen state, it is recommended that the sheet be displayed in the middle. In triple-screen state, the finger-following sheet or the center sheet can be displayed, depending on service requirements.

   When using bindSheet to bind the sheet transition, set the sheet attribute preferType to SheetType.POPUP. After this attribute is set, the bottom pop-up window is displayed by default for devices whose window width is less than 600 vp, and the popup sheet is automatically displayed for other devices.

   

Semi-Folded State Adaptation

A tri-fold phone in dual-screen state can switch to the semi-folded state. In this state, the device can rest steadily on a desktop, enabling a hands-free experience. It is commonly used in scenarios that do not require frequent interaction, such as video calls, video playback, photography, and music listening. The upper and lower screens need to be properly arranged in such a way that the displayed content avoids the crease in the semi-folded state. For details, see Semi-Folded State of Foldable Screens.

Open/Close Adaptation

Opening-closing continuity means that an app maintains the continuity of page content, task progress, and running status when switching between screen forms and window states. Users can quickly resume their previous operations, ensuring a smooth transition. For example, when a tri-fold device switches between the single-screen, dual-screen, and triple-screen states, the app page content remains unchanged and the status is seamlessly continued, ensuring that the user experience is not affected. For details about the implementation, see Opening-Closing Continuity.

Floating Components

A tri-fold device can be used in single-screen, dual-screen, and triple-screen states. The barFloatingStyle attribute of the HdsTab component is used to implement the floating navigation bar, which can adapt to various form switching scenarios and fully utilize the visible screen area. The transparent frosted material effect can be configured using the SystemMaterialParams parameter to improve the transparency of the UI and adapt to immersive browsing experience. The HdsTabsMiniBar component can be used to extend the mini tab bar, expand multi-dimensional quick entries, and adapt to partition operations in dual-screen and triple-screen states. In addition, the interaction logic is unified in single-screen, dual-screen, and triple-screen states, reducing user switching costs and effectively improving operation efficiency and user experience.

Adaptive Immersion

A tri-fold device has three states: single-screen, dual-screen, and triple-screen. To avoid issues such as stretching, cropping, and incorrect display ratio of the video playback image during form switching, the adaptive immersive full-screen playback solution can be used. This solution simplifies UI elements and reduces visual interference, allowing users to focus on the video image and fully utilize the large screen's wide view, thereby effectively improving the viewing experience. For details about the implementation, see Adapting Videos to Different Screen Sizes.

Stylus Adaptation

Tri-fold devices mainly use a touchscreen for interactions. Common operations include tap, double-tap, long press, and drag. You can perform functionality adaptation based on these operations. For details, see Interaction Event.

Mate XTs are equipped with styluses, which support seamless connection and low-latency transmission. The styluses are ready to use upon opening the box and can be used for global annotation, quick note-taking, and remote control, providing a smooth and natural writing and interaction experience. The Pen Kit capability provided by the system can help developers flexibly integrate APIs such as handwriting suite, Color picker, and Instant Shape, improving the extensibility and creation efficiency of writing interaction.

Keyboard and Mouse Adaptation

In addition to touchscreen interactions, triple-fold devices also support interactions by connecting a keyboard or a mouse. Take the Mate XTs as an example. The adaptation of keyboard and mouse interactions should include:

• Mouse hover effect: It is recommended that UI components that support interaction within apps on tri-fold devices be adapted to support the mouse hover effect. For details about the development solution, see adaptation of unified interaction events.
• Keyboard shortcuts: Apps must support common shortcuts to improve user operation efficiency. For details about the development solution, see adaptation of unified interaction events.

Focus Navigation

When users interact with an app indirectly using keyboards connected to tri-fold devices, you are advised to set interactive elements to a focusable state and configure visual effects for focus states to clearly indicate the current focus position and enhance interaction experience. For details about the development solution, see Focus Events.

Multitask View

The multitask view feature is designed to help users efficiently handle multiple tasks. With this feature, users can run multiple apps on the same screen concurrently and quickly switch between them, breaking through the physical limitations of the screen and improving operation efficiency. Take Mate XTs as an example. In its triple -screen landscape state, the device provides a larger display view and stronger information display and content bearing capabilities. The multitask view capability can fully carry out the space advantages of the device's large screen. A maximum of three windows can run concurrently on the same screen, enabling users to browse information, edit content, and communicate for work at the same time. Multiple tasks can be processed synchronously without conflicting with each other, implementing one-stop collaboration of office, entertainment, and daily operations.

Common Device Adaptation Issues

Truncated/Blank Areas

Layout Is Normal on Tablets, but Abnormal in the G State of the Tri-Fold Phone

Issue description: The app page is displayed properly on the tablet, but the image is too large, the font is too large, the image is stretched or compressed, or there is blank space on the screen in the tri-fold device in G state.

Possible cause: You use "deviceType === tablet" as the condition for determining the lg breakpoint layout, which adapts only to tablets. As a result, the tri-fold device in G state cannot match the correct layout, causing display exceptions.

Solution: The UX layout should be determined based on the window size and shape, not the physical device type. The same UX layout must be consistent across different devices with the same window size. The tri-fold device in G state should have the same layout as a tablet, the tri-fold device in M state should have the same layout as a bi-fold device in unfolded state, and the tri-fold device in F state should have the same layout as a bar phone. It is recommended that the breakpoint solution be used to replace the device form API to implement a unified UX layout determination logic. For details, see Breakpoints.

Abnormal Rotation

Tri-Fold Phone's G State Supports Only the Portrait Mode and Cannot Be Rotated