Why canto III, the first two cantos?

The HarmonyOS application was developed in a fragmented way, but many of the components were not used before when preparing the complex UI Demo with six layout combinations. So we are going to refine the body of knowledge in the form of chapters to simplify HarmonyOS application development and reduce the complexity of learning. Why start with Chapter 3? Because the first two chapters are some theoretical knowledge, I will spare some time to sort out and publish articles later.

1. Main contents of this chapter

An excellent APP not only lies in the business functions it provides, but also has a novel, beautiful and easy to operate UI interface, which can give users a new and intuitive visual operation. Therefore, the beauty and function of THE APP UI interface are equally important.

For programmers, generally pay attention to the function of the application itself is the main points, is how to implement this function, the function has distinguishing feature very much, but the user group is not just a programmer, for ordinary users, their concern is just a beautiful not beautiful interface, interactive operation is fluent, operation is simple, can achieve the desired effect. So the user only cares about the UI.

UI is a graphical display displayed in front of users to display information or provide interactive modes for users. A UI is made up of one or more elements, such as the HelloWorld example, where the HelloWorld interface is made up of the Text component, so we can say that the UI is made up of one element. Our login page, for example, input box by the user account, password input box, login authentication code input box, and button, although there are two types of its UI components, but we can’t say it is made up of two elements, it is composed of four elements, the number of elements can not reduce because of the types of repetition.

So in this chapter we need to understand the elements that make up the page. The elements of a UI interface are collectively referred to as components, which are grouped together to form a layout based on a hierarchical structure. Components can neither be displayed nor interacted with without being added to any layout, so a UI interface must contain at least one layout that displays state. So in the sections that follow, we’ll elaborate on the layout and components that make up the UI.

2. Layout and components in the HarmonyOS app

HarmonyOS ‘Ability brings up a UI interface on the screen that displays content that users can view and interact with. The UI for HarmonyOS is made up of Components and ComponentContainer. Components are objects (also known as elements) that are drawn on the screen and fall into two categories: display classes and interaction classes. Layout is a container that holds other layouts and components, manages properties such as the arrangement of components, and implements complex UI interfaces through complex combinations.

In HarmonyOS, ComponentContainer is a subclass of the Component class, which means that a Component container can be considered a special Component that is made up of one or more layouts or components.

Component is the base class for all components in the UI. UI components generally inherit directly or indirectly from the Component class or its subclasses. Developers can set event handling callbacks to Component to create an interactive Component.

ComponentContainer holds and lays out Component or ComponentContainer objects as containers.

UI interface, the first component container (layout), in the component container to accommodate one or more components or component containers, to define their style, that is, to improve the UI interface.

Common layout properties and parameters

Each layout provides LayoutConfig inner class according to their own characteristics, the inner class inheritance ComponentContainer. LayoutConfig class, its function is to set layout for child components properties and parameters, by specifying a layout properties can constraint child components in the layout of the display effect. For example, set the width of the layout to MATCH_PARENT (which takes up the entire screen) and the width of the child component Text to MATCH_CONTENT (which is rendered by content size), and you can also give a fixed width value. In all six layouts, width and height are common attributes, and special attributes are provided for different layouts. For example, DirectionalLayout provides a weight attribute, which is used to set the weight, while other layouts have no weight.

This section ends here. This is our theoretical understanding of components and layouts in the UI. Starting in the next section, we will discuss various components and layouts in detail.

By IT Ming

For more information, visit Harmonyos.51cto.com, an official collaboration between 51CTO and Huawei

[Free live broadcast public class – Based on hongmeng IoT Kit guess number game development actual combat]