HDC2021 will be officially opened in Songshan Lake, Dongguan on October 22. Codelab experience zone will be set up at the conference, with lots of fun and interesting demos waiting for you to experience. Want a quick start on HarmonyOS? Learn what’s new in HarmonyOS? The following Codelab demos are not to be missed
Minimalist declarative UI framework ArkUI
With the increasing types of user equipment, mobile phone, tablet, screen, vehicle, wear and other equipment for the application UI interface development put forward more diverse demands of the development of the application interface of application developers in scenarios to consider a variety of equipment, which can lead to increase engineering code, even need to maintain multiple project to fit different equipment.
ArkUI HarmonyOS provides a minimalist, declarative UI development framework. ArkUI is HarmonyOS ‘suite of JS/TS capabilities designed to help application developers efficiently develop cross-end APPLICATION UIs that automatically adapt to a variety of screen forms. Developers don’t have to worry about how the framework implements UI drawing and rendering, just focus on application development for minimal and efficient development.
This article from Codelab shows you how to use the ArkUI development paradigm to quickly develop a UI with transitions, swiping up and down, double-clicking to zoom in and out of images, and swiping left and right to switch between images, as shown in Figure 1:
ArkUI more details, please go to website Codelab:developer.huawei.com/consumer/cn…
Use of ArkUI base component Slider
Slider is a Slider that is used for music playback progress bar, system volume adjustment, screen brightness adjustment, etc. This component can be used in any scenario where progress is involved.
HarmonyOS ‘Minimalist and statement UI development framework (ArkUI) provides a wealth of interfaces and components. In this Codelab, we will use a simple sample to learn how to use the Slider component. We will also use the Image, Slider, and Text components to create an adjustable windmill animation. The finished effect is shown in Figure 2:
More ArkUI based component the Slider development details to website Codelab: developer.huawei.com/consumer/cn…
Develop multiple deployments at once
In the multi-scene and multi-terminal era, consumers expect the same experience and services on different terminals, and the operation should be the same as using the same device. This poses a big challenge for developers, as there are huge variations in device form/hardware, and developers need to develop multiple sets of code for multiple devices.
With a unified programming framework for multiple terminals, a unified abstract UI control that automatically ADAPTS to multi-terminal hardware capabilities, and an adaptive layout for terminals with different screens, developers need not develop multiple sets of code for different devices, but only one set of application engineering, and can be deployed on multiple terminals. It not only improves the development efficiency, but also reduces the maintenance difficulty of the code.
ArkUI was used for Codelab to implement multiple deployment in one development. The preview results are shown in Figure 3:
Once more “development, multiterminal deployment” development details, to the official website Codelab: developer.huawei.com/consumer/cn…
Parallel to the horizon
Parallel view horizon is a solution to realize dual-window display in the application, which is suitable for tablet, fold-screen and other large-screen devices. In simple terms, the device is used in landscape mode. When entering “parallel horizon” mode, an app will be displayed on the left and right screens, and neither side will interfere with each other.
For example: when browsing the web to find information, you can look at the search results while looking at the specific page after opening, the efficiency of information search greatly improved…
In this paper, Codelab mainly uses parallel horizons to realize dual Windows within the application, displaying two Ability sides in different Windows of the same application. The left page displays the picture list, and the picture layout can be adjusted adaptively according to the screen width; The page on the right shows the selected picture. You can crop, zoom, mirror, save and transfer the picture. The effect is shown in Figure 4: the left side is the photo gallery, and the right side is the view of the larger image.
More development details, parallel to the horizon to website Codelab:developer.huawei.com/consumer/cn…
Want to learn more about HarmonyOS ‘new Codelab feature? HDC2021 Codelab experience zone waiting for you ~ more wonderful content, please see the official BBS huawei developers – developer.huawei.com/consumer/cn…