Best Practices for One-time Development and Multi-device Adaptation in HarmonyOS Next
This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system and summarize them based on practical development practices. It mainly serves as a medium for technical sharing and communication. There may inevitably be some errors or omissions. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.
In the ecosystem of HarmonyOS Next, achieving one-time development and multi-device adaptation is an efficient development model pursued by developers. This can not only reduce development costs but also enable applications to reach more users quickly. However, in the process of practice, many challenges will be faced. Now let's discuss the countermeasures and best practices.
Core Challenges and Solutions for Multi-device Adaptation
Differences in Device Types
HarmonyOS Next supports a variety of device types, such as default devices, tablets, TVs, wearables, 2-in-1 devices, etc. Different device types have huge differences in screen size, resolution, input methods, and other aspects. For example, smart wearable devices have small screens, and the interaction methods are mainly touch and voice; while large-screen TVs pay more attention to the visual experience, and the interaction depends on the remote control.
The solution is to conduct sufficient device research in the early stage of development and classify the devices according to dimensions such as screen size and input methods. According to the characteristics of different types of devices, formulate corresponding design and development strategies. For example, design a simple interactive interface for small-screen devices to avoid overly complicated information; design richer visual elements and layouts for large-screen devices.
Layout Adaptation
The screen sizes and ratios of different devices vary, which poses a great challenge to the layout. A layout that is suitable on a small screen may appear loose or uncoordinated on a large screen; conversely, the layout on a large screen may not be fully displayed on a small screen.
To solve the layout adaptation problem, developers can comprehensively use adaptive layouts and responsive layouts. The adaptive layout ensures that page elements can be reasonably adjusted when the container size changes through capabilities such as stretching, equal division, and proportion. For example, use the flexGrow and flexShrink properties of the Flex layout to achieve the stretching and shrinking of elements. The responsive layout switches the page layout structure under different window widths based on breakpoints. With the help of the GridRow and GridCol components, set the number of columns occupied by the components under different breakpoints to achieve flexible changes in the page layout.
Differences in Window Modes
In addition to the differences in different device types, the same device may also have multiple window modes, such as the free window mode. In the free window mode, the window size can be adjusted at will, which requires the application to be able to adapt to the changes in the window size in real time.
Developers can ensure that the application can still maintain a good display effect when the window size changes by setting the size limit parameters of the free window, such as minWindowWidth, maxWindowHeight, etc. At the same time, combine the adaptive and responsive layouts to enable the application to automatically adjust the layout and style of the page elements when the window size changes. For example, when the window becomes smaller, reduce the number of displayed contents or adjust the arrangement of elements; when the window becomes larger, increase the displayed information or optimize the layout structure.
How to Achieve "One-time Development, Multi-device Deployment"
Optimizing the Development Process Using the Layout System
The Layout system of HarmonyOS Next provides strong support for one-time development and multi-device deployment. In the development process, making full use of the capabilities of adaptive layouts and responsive layouts can reduce the repetitive development work for different devices.
-
Unified Component Usage: Try to use the polymorphic components provided by the system, and these components will be automatically adapted according to the device type. For example, when using the
Buttoncomponent, there is no need to worry about the differences in styles and interactions on different devices, and the system will handle it automatically. -
Layout Adjustment Based on Breakpoints: Reasonably divide the breakpoints and design different page layouts for different breakpoints. For example, in an e-commerce application, under a small screen (sm breakpoint), the product list uses a single-column layout for the convenience of users' one-handed operation; under a large screen (lg breakpoint), it is switched to a multi-column layout to display more product information. Through the cooperation of the
GridRowandGridColcomponents, this layout switch can be easily achieved:
@Entry
@Component
struct ProductList {
@State currentBreakpoint: string ='sm'
@State productData: Array<{ name: string, image: Resource }> = [
{ name: 'Product 1', image: $r('app.media.product1') },
{ name: 'Product 2', image: $r('app.media.product2') }
]
build() {
GridRow({ breakpoints: { value: ['600vp'], reference: BreakpointsReference.WindowSize } }) {
ForEach(this.productData, (product) => {
GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
Column() {
Image(product.image).width('100%').aspectRatio(1)
Text(product.name).fontSize(16).textAlign(TextAlign.Center)
}
}
})
}
.onBreakpointChange((breakpoint: string) => {
this.currentBreakpoint = breakpoint
})
}
}
-
Resource Management: With the help of the resource file capabilities, manage the resources of the application in different devices or configurations. In the
resourcesdirectory, by creating qualifier directories (such asen_GB-vertical-car-mdpi), store the resources under specific devices or configurations. The system will first look for resources in the matching qualifier directory according to the current device status, and if not found, it will look in thebasedirectory. For example, define the default colors in thecolor.jsonin thebasedirectory, and define the specific colors for tablet devices in thecolor.jsonin thetabletqualifier directory to achieve the adaptation of color resources on different devices.
Summary and Outlook
By addressing the core challenges of multi-device adaptation and reasonably using the Layout system of HarmonyOS Next, developers can achieve one-time development and multi-device deployment, improve development efficiency, and reduce development costs.
In future development, to further improve the development efficiency of HarmonyOS Next, developers can pay attention to the following points:
- Continuous Learning of New Features: As HarmonyOS Next continues to develop, new functions and features will be continuously introduced. Continuously learning and mastering these new contents, such as more powerful layout capabilities and new components, can make the development work more efficient.
- Community Communication and Cooperation: Actively participate in the communication and cooperation of the HarmonyOS developer community, and share development experiences and problems encountered. Through interaction with other developers, solutions can be quickly obtained, best practices can be learned, and one's own development level can be improved.
- Use of Automation Tools: Pay attention to and use relevant automation tools, such as code generation tools and layout preview tools. These tools can help developers quickly generate code frameworks and preview the layout effects on different devices in real time, reducing the workload of manual code writing and improving development efficiency.
HarmonyOS Next provides developers with a broad space for development. Through continuous exploration and practice of the best practices for one-time development and multi-device adaptation, developers can create higher-quality and more competitive applications, bringing a better experience to users.
Top comments (0)