Free Window 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, free window adaptation is an important part of enhancing the flexibility of applications and the user experience. It allows users to freely adjust the size of the application window, bringing great convenience to multi-device usage scenarios. Next, let's take an in-depth look at the relevant knowledge of free window adaptation.
Introduction to the Free Window Mode
The free window mode, simply put, means that the size of the application window can be freely adjusted by the user, no longer limited to a fixed size. This mode is suitable for a variety of scenarios. For example, when a user is processing documents and viewing materials on a tablet device at the same time, they can adjust both the document application and the browser application to an appropriate window size to achieve efficient multi-tasking. Or on a large-screen device, users can flexibly adjust the size of the video playback window according to their needs while taking into account other operations. In the free window mode, the application can adjust the layout in real time according to the change of the window size, providing users with a more personalized usage experience.
How to Limit the Size Range of the Free Window
In HarmonyOS Next, developers can limit the size range of the free window by setting a series of parameters in the application configuration file. These parameters include minWindowWidth, minWindowHeight, maxWindowWidth, maxWindowHeight, minWindowRatio, and maxWindowRatio, etc.
minWindowWidth and minWindowHeight are used to set the minimum window width and height supported by the application, with the unit being vp (virtual pixels). For example, if minWindowWidth is set to 320, then when the user adjusts the window width to be less than 320vp, the window will not be able to shrink further. Similarly, maxWindowWidth and maxWindowHeight limit the maximum width and height of the window.
minWindowRatio and maxWindowRatio specify the minimum and maximum width-to-height ratios of the window. For example, setting minWindowRatio to 0.5 means that the width of the window is at least 0.5 times its height, which can ensure that during the window adjustment process, the content will not be displayed abnormally due to an unbalanced width-to-height ratio.
The following is an example of setting these parameters in the application configuration file:
{
"module": {
//...
"abilities": [
{
//...
"minWindowWidth": 320,
"minWindowHeight": 240,
"maxWindowWidth": 1440,
"maxWindowHeight": 900,
"minWindowRatio": 0.5,
"maxWindowRatio": 2
}
]
}
}
By reasonably setting these parameters, developers can meet the different users' needs for window size adjustment while ensuring the normal display of the application interface, and at the same time avoid problems such as layout confusion caused by excessive changes in the window size.
Optimizing the Free Window Experience by Combining Adaptive and Responsive Layouts
In order to provide a smoother and more beautiful user experience in the free window mode, we can combine adaptive and responsive layouts. The adaptive layout can ensure that when the window size changes within a certain range, the display of page elements remains normal; while the responsive layout can adjust the page structure to adapt to the new size when the window size changes significantly.
The following is an example code showing how to combine these two layouts in the free window mode:
@Entry
@Component
struct FreeWindowLayout {
@State currentBreakpoint: string ='sm'
build() {
GridRow({ breakpoints: { value: ['600vp', '840vp'], reference: BreakpointsReference.WindowSize } }) {
GridCol({ span: { xs: 12, sm: 6, md: 4, lg: 3 } }) {
Column() {
// Example of adaptive layout: Image scaling
Image($r('app.media.image')).width('100%').aspectRatio(1).backgroundColor('#F1F3F5')
// Example of responsive layout: Adjusting the text size under different breakpoints
if (this.currentBreakpoint ==='sm') {
Text('Image Description').fontSize(14).textAlign(TextAlign.Center)
} else {
Text('Image Description').fontSize(16).textAlign(TextAlign.Center)
}
}
}
}
.onBreakpointChange((breakpoint: string) => {
this.currentBreakpoint = breakpoint
})
}
}
In this example, the GridRow and GridCol components form the basic layout framework, and the responsive layout is achieved by using breakpoints. Under different breakpoints, the number of columns occupied by the GridCol component is different, and the layout of the image and text will be adjusted accordingly. At the same time, by setting width('100%') and aspectRatio(1) for the image, it has the ability to adapt to the window size and always maintain an appropriate display ratio.
For another example, on the product detail page of an e-commerce application, it can be optimized like this:
@Entry
@Component
struct ProductDetailPage {
@State currentBreakpoint: string ='sm'
build() {
Column() {
if (this.currentBreakpoint ==='sm') {
// Layout for a small window, with the image on top and the text below
Image($r('app.media.productImg')).width('100%').aspectRatio(1.5)
Text('Product Details: This is a really great product...').fontSize(14).padding(10)
} else {
// Layout for a large window, with the image and text side by side
Row() {
Image($r('app.media.productImg')).width('40%').aspectRatio(1.5)
Column() {
Text('Product Details: This is a really great product...').fontSize(16).padding(10)
}
.width('60%')
}
}
}
.onBreakpointChange((breakpoint: string) => {
this.currentBreakpoint = breakpoint
})
}
}
In this way, in the free window mode, no matter how the window size changes, the application can provide users with a good visual and interactive experience through the adaptive and responsive layouts, making the content display more reasonable and comfortable.
The free window adaptation function of HarmonyOS Next brings more possibilities to application development. By reasonably limiting the window size range and skillfully combining the adaptive and responsive layouts, developers can create applications that perform well in the free window mode and meet the diverse usage needs of users. It is hoped that everyone can make full use of these technologies in actual development to bring a better application experience to users.
Top comments (0)