HarmonyOS编写第一个页面 - HarmonyOS技术社区 - 电子技术论坛 - 广受欢迎的专业电子论坛
分享 收藏 返回

小伍 关注 私信
[文章]

HarmonyOS编写第一个页面

编写第一个页面
在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”？>
    •         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” />

  • 上述按钮的背景是通过“ 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” />

    说明
    如果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错误，不影响后续操作，运行应用后即可消除。
  • 请参考应用运行，效果如下所示：

更多回帖

我也要说两句 回帖

相关经验

×
发帖