The core feature of an instant messaging app is user interaction. The main function modules include chatting, contact management, and social networking. You may face challenges in adapting to different screen sizes and formats when developing apps. This topic provides solutions to common multi-device adaptation issues of instant messaging apps.

Currently, this app is compatible with the following devices: bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, tablets, and PCs.

Before reading this topic, you are advised to learn the ArkUI framework and the capabilities of one-time development for multi-device deployment.

The following practices will focus on these product forms and provide examples from the perspectives of UX design, project management, and page development, helping you develop instant messaging apps that can be deployed on multiple devices.

UX Design: describes the interaction logic and design points of instant messaging apps. You can refer to similar design points in other projects.
Project Management: uses a layered architecture for projects with one-time development for multi-device deployment, clearly defining the logic of each layer. In addition, this section describes the three-layer architecture configuration applicable to instant messaging apps.
Mobile Pages and PC Pages: describe the design principles and implementation methods of window adaptation and page development by following the actual app development process, with pages as the basic unit.

UX Design

For details about the UX design of instant messaging apps, see the social communication section in the multi-device responsive design guide for social communication apps. See the following figure for reference.

Click to enlarge

Project Management

To ensure the reusability and maintainability of the project to implement one-time development for multi-device deployment, it is recommended that developers use a layered architecture to organize code projects. The architecture consists of three layers: products (product customization layer), features (basic feature layer), and common (common capability layer). Each layer has clear responsibilities and independent functions, providing developers with a clear, efficient, and scalable design architecture. For details about the layered architecture design, see Layered Architecture Design.

[h2]Project Creation

You are advised to create a template project after learning how to create and configure a layered architecture project by referring to Cross-Device Project Deployment and Release. Then, modify the project based on the development requirements of the instant messaging app to ensure that the project architecture meets the actual service requirements.

[h2]Project Structure

The instant messaging app uses the recommended layered architecture, organizing the code project into three layers: products, features, and common. The design of each layer is as follows:

products layer: The instant messaging management app needs to be compatible with the following devices: bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, tablets, and PCs. The UI layout of PCs differs greatly from that of other devices. Therefore, a hap package named pc needs to be created separately at the products layer as the app entry for PCs. The UI layouts of bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, and tablets are similar. Some differences can be adapted through the adaptive layout and responsive layout of one-time development for multi-device deployment. Therefore, a hap package named default is created at the products layer as the app entry for these devices.
Features layer: The instant messaging app consists of three core service modules: message, social, and user. A HAR package is created at the features layer for the three service modules, which can be referenced by the products layer as required. These three service modules are independent of each other, facilitating subsequent maintenance and iteration.
common layer: stores basic capabilities such as common constants, route redirection utilities, and window management utilities in a centralized manner to implement code reuse and reduce redundancy. These capabilities can be shared and uniformly called by other modules.

The project structure is as follows:

├──common
│  └──commonmultidevicecommunication                                     
│     └──src/main
│        ├──ets
│        │  ├──constants                      // Common constants
│        │  ├──model                          // Common model
│        │  ├──utils                          // Utilities
│        │  └──view                           // Common service components of features
│        └──resources                         // Public resources
├──features                                   
│  ├──commonui                                // Common service component module of products
│  │  └──src/main
│  │     ├──ets
│  │     │  └──view                           // Common service components of products
│  │     └──resources                         // Static routing table resources
│  ├──message                                 // Message module
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──model                          // Data model of the message module
│  │     │  ├──view                           // Message module component
│  │     │  └──viewmodel                      // View model of the message module
│  │     └──resources                         // Message module resources
│  ├──social                                  // Social module
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──model                          // Data model of the social module
│  │     │  ├──view                           // Social module component
│  │     │  └──viewmodel                      // View model of the social module
│  │     └──resources                         // Social module resources
│  └──user                                    // Profile module
│     └──src/main
│        ├──ets
│        │  ├──model                          // Data model of the profile module
│        │  ├──view                           // Profile module components
│        │  └──viewmodel                      // View model of the profile module
│        └──resources                         // Profile module resources
└──products                                    
  ├──default                                  // Mobile phone/Tablet
  │  └──src/main
  │     ├──ets
  │     │  ├──entryability                    // Entry ability
  │     │  ├──entrybackupability              // Custom extension ability for app data backup and restoration
  │     │  └──pages                           // Entry page
  │     └──resources                          // Resource file
  └──pc                                       // PC
    └──src/main
       ├──ets
       │  ├──pages                           // Entry page
       │  ├──pcability                       // Entry ability
       │  └──pcbackupability                 // Custom extension ability for app data backup and restoration
       └──resources                          // Resource file

Mobile Pages

