ArkUI 3.0 makes Multi-device Development Easier!

Author: wanglei, huawei UI programming framework technical expert

Since its inception, HarmonyOS has been designed to accommodate distributed, multi-device applications ranging from smart screens, cars and tablets to mobile phones and watches. Application UI interface development in multi-device scenario faces new difficulties and challenges, as shown in the figure below:

Figure 1 Challenges of multi-device development

In order to make the UI interface in color style, screen size, interaction mode and component function can still be displayed normally, it undoubtedly requires developers to spend a lot of energy on UI adaptation. Developers often need to implement multiple interface layouts (and even multiple projects) to accommodate design differences between devices. Even if the page is not very different, you need to do multi-device testing, and run multiple packages and compilations on the device or emulator to see the effect. Later maintenance also requires constant checking of compatibility between different devices, which greatly increases the workload of application developers.

In order to solve the above problems and simplify the development and debugging costs of developers on multiple devices, we put forward the design concept of multi-terminal deployment for one-time development, which can be deployed to different devices according to needs through a set of engineering codes. To achieve this goal, we offer a variety of adaptation methods and capabilities for developers in terms of Harmony system capabilities, ArkUI 3.0 framework capabilities and development tools capabilities. The following will be introduced to you one by one.

HarmonyOS capabilities

Let’s start with the capabilities provided at the system level. You do not need to adjust the page or service logic. You can add a few lines of configuration description to adapt multiple devices. System capabilities are independent of the development paradigm, so they can still be used under the new UI programming framework. Next we introduce two system capabilities in turn: analog small Windows and parallel horizons.

1. Simulate small Windows

Analog small window is the most common and simplest way of multi-device adaptation. By utilizing the suspension window capability of the system, low-resolution applications are displayed on a high-resolution screen in the form of a suspension window. The common usage scenario is that the mobile application is running on the tablet or PC, as shown in the following figure:

FIG. 2 Simulated small window

The way to use the simulation window is very simple. You only need to add two descriptions in the config.json file of the project and configure the target device type of the application and the window size of the response respectively to run the low-resolution application on the high-resolution device. Example code is as follows:

{" app ": {... SmartWindowSize: 360*640 smartWindowDeviceType: [" tablet "]},... } copyCopy the code

This is a good way to ensure that our app looks exactly like the original platform, without the need for additional interface adaptation. However, this approach also has limitations, the most significant problem is that there is no way to use the full high-resolution screen, the amount of data displayed on the screen does not increase with the increase of screen resolution, resulting in a waste of space on the screen. To solve this problem, the system provides another adaptive scheme — parallel horizon.

Parallel horizon

The system provides the ability of parallel view for foldable screen and tablet device. With the help of the idea of split screen display, the screen is divided into left and right parts to display the content of two pages associated with the application. In this way, each area can maintain a good interface display effect, but also increase the amount of effective data in the screen, good use of the screen display area. It is usually used for news and shopping scenarios, and the related two pages are displayed at the same time, as shown in the figure below:

Figure 3. Parallel horizon

To use parallel horizons, you first need to configure metaData in the config.json file to declare support for parallel horizons. At the same time, the easyGo. json file needs to be added to configure the page routing relationship and guide the system to perform split screen display.

For detailed instructions on the use of parallel horizons, please refer to the official website:

Developer.harmonyos.com/cn/docs/doc…

ArkUI 3.0 framework capabilities

The preceding two scenarios are multi-terminal adaptation solutions that can be implemented through configuration. They are simple to use, but their application scenarios are limited. The ArkUI 3.0 framework provides media queries, polymorphic controls, atomic layouts, and raster systems to make it easier for developers to select the right capabilities for UI building.

1. Media query

Media queries are a standard capability provided by CSS and a key part of responsive Web design. This capability remains in the new UI paradigm as a fundamental UI responsive design capability. In the new UI paradigm, media query capabilities are provided through API interfaces. The scope of exploration includes page size, device resolution, screen orientation, page aspect ratio, screen size, device type, screen type, and theme mode. Developers can customize the processing according to different query results. For example, when the screen orientation changes, you can adjust the layout style and component display effect in the interface; You can also control the display and hiding of components according to different device types. And provides event notification when the query status changes.

Figure 4 Media query

2. Polymorphic components

UI interface building is inseparable from the use of components. The ArkUI 3.0 framework provides developers with polymorphic components that encapsulate the styles and interactions of different devices and do most of the adaptation work for developers. When using polymorphic components, developers don’t need to worry about device differences, just focus on functionality implementation.

Here’s an example of how the same set of code works on a phone, a smart screen, and a car.

Figure 5. Polymorphic components

Example code is as follows:

