devbox
机器思考机器
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

20.HarmonyOS App(JAVA)表格布局Layout使用方法

作者：机器思考机器 | 2024-02-06 15:40:28

赞

踩

20.HarmonyOS App(JAVA)表格布局Layout使用方法

ability_main.xml，实现计算器键盘按钮

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TableLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:row_count="6"
  7.     ohos:column_count="4"
  8.    >
  9.     <Button
  10.         ohos:id="$+id:btn_table"
  11.         ohos:height="35vp"
  12.         ohos:width="65vp"
  13.         ohos:text = "表格布局_计算器键盘"
  14.         ohos:background_element="#FF374FF1"
  15.         ohos:text_size="20fp"
  16.         ohos:text_color="#FFFDFCFC"
  17.         ohos:margin="6vp"
  18.         />
  19.     <Button
  20.         ohos:height="35vp"
  21.         ohos:width="65vp"
  22.         ohos:text = "7"
  23.         ohos:background_element="#FF7BA4CF"
  24.         ohos:text_size="20fp"
  25.         ohos:margin="6vp"
  26.         />
  27.     <Button
  28.         ohos:height="35vp"
  29.         ohos:width="65vp"
  30.         ohos:text = "8"
  31.         ohos:background_element="#FF7BA4CF"
  32.         ohos:text_size="20fp"
  33.         ohos:margin="6vp"
  34.         />
  35.     <Button
  36.         ohos:height="35vp"
  37.         ohos:width="65vp"
  38.         ohos:text = "9"
  39.         ohos:background_element="#FF7BA4CF"
  40.         ohos:text_size="20fp"
  41.         ohos:margin="6vp"
  42.         />
  43.     <Button
  44.         ohos:height="35vp"
  45.         ohos:width="65vp"
  46.         ohos:text = "/"
  47.         ohos:background_element="#FF7BA4CF"
  48.         ohos:text_size="20fp"
  49.         ohos:margin="6vp"
  50.         />
  51.  
  52.     <Button
  53.         ohos:height="35vp"
  54.         ohos:width="65vp"
  55.         ohos:text = "4"
  56.         ohos:background_element="#FF59EC23"
  57.         ohos:text_size="20fp"
  58.         ohos:margin="6vp"
  59.         />
  60.     <Button
  61.         ohos:height="35vp"
  62.         ohos:width="65vp"
  63.         ohos:text = "5"
  64.         ohos:background_element="#FF59EC23"
  65.         ohos:text_size="20fp"
  66.         ohos:margin="6vp"
  67.         />
  68.     <Button
  69.         ohos:height="35vp"
  70.         ohos:width="65vp"
  71.         ohos:text = "6"
  72.         ohos:background_element="#FF59EC23"
  73.         ohos:text_size="20fp"
  74.         ohos:margin="6vp"
  75.         />
  76.     <Button
  77.         ohos:height="35vp"
  78.         ohos:width="65vp"
  79.         ohos:text = "*"
  80.         ohos:background_element="#FF59EC23"
  81.         ohos:text_size="20fp"
  82.         ohos:margin="6vp"
  83.         />
  84.     <Button
  85.         ohos:height="35vp"
  86.         ohos:width="65vp"
  87.         ohos:text = "1"
  88.         ohos:background_element="#FF7BA4CF"
  89.         ohos:text_size="20fp"
  90.         ohos:margin="6vp"
  91.         />
  92.     <Button
  93.         ohos:height="35vp"
  94.         ohos:width="65vp"
  95.         ohos:text = "2"
  96.         ohos:background_element="#FF7BA4CF"
  97.         ohos:text_size="20fp"
  98.         ohos:margin="6vp"
  99.         />
  100.     <Button
  101.         ohos:height="35vp"
  102.         ohos:width="65vp"
  103.         ohos:text = "3"
  104.         ohos:background_element="#FF7BA4CF"
  105.         ohos:text_size="20fp"
  106.         ohos:margin="6vp"
  107.         />
  108.     <Button
  109.         ohos:height="35vp"
  110.         ohos:width="65vp"
  111.         ohos:text = "-"
  112.         ohos:background_element="#FF7BA4CF"
  113.         ohos:text_size="20fp"
  114.         ohos:margin="6vp"
  115.         />
  116.     <Button
  117.         ohos:height="35vp"
  118.         ohos:width="65vp"
  119.         ohos:text = "0"
  120.         ohos:background_element="#FF59EC23"
  121.         ohos:text_size="20fp"
  122.         ohos:margin="6vp"
  123.         />
  124.     <Button
  125.         ohos:height="35vp"
  126.         ohos:width="65vp"
  127.         ohos:text = "."
  128.         ohos:background_element="#FF59EC23"
  129.         ohos:text_size="20fp"
  130.         ohos:margin="6vp"
  131.         />
  132.     <Button
  133.         ohos:height="35vp"
  134.         ohos:width="65vp"
  135.         ohos:text = "+"
  136.         ohos:background_element="#FF59EC23"
  137.         ohos:text_size="20fp"
  138.         ohos:margin="6vp"
  139.         />
  140.     <Button
  141.         ohos:height="35vp"
  142.         ohos:width="65vp"
  143.         ohos:text = "="
  144.         ohos:background_element="#FF59EC23"
  145.         ohos:text_size="20fp"
  146.         ohos:margin="6vp"
  147.         />
  148.     <Button
  149.         ohos:id="$+id:btn_clear"
  150.         ohos:height="35vp"
  151.         ohos:width="65vp"
  152.         ohos:text = "clear"
  153.         ohos:background_element="#FF7BA4CF"
  154.         ohos:text_size="20fp"
  155.         ohos:margin="6vp"
  156.         />
  157.  
  158. </TableLayout>

 MainAbilitySlice.java

