自学鸿蒙应用开发（4）- 画面布局

上一篇文章的最后，我们得到了下面的画面：

这个画面作为演示画面还是寒酸了些，本文使用我们对其稍加修饰。

首先来看修改之前的状态：

就是在最外层布局中放置了一个文本信息。对这个布局我们进行3点修改。

1.增加一个图像文件。

2.扩大文字尺寸

3.将表示内容摆放到画面中间偏上的位置。

增加图像资源

截取DevEco图标并保存为jpg文件，然后将其放入media目录中。

在ability_main.xml文件中使用该文件：

<Image
    ohos:id="$+id:image"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:layout_alignment="center"
    ohos:image_src="$media:DevEco"
/>

注意ohos:image_src的使用方法，不需要输入扩展名。

扩大文字尺寸

<Text
    ohos:id="$+id:text_helloworld"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
ohos:text="你好，鸿蒙！"
    ohos:text_size="100"
/>

调整文字尺寸为100。

调整布局

在原有布局基础上，增加另外的DirectionalLayout管理图像和文字，并增加三处Component用于调整个要素之间的间隔。

执行结果：

DirectionalLayout的详细信息可以参照鸿蒙官方的开发文档：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-directionallayout-0000001050769565