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