[文章]HarmonyOS编写第一个页面
0
2
在Java UI框架中，提供了两种编写布局的方式：在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质上的区别，以便熟悉两种方式，我们将通过XML的方式编写第一个页面，通过代码的方式编写第二个页面。
XML编写页面- 在“ Project”窗口中，打开“ entry> src> main> resources> base”，快捷单击“ base”文件夹，选择“ New> Directory”，命名为“ layout”。
- 右键单击“ layout”文件夹，选择“新建>文件”，命名为“ main_layout.xml”。
在“ layout”文件夹下可以看到补充了“ main_layout.xml”文件。
- ：“ main_layout.xml”文件，添加一个文本和一个按钮，示例代码如下：
- <？xml版本=“ 1.0”编码=“ utf-8”？>
- <DependentLayout
- xmlns：ohos =“ http://schemas.huawei.com/res/ohos”
- ohos：width =“ match_parent”
- ohos：height =“ match_parent”
- ohos：background_element =“＃000000”>
- <文字
- ohos：id =“ $ + id：text”
- ohos：width =“ match_content”
- ohos：height =“ match_content”
- ohos：center_in_parent =“ true”
- ohos：text =“ Hello World”
- ohos：text_color =“ white”
- ohos：text_size =“ 32fp” />
- <按钮
- ohos：id =“ $ + id：button”
- ohos：width =“ match_content”
- ohos：height =“ match_content”
- ohos：text_size =“ 19fp”
- ohos：text =“下一步”
- ohos：top_padding =“ 8vp”
- ohos：bottom_padding =“ 8vp”
- ohos：right_padding =“ 80vp”
- ohos：left_padding =“ 80vp”
- ohos：text_color =“ white”
- ohos：background_element =“ $ graphic：button_element”
- ohos：center_in_parent =“ true”
- ohos：align_parent_bottom =“ true” />
- </ DependentLayout>
- 上述按钮的背景是通过“ button_element”来显示的，需要在“ base”目录下创建“ graphic”文件夹，在“ graphic”文件夹中新建一个“ button_element.xml”文件。“ button_element.xml”的示例代码如下：
- <？xml版本=“ 1.0”编码=“ utf-8”？>
- <形状
- xmlns：ohos =“ http://schemas.huawei.com/res/ohos”
- ohos：shape =“ oval”>
- <固体
- ohos：color =“＃007DFF” />
- </ shape>
如果DevEco Studio提示xmlns插入错误，请忽略，不影响后续操作。
- 在“项目”窗口中，选择“条目> src>主> java> com.example.helloworld>切片”，打开“ MainAbilitySlice.java”文件。
- 重构onStart（）方法加载XML布局，示例代码如下：
- 包com.example.myapplication.slice;
- 导入com.example.myapplication.ResourceTable;
- 导入ohos.aafwk.ability.AbilitySlice;
- 导入ohos.aafwk.content.Intent;
- 公共类MainAbilitySlice扩展了AbilitySlice {
- @Override
- public void onStart（Intent intent）{
- super.onStart（intent）;
- super.setUIContent（ResourceTable.Layout_main_layout）; //加载XML布局
- }
- @Override
- 公共无效onActive（）{
- super.onActive（）;
- }
- @Override
- 公共无效onForeground（意图意图）{
- super.onForeground（intent）;
- }
- }
如果DevEco Studio提示Layout_main_layout错误，不影响后续操作，运行应用后即可消除。 - 请参考应用运行，效果如下所示：
回帖高级模式
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