上一篇文章的最后，我们得到了下面的画面：
这个画面作为演示画面还是寒酸了些，本文使用我们对其稍加修饰。
首先来看修改之前的状态：
就是在最外层布局中放置了一个文本信息。对这个布局我们进行3点修改。
1.增加一个图像文件。
2.扩大文字尺寸
3.将表示内容摆放到画面中间偏上的位置。
增加图像资源
截取DevEco图标并保存为jpg文件，然后将其放入media目录中。
在ability_main.xml文件中使用该文件：
代码语言：javascript复制<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的使用方法，不需要输入扩展名。
扩大文字尺寸
代码语言：javascript复制<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