Column() {Text(" mobile/tablet ").margin({top: 150}) Button(" ordinary Button ").margin({top: 100}) 40}). OnClick (() => {alertdialog.show ({title: 'new version found ', message:' currently using mobile data network, will use XXX MB traffic, whether to update ', primaryButton: {value: 'update now, the action: () = > {}}, secondaryButton: {value:' later 'action: () = > {}}}})}) copyCopy the code

Product designers are often not satisfied with using system default styles and want to be able to use custom styles for different platforms. To avoid component-by-component style adjustments by developers, the ArkUI 3.0 framework abstractions component-style-related Settings (such as color, size, fillet radian, content text, etc.) into a parameter list that maps by parameter name and value. The UI component style attribute values come from this parameter sheet, and developers and designers can adjust the display of the component simply by adjusting the parameter values.

3. Atomic layout

The biggest difference between devices is the screen resolution, which depends on the ability to adapt to the layout. We distilled seven atomic layout capabilities for common development scenarios. These layouts can be used independently or in combination with multiple layouts. Here we introduce each of the seven atomic layout abilities in turn:

(1) Folding layout: it is often used for horizontal and vertical screen adaptation or mobile phone switching to the tablet scene. For example, if there is less space in the vertical direction but more space in the horizontal direction, consider using a folded layout to change the layout from vertical to horizontal.

Figure 6. Folded layout

Folding layout using Flex layout folding ability, with layout constraints Settings, can achieve the effect of folding layout. Example code is as follows:

Flex({direction: FlexDirection.Column, wrap: FlexWrap.Wrap}) { Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) { Text("First Content") .fontColor(Color.White) .fontSize(30) } .constraintSize({minWidth: '50%', minHeight: '50%', maxWidth: 400}) .backgroundColor(Color.Gray) Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) { Text("Second Content") .fontSize(30) .fontColor(Color.White) } .constraintSize({minWidth: BackgroundColor (' RGB (207, 171, 103)') duplicateCopy the code

(2) Evenly distributed layout: it is often used for scenes with fixed content quantity and evenly distributed display, such as toolbar and bottom menu bar.

FIG. 7 Evenly distributed layout

Example code is as follows:

@Entry @Component struct Index { build() { Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly}) { Text('Hello') .fontSize(20) .borderColor(Color.Red) .borderWidth(1) Text('World') .fontSize(20) .borderColor(Color.Red) .borderWidth(1) Text('Ark') .fontSize(20) .borderColor(Color.Red) .borderWidth(1) BorderColor (color.red).borderWidth(1)}.width('100%').height('100%')}} CopyCopy the code

Just configure the FlexAlign. Spaceinstituted mode to evenly display the contents in the Flex component.

(3) Hidden layout: it is a relatively advanced layout method, which is often used in scenes with large resolution changes and different contents displayed under different resolutions. The main idea is to maintain the best display effect by increasing or decreasing the display content. For example, the media playback controller can display all the controls (including play, pause, previous, next, fast-forward, fast-back, and possibly like and favorites buttons) in a widescreen scene, while keeping only some controls (such as play, pause, previous, and next buttons) in a low-resolution scene.

Figure 8 Hide the layout

Hiding layout usage is as simple as setting the displayPriority through the displayPriority method, and elements with the same priority are shown or hidden at the same time. When calculating the layout, it calculates the currently available components to display according to the current available space. Example code is as follows:

Row({space: 10}) { Text('1') .width(100) .textAlign(TextAlign.Center) .fontSize(40) .backgroundColor(Color.Red) .displayPriority(2) Text('2') .width(100) .fontSize(40) .textAlign(TextAlign.Center) .backgroundColor(Color.Red) .displayPriority(1) Text('3') .width(100) .textAlign(TextAlign.Center) .fontSize(40) .backgroundColor(Color.Red) .displayPriority(3) Text('4') .width(100) .textAlign(TextAlign.Center) .fontSize(40) .backgroundColor(Color.Red) .displayPriority(1) Text('5').width(100).textalign (textalign.center).fontSize(40).backgroundcolor (color.red).displayPriority(2)} CopyCopy the code

(4) Proportion layout: it is a very common layout, which is displayed in proportion according to the container size.

Figure 9 Proportion layout

Scale adjustment can be achieved by setting the percentage size. Example code is as follows:

@Entry @Component struct Index { build() { Row() { Text('Hello') .fontSize(20) .width('50%') .backgroundColor(Color.Red)  Text('World') .fontSize(20) .width('20%') .backgroundColor(Color.Yellow) Text('Ark') .fontSize(20) .width('15%') .backgroundColor(Color.Green) Text('UI') .fontSize(20) .width('15%') .backgroundColor(Color.Gray) } .width('100%') .height('100%')}Copy the code

(5) Stretching and scaling layout: component size changes with parent container size to produce stretching or scaling display effect.

Figure 10 Stretch and scale the layout

Stretch or scale the display effect by setting the scale relative to the container. Example code is as follows:

Row() {Image($r('app.media.background')).objectFit(imagefit.fill).width('100%').height('100%')Copy the code

(6) fixed width to height ratio layout: maintain their own width to height ratio when stretching and zooming, usually used in the picture zooming scene, can keep the picture display effect normal, avoid the picture being elongated or flattened, causing display distortion.

Figure 11 fixed aspect ratio layout

By setting the aspect ratio, the image can be stretched according to the fixed aspect ratio to ensure that the image will not be deformed. Example code is as follows:

Row() {Image($r('app.media.background')).objectFit(imagefit.fill).width('100%').height('100%').aspectratio (1.2)Copy the code

(7) Extended layout: Adjust the amount of content displayed according to size, mainly through capabilities like lists.

Figure 12 extended layout

Different amounts of content can be displayed depending on the width, and more content can be displayed by sliding. Example code is as follows:

@Entry @Component struct Index { private data: string[] = ['Hello', 'World', 'Ark', 'UI', 'This', 'Is', 'Layout', 'Demo'] build() { Flex({direction:FlexDirection.Column, justifyContent: FlexAlign.Center}) { List({space: 10}) { ForEach(this.data, (item) => { ListItem() { Text(item) .fontSize(20) .width(80) }.height(80) .backgroundColor(Color.Red) }) } .listdirection (Axis.horizontal).width('100%').height(100)}.width('100%').height('100%')}Copy the code

This example uses a List as a layout container for linear content arrangement and supports sliding responses.

4. Grid system

The ArkUI 3.0 framework also provides a complete grid system. A grid system is a grid design from UX design that divides the screen width into different columns based on a different number of grids, and the size of the component occupies one or more grids. A layout system designed in this way is called a grid system. Using a grid system, you can screen out differences in screen resolution and keep the relative size of the content displayed consistent across screens of different resolutions.

Common grid systems are 8 grid systems and 12 grid systems, but we provide a dynamic grid system, which can adjust the number of grids dynamically according to different screen sizes. When using a dynamic grid system, devices with different resolutions use different grid configurations. For example, a mobile phone uses a 4-grid system for portrait screens, an 8-grid system for landscape and folding screens, and a 12-grid system for large screens.

Figure 13. Dynamic grid system

For ease of use by developers, the ArkUI 3.0 framework provides a grid layout container, GridContainer. Let’s look at an example with the following code:

Stack() { GridContainer({sizeType: SizeType.Auto}) { Row() { Button('OK') .fontSize(30) .gridSpan(2) .useSizeType({lg: 4})}}} copyCopy the code

The grid layout container can be set to a fixed grid number or to Auto mode. This example uses Auto mode, where the grid layout container dynamically adjusts the number of grids based on the width. Using the useSizeType attribute method, you can also set the number of grids that the component occupies in different grid modes. For example, “.usesizeType ({lg: 4}) “indicates that in a large grid system (i.e., a 12-grid system), the Button component width occupies a 4-grid display.

So, this example looks like this on phones and tablets:

Figure 14 shows the effect

3. Ability to develop tools

In addition to the above system capabilities and ArkUI 3.0 framework capabilities, DevEco Studio provides developers with a wide variety of development templates, as well as multi-device preview capabilities, to reduce developer commissioning costs and improve development efficiency.

1. Develop templates

Development templates mainly include project templates and card templates.

Project templates: DevEco Studio presets a wealth of project templates that make it easy to create projects for all devices using the project wizard and automatically generate the corresponding code and resource templates. When creating a project, the developer can pick the appropriate project template.
Card Templates: DevEco Studio offers a wide variety of card templates, giving developers the flexibility to quickly build service cards based on the type of information they need to display.

FIG. 15 Engineering template and card template

2. Preview multiple devices

DevEco Studio also supports multi-device preview capabilities, allowing developers to view the UI on multiple devices in the same window. The preview device and the real machine use the same rendering engine and UI frame, can maximize the preview effect and the real machine running effect consistent. The following video demonstrates the multi-device preview capability:

Interested friends can be downloaded from the website and experience DevEco Studio new version: developer.harmonyos.com/cn/develop/…

Fourth, concluding remarks

To achieve the perfect multi-terminal deployment effect of one development, the participation of developers is indispensable. The UI development framework and system have carried out preliminary exploration in the process of realizing the multi-terminal deployment of one development. We also expect developers to feedback more pain points in the process of multi-device UI development, and expect the capabilities provided by the system framework. Developers are welcome to join us in the open source community to enrich the ability to develop multiple deployments at once!