This section describes how to use layout capabilities to adapt a set of pages in the instant messaging app across different devices, such as bar-type phones, bi-fold devices (Mate X series), tri-fold devices, widescreen foldable devices, and tablets. It also describes the window adaptation solutions for these devices.

[h2]Window Adaptation

Window Mode
Adapted devices support full-screen, split-screen, floating window, and freeform window modes. For details, see Window Mode. The split-screen and floating window modes can be easily accessed through the system without any special design. By listening for window size changes, the app refreshes the UI based on the breakpoints to automatically apply layouts suitable for distinct window modes.
Window Orientation
You can set the window orientation using window.setPreferredOrientation(). There are four types of window orientations: portrait, landscape, reverse portrait, and reverse landscape. For details, see Window Orientation. In the instant messaging app, you are advised to set this attribute to FOLLOW_DESKTOP in the module.json5 configuration file.
Immersive Window
You can implement the immersive windows in different modes (full-screen, split-screen, floating window, and freeform window modes) based on the UX design. For details, see Immersive Window. You are advised to use the component-level immersive solution to implement the immersive effect and dynamically avoid the safe area to ensure the immersive display effect. In freeform window mode, call window.setWindowDecorVisible(false) to hide the title bar and display only the three buttons in the upper-right corner. In this case, the app page is extended to the title bar area, implementing the immersive display effect.

[h2]Message Page

The message page of the instant messaging app displays the message list and message details to meet users' chat requirements. According to the function design, the message page is divided into five areas, as shown in the following table.

Horizontal Breakpoint	sm	md	lg
Message page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Title bar on the top	Use the responsive component HdsNavDestination to set the titleBar attribute. The component automatically adapts to the screen on devices with different widths.
2	Message list	Use the responsive component List to implement this feature. Use the responsive environment variable to monitor changes in the window size layout breakpoint (windowsizelayoutbreakpointinfo) and dynamically adjust the list margin.
3	Bottom navigation bar	Use the responsive component HdsTabs to implement this feature. Set the floating style of the tab page using the barFloatingStyle attribute.
4	Message details	Use the responsive component Scroll to implement this feature. Set the layoutWeight attribute to enable swiping to view messages when the device height is less than the content height.
5	Message input area	Use the Row component to nest the media component image to implement this feature. Row is a container that arranges components horizontally. Set the layoutWeight attribute to enable the message input box to adaptively stretch at different breakpoints.
6	Left navigation bar of the PC	Use SideBarContainer to implement this feature. Set the showSidebar attribute to ensure that the sidebar is always displayed.

[h2]Contacts Page

The contacts page of the instant messaging app displays the contacts list and contact profile, meeting the requirements for viewing contacts. According to the function design, the contacts page is divided into five areas, as shown in the following table.

Horizontal Breakpoint	sm	md	lg
Contacts page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Title bar on the top	Use the responsive component HdsNavDestination to set the titleBar attribute. The component automatically adapts to the screen on devices with different widths.
2	Search bar	Use the Row component to implement this feature. Row is a container that arranges components horizontally. Set the layoutWeight attribute to enable the search bar to adaptively stretch at different breakpoints. Implement the responsive layout by monitoring breakpoint changes.
3	Contacts list	Use the Stack component to nest the responsive components List and AlphabetIndexer to implement this feature. Dynamically adjust the list margin by monitoring breakpoint changes.
4	Bottom navigation bar	Use the responsive component HdsTabs to implement this feature. Set the floating style of the tab page using the barFloatingStyle attribute.
5	Contact profile	Use the responsive component Scroll to nest Grid to implement this feature. Use the aspectRatio constraint of the Grid component and set objectFit of the Image component to implement three columns that horizontally adapt to the screen.

[h2]Social circle page

The social circle page of the instant messaging app displays the social circle list, meeting the requirements for viewing friends' posts. According to the function design, the social circle page is divided into four areas, as shown in the following table.

Horizontal Breakpoint	sm	md	lg
Social circle page

UI Development

The following table describes the details and implementation scheme.

No.	Description	How to Implement
1	Title bar on the top	Use the responsive component HdsNavDestination to set the titleBar attribute. The component automatically adapts to the screen on devices with different widths.
2	Social circle list	Use the responsive component List to nest Grid to implement this feature. Use the aspectRatio constraint of the Grid component and set objectFit of the Image component to implement three columns that horizontally adapt to the screen.
3	Bottom navigation bar	Use the responsive component HdsTabs to implement this feature. Set the floating style of the tab page using the barFloatingStyle attribute.

PC Pages

This section describes how to reuse the layout based on the existing mobile UI development solution to efficiently develop instant messaging apps for PCs.