[文章]

HarmonyOS编写第一个页面

2020-9-17 14:34:30  141 鸿蒙OS XML
分享
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插入错误,请忽略,不影响后续操作。
加载XML布局
  • 在“项目”窗口中,选择“条目> 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错误,不影响后续操作,运行应用后即可消除。
  • 请参考应用运行,效果如下所示:

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章