3.1.2　初探布局和组件

构建用户界面（User Interface，UI）是Page的基本任务之一。优秀的UI是成就一个应用程序的关键因素之一。不过，再优秀的UI也是由一个个“零件”所组成的。这些“零件”被称为组件，包括文本、按钮等。有了这些组件还不够，还需要通过一定的规则将这些组件排列组合在一起。这样的规则被称为布局。UI设计不过就是在“摆弄”这些组件和布局。如果说组件是优美的旋律，布局是悠扬的节奏，内容是动听的歌声，那么这三者组合在一起就能够谱写美妙的乐章了。

布局和组件是一个用户界面的必备要素，前者是骨架，后者为血肉。

（1）组件（Component）：是指具有某一特定显示、交互或布局功能的可视化物件，分为显示类组件、交互类组件和布局类组件，所有的组件都继承于基类Component。

（2）布局（Layout）：即布局类组件，也被称为组件容器，所有的布局继承于基类ComponentContainer。

注意： 由于布局类组件属于组件，因此ComponentContainer也继承于Component。

布局之间可以嵌套，即布局之中还可以包含布局，且处于最为顶层的布局称为根布局。组件不能嵌套，并且必须放入布局中才能够显示在用户界面中，不能够单独显示。典型的布局与组件关系如图3-3所示。

AbilitySlice是用户界面的直接承载者，因此，接下来分析一下MainAbilitySlice类的默认创建代码，并介绍MainAbilitySlice是如何构建和加载用户界面的，代码如下：

MainAbilitySlice类继承于AbilitySlice类，包含了onStart、onActive和onForeground方法，这3种方法都是生命周期方法。关于这些生命周期方法将在3.2.1节进行详细介绍。

在onStart方法中，通过setUIContent方法设置该MainAbilitySlice的UI界面。setUIContent方法存在两种重载方法：

·　setUIContent（int layoutRes）

·　setUIContent（ComponentContainer componentContainer）

这两种重载方法对应了鸿蒙操作系统中的两种用户界面构建方法：通过XML文件构建用户界面和通过Java代码构建用户界面。通过XML代码可以以对象的方式声明布局和组件，可以显示布局和组件的层级结构，更加直观。通过Java代码可以直接在AbilitySlice中添加布局和组件，是最原始且运行效率最高的方法。

在3.1.3节和3.1.4节中将分别介绍用XML文件和Java代码设计用户界面的方法。 kL7hoKDJeCfAQiKOGnpw/zp4SMEMtANXz+uoBwhnaRDA/9jbFMUMAV8DUcrPFuH3