diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..3cc85a40507802a1b8b31a4c7b421a8cb5c3ea97 --- /dev/null +++ b/README.en.md @@ -0,0 +1,69 @@ +# Multi-Window UI Adaptation Based on ArkUI + +### Introduction + +This sample demonstrates how to implement UI adaptation during multi-window (split-screen/floating window) development. By optimizing the layout and adjusting the element display logic, ensure that your application provides consistent and high-quality user experience across different window modes. + +### Preview + +The following figures show the effects after optimization. + +| Optimized Page Content Truncation | Fixed Video Component Truncation in Split-Screen Mode | Resolved Unresponsive Operation Bar of Floating Windows | +|--------------------------------------------------------|--------------------------------------------------------|---------------------------------------------------------| +| ![Question1.png](screenshots/devices/Question1.en.png) | ![Question3.png](screenshots/devices/Question3.en.png) | ![Question7.png](screenshots/devices/Question7.en.png) | + +**How to Use** +1. After installing the application, touch the button indicating that the page is truncated and cannot be swiped up or down, to jump to a level-2 page. +2. Touch the before optimization button on the level-2 page to go to the page before optimization. Swipe up from the bottom of the screen to the hot zone in the upper left corner to enter the split-screen mode. Touch another application icon or widget that supports split-screen on the home screen, and view the split-screen effect before optimization. +3. Return to the level-2 page and touch the after optimization button to go to the page after optimization. Perform the preceding operations to view the split-screen effect after optimization. + +### Project Directory + +``` +├──entry/src/main/ets/ +│ ├──common +│ │ ├──AVPlayerUtil.ets // Video playback utilities +│ │ ├──Constants.ets // Encapsulated constants +│ │ └──Logger.ets // Loggers +│ ├──entryability +│ │ └──EntryAbility.ets // Entry ability lifecycle callbacks +│ ├──entrybackupability +│ │ └──EntryBackupAbility.ets // Backup entry abilities +│ └──pages +│ ├──Index.ets // Application entry page +│ ├──Question.ets // Entry menu for abnormal scenarios +│ ├──Question1Correct.ets // Abnormal scenario 1—after optimization +│ ├──Question1Incorrect.ets // Abnormal scenario 1—before optimization +│ ├──... // Other abnormal scenarios are not listed here. +│ └──Question8Incorrect8.ets // Abnormal scenario 8—before optimization +└──entry/src/main/resources // Static resources +``` + +### How to Implement + +In split-screen mode: +1. To solve the problem that the page is truncated and cannot be swiped up or down, nest the Scroll component. +2. To solve the incomplete display of XComponent video rendering in split-screen mode, use the aspectRatio property to specify the aspect ratio of the XComponent. +3. To solve the problem that the Video component is truncated in split-screen mode, set the .objectFit(ImageFit.Contain) property for the Video component. +4. To solve the problem that the child component exceeds the scope of the parent component, use constraintSize to restrict the child component to follow the size of the parent container. +5. To solve the display exceptions of the Image component in split-screen mode, use the displayPriority property to control whether to display or hide the Image component. +6. To solve the dialog box layout exceptions, use the constraintSize property to set the maximum height of the dialog box, and use the Scroll component to wrap the content area of the dialog box. + +In floating window mode: +1. To solve the problem that the top operation bar of an application in immersive mode cannot be operated, use the getWindowAvoidArea API to obtain topRect to be avoided on the top of the screen, and perform layout avoidance based on the value obtained. +2. To solve the problem of horizontal floating window adaptation, add landscape_auto to the preferMultiWindowOrientation property under the abilities tag in the module.json5 configuration file, and use enableLandscapeMultiWindow or disableLandscapeMultiWindow to optimize the layout. + +### Required Permissions +N/A + +### Dependencies +N/A + +### Constraints +1. The sample is only supported on Huawei phones with standard systems. +2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later. +3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later. +4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later. + + + diff --git a/entry/src/main/ets/pages/Question.ets b/entry/src/main/ets/pages/Question.ets index ee98145a930c15e1c6ad6662f99781fd9e3982a2..e2904abbfe26652142e340f99fcb7608c86cb013 100644 --- a/entry/src/main/ets/pages/Question.ets +++ b/entry/src/main/ets/pages/Question.ets @@ -23,14 +23,14 @@ export function QuestionBuilder() { @Component export struct Question { @Consume('navPathStack') navPathStack: NavPathStack; - @State title: string = ''; + @State title: Resource|undefined = undefined; @State questionTag: number = 0; aboutToAppear(): void { let params: Array = this.navPathStack.getParamByName('Question') as Array if (params && params.length > 0) { this.questionTag = params[0]; - this.title = getContext().resourceManager.getStringSync(Constants.QUESTION_ARRAY[this.questionTag].id); + this.title =Constants.QUESTION_ARRAY[this.questionTag]; } } diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index c48f3654eca9c2395f4bf648f2b312061ed350f6..eaa137a00dcd777c64fccb601bd67f4ea0356a7b 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -14,7 +14,7 @@ }, { "name": "Question1", - "value": "The page is truncated and cannot be swiped up or down" + "value": "Page truncated, swipe disabled" }, { "name": "Question2", @@ -22,15 +22,15 @@ }, { "name": "Question3", - "value": "The video component is truncated in the split-screen state" + "value": "Video truncated in split-screen" }, { "name": "Question4", - "value": "The child component is out of scope for the parent component" + "value": "Child component is outside parent's scope" }, { "name": "Question5", - "value": "The image component has an abnormal ratio in the split-screen state" + "value": "Image ratio is abnormal in split-screen mode" }, { "name": "Question6", @@ -38,7 +38,7 @@ }, { "name": "Question7", - "value": "The action bar at the top of the overlay window does not respond to actions" + "value": "Top action bar in overlay window is unresponsive" }, { "name": "Question8", @@ -78,7 +78,7 @@ }, { "name": "dialog_content", - "value": "This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice" + "value": "This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice" }, { "name": "agree", diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index c48f3654eca9c2395f4bf648f2b312061ed350f6..eaa137a00dcd777c64fccb601bd67f4ea0356a7b 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -14,7 +14,7 @@ }, { "name": "Question1", - "value": "The page is truncated and cannot be swiped up or down" + "value": "Page truncated, swipe disabled" }, { "name": "Question2", @@ -22,15 +22,15 @@ }, { "name": "Question3", - "value": "The video component is truncated in the split-screen state" + "value": "Video truncated in split-screen" }, { "name": "Question4", - "value": "The child component is out of scope for the parent component" + "value": "Child component is outside parent's scope" }, { "name": "Question5", - "value": "The image component has an abnormal ratio in the split-screen state" + "value": "Image ratio is abnormal in split-screen mode" }, { "name": "Question6", @@ -38,7 +38,7 @@ }, { "name": "Question7", - "value": "The action bar at the top of the overlay window does not respond to actions" + "value": "Top action bar in overlay window is unresponsive" }, { "name": "Question8", @@ -78,7 +78,7 @@ }, { "name": "dialog_content", - "value": "This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice" + "value": "This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice,This is a user notice" }, { "name": "agree", diff --git a/entry/src/main/resources/en_US/media/game_bg.png b/entry/src/main/resources/en_US/media/game_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..b4c46b896e1ae5c962cb758e3e1cdf2064466080 Binary files /dev/null and b/entry/src/main/resources/en_US/media/game_bg.png differ diff --git a/screenshots/devices/Question1.en.png b/screenshots/devices/Question1.en.png new file mode 100644 index 0000000000000000000000000000000000000000..c46825cf8d81618e2bd0682ee9d139a98d2f9e41 Binary files /dev/null and b/screenshots/devices/Question1.en.png differ diff --git a/screenshots/devices/Question3.en.png b/screenshots/devices/Question3.en.png new file mode 100644 index 0000000000000000000000000000000000000000..e148e46622b1e19a8f193c914496030a885b8450 Binary files /dev/null and b/screenshots/devices/Question3.en.png differ diff --git a/screenshots/devices/Question7.en.png b/screenshots/devices/Question7.en.png new file mode 100644 index 0000000000000000000000000000000000000000..69623e10bdcb68b6c91d7363b065568e47a35ce6 Binary files /dev/null and b/screenshots/devices/Question7.en.png differ