点击按钮，toast消息提示,设置按钮控件跨列效果

  1. package com.example.myapplication.slice;
  2.  
  3. import com.example.myapplication.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Button;
  7. import ohos.agp.components.Component;
  8. import ohos.agp.components.TableLayout;
  9. import ohos.agp.utils.LayoutAlignment;
  10. import ohos.agp.window.dialog.ToastDialog;
  11.  
  12. import static ohos.agp.components.TableLayout.*;
  13.  
  14. public class MainAbilitySlice extends AbilitySlice {
  15.     @Override
  16.     public void onStart(Intent intent) {
  17.         super.onStart(intent);
  18.         super.setUIContent(ResourceTable.Layout_ability_main);
  19.         Button button_table = (Button) findComponentById(ResourceTable.Id_btn_table);
  20.         Button button_clear = (Button) findComponentById(ResourceTable.Id_btn_clear);
  21.         TableLayout.LayoutConfig config = new TableLayout.LayoutConfig(TableLayout.specification(0,1),TableLayout.specification(0,4));
  22.         //TableLayout.specification(4,1),行规范
  23.         //TableLayout.specification(0,4),列规范
  24.         //设置宽度
  25.         config.width = button_table.getWidth()*4 + button_table.getMarginLeft()*6;
  26.         //设置高度
  27.         config.height = button_table.getHeight();
  28.  
  29.         //设置外边框
  30.         config.setMargins(button_table.getMarginLeft(),button_table.getMarginTop(),button_table.getMarginRight(),button_table.getMarginBottom());
  31.         button_table.setLayoutConfig(config);
  32.  
  33.  
  34.         TableLayout.LayoutConfig config2 = new TableLayout.LayoutConfig(TableLayout.specification(5,1),TableLayout.specification(0,4));
  35.         //TableLayout.specification(4,1),行规范
  36.         //TableLayout.specification(0,4),列规范
  37.         //设置宽度
  38.         config2.width = button_clear.getWidth()*4 + button_clear.getMarginLeft()*6;
  39.         //设置高度
  40.         config2.height = button_clear.getHeight();
  41.  
  42.         //设置外边框
  43.         config2.setMargins(button_clear.getMarginLeft(),button_clear.getMarginTop(),button_clear.getMarginRight(),button_clear.getMarginBottom());
  44.         button_clear.setLayoutConfig(config2);
  45.  
  46.         button_clear.setClickedListener(new ClickedListener() {
  47.             @Override
  48.             public void onClick(Component component) {
  49.                 new ToastDialog(getContext())
  50.                         .setText("点击了清除按钮")
  51.                         .setAlignment(LayoutAlignment.CENTER)
  52.                         .show();
  53.             }
  54.         });
  55.  
  56.  
  57.     }
  58.  
  59.     @Override
  60.     public void onActive() {
  61.         super.onActive();
  62.     }
  63.  
  64.     @Override
  65.     public void onForeground(Intent intent) {
  66.         super.onForeground(intent);
  67.     }
  68. }

 TableLayout的自有XML属性见下表：

表1 TableLayout的自有XML属性

属性名称

中文描述

取值

取值说明

使用案例

alignment_type

对齐方式

align_edges

表示TableLayout内的组件按边界对齐。

ohos:alignment_type="align_edges"

align_contents

表示TableLayout内的组件按边距对齐。

ohos:alignment_type="align_contents"

column_count

列数

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:column_count="3"

ohos:column_count="$integer:count"

row_count

行数

integer类型

可以直接设置整型数值，也可以引用integer资源。

ohos:row_count="2"

ohos:row_count="$integer:count"

orientation

排列方向

horizontal

表示水平方向布局。

ohos:orientation="horizontal"

vertical

表示垂直方向布局。

ohos:orientation="vertical"

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/机器思考机器/article/detail/63330
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号