2.5【HarmonyOS鸿蒙开发】表格布局TableLayout

最新推荐文章于 2024-09-06 20:50:11 发布
最新推荐文章于 2024-09-06 20:50:11 发布
阅读量668 收藏 4
点赞数
分类专栏： HarmonyOS鸿蒙系统应用开发教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanru723/article/details/118176063
版权

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

TableLayout使用表格的方式划分子组件。

0000000000011111111.20210402161825.15488980687844103312978336109283

一、支持的XML属性

TableLayout的共有XML属性继承自：Component

属性名称中文描述取值取值说明使用案例
id控件identity，用以识别不同控件对象，每个控件唯一integer类型仅可用于配置控件的id。ohos:id="$+id:component_id"
theme样式引用仅可引用pattern资源。ohos:theme="$pattern:button_pattern"
width宽度，必填项float类型，match_parent，match_contentohos:width=“20"
ohos:width=“10vp"
ohos:width=”$float:size_value”
height高度，必填项float类型，match_parent，match_contentohos:height=“20”
ohos:height=“20vp”
ohos:height="$float:size_value"
min_width最小宽度float类型ohos:min_width=“20"
ohos:min_width=“20vp"
ohos:min_width=”$float:size_value”
min_height最小高度float类型ohos:min_height=“20"
ohos:min_height=“20vp"
ohos:min_height=”$float:size_value”
alpha透明度float类型取值范围在0~1。ohos:alpha=“0.86"
ohos:alpha=”$float:value"
enabled是否启用boolean类型ohos:enabled=“true"
ohos:enabled=”$boolean:true"
visibility可见性visible，invisible，hideohos:visibility=“visible”
padding内间距float类型
margin外边距float类型

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”

二、使用表格布局

2.1 默认一列多行

TableLayout默认一列多行。

我们先修改一下布局文件，项目/entry/src/main/resources/base/layout/下的ability_main_layout文件。

删除原来的代码，创建TableLayout：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">
</TableLayout>

然后在里面添加4个Text子控件：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#87CEEB"
    ohos:layout_alignment="horizontal_center"
    ohos:padding="8vp">

    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:background_element="#00BFFF"
        ohos:margin="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</TableLayout>

效果图：

WX20210603-111727@2x
2.2 设置多行多列

设置行数和列数：

<TableLayout
    ...
    ohos:row_count="2"
    ohos:column_count="2">

只需要在TableLayout标签中设置好行数和列数，其他的内容不用改，效果图：

WX20210603-111957@2x
2.3 设置对齐方式

在XML中设置对齐方式，以”align_contents“为例：

<TableLayout
    ...
    ohos:alignment_type="align_contents">
    ...
</TableLayout>

demo1_table_layout.xml示例代码：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_contents"
    ohos:background_element="#22AA0000"
    ohos:column_count="3"
    ohos:padding="8vp">

<!--
    TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐。
-->

    <Text

        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="32vp"
        ohos:padding="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="32vp"
        ohos:padding="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="5"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="#AA00AA"
        ohos:margin="8vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

效果图：

WX20210626-185258@2x

如上代码，将TableLayout的对齐方式修改为边界对齐。

<TableLayout
    ...
    ohos:alignment_type="align_edges">

    ...
        
</TableLayout>

效果图：

WX20210626-185408@2x

2.4 设置子组件的行列属性(合并单元格)

TableLayout的合并单元格的功能可以通过设置子组件的行列属性来实现。

现在layout目录下新建一个xml布局文件：demo2_table_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment_type="align_edges"
    ohos:background_element="$graphic:layout_borderline"
    ohos:column_count="3"
    ohos:padding="8vp"
    ohos:row_count="3">

    <Text
        ohos:id="$+id:text_one"
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="1"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="2"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="3"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="4"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="5"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>

    <Text
        ohos:height="48vp"
        ohos:width="48vp"
        ohos:background_element="$graphic:table_text_bg_element"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:text="6"
        ohos:text_alignment="center"
        ohos:text_size="14fp"/>
</TableLayout>

graphic目录下的背景文件：layout_borderline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
</shape>

table_text_bg_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="5vp"/>
    <stroke
        ohos:width="1vp"
        ohos:color="gray"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>

预览效果：

WX20210626-185651@2x

在Java代码中设置子组件的行列属性，代码如下：

package com.example.hanrutablelayout.slice;

import com.example.hanrutablelayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_table_layout);

        Text text1 = (Text)findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
        // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);


        text1.setLayoutConfig(tlc);



    }
    // vp转为px
    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

注意：在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

效果图：

WX20210626-190037@2x

// 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
// 第一个参数int start：表示元素在表格布局中的起始位置。值不能小于0。
// 第二个参数int size：表示元素大小。值不能小于0。

public static TableLayout.Specification specification(int start, int size)
  
// 第三个参数int alignment：指示元素的对齐模式。ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。
public static TableLayout.Specification specification(int start, int size, int alignment)

如果我们尝试再加一个参数：


    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo2_table_layout);

        //获取表格布局对象
//        TableLayout tableLayout1 = (TableLayout)findComponentById(ResourceTable.Id_tablelayout1);

//        TableLayout.CellSpan cellSpan = new TableLayout.CellSpan(1,3);

        Text text1 = (Text)findComponentById(ResourceTable.Id_text_one);
        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));
        // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
        // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
        // tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);
        // tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);

        // 第三个参数表示对齐方式：
        // ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。
        // TableLayout.Alignment.ALIGNMENT_FILL，
        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_BOTTOM);
        text1.setLayoutConfig(tlc);



    }
	...
}

效果：

WX20210626-184932@2x

再改一下：

        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);
        text1.setLayoutConfig(tlc);

效果图：

WX20210626-190333@2x

三、写个例子

我们设计一个简易计算器的界面：

WX20210626-194608@2x

首先我们先创建一个xml布局文件：demo3_calculator.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal"
    ohos:row_count="4"
    ohos:column_count="4"
    ohos:alignment_type="align_edges"
    ohos:id="$+id:tablelayout1"
    ohos:background_element="#000000">

<!--    第一行-->
    <Text
        ohos:id="$+id:text_show"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#EEEEEE"
        ohos:margin="5vp"
        ohos:text_alignment="right|vertical_center"
        ohos:text_size="60fp"
        ohos:padding="5vp"
        ohos:text_color="#000000"
        ohos:text="0"/>
<!--    第二行-->
    <Button
        ohos:id="$+id:btn_o"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:margin="5vp"
        ohos:text_color="#000000"
        />
    <Button
        ohos:id="$+id:btn_delete"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:margin="5vp"
        ohos:text_color="#ffffff"
        ohos:text="删除"
        ohos:text_size="30fp"
        />


<!--    第三行：789/-->
    <Button
        ohos:id="$+id:btn7"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="7"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn8"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="8"/>
    <Button
        ohos:id="$+id:btn9"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="9"/>
    <Button
        ohos:id="$+id:btn_div"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="/"/>

    <!--    第四行：456X-->
    <Button
        ohos:id="$+id:btn4"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="4"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn5"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="5"/>
    <Button
        ohos:id="$+id:btn6"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="6"/>
    <Button
        ohos:id="$+id:btn_mul"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="X"/>

    <!--    第五行：123- -->
    <Button
        ohos:id="$+id:btn1"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="1"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn2"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="2"/>
    <Button
        ohos:id="$+id:btn3"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="3"/>
    <Button
        ohos:id="$+id:btn_sub"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="-"/>
    <!--    第六行：.0=+ -->
    <Button
        ohos:id="$+id:btn_dot"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text="."
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        />
    <Button
        ohos:id="$+id:btn0"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="0"/>
    <Button
        ohos:id="$+id:btn_equ"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="="/>
    <Button
        ohos:id="$+id:btn_add"
        ohos:height="100vp"
        ohos:width="80vp"
        ohos:background_element="#3A3C39"
        ohos:text_size="60fp"
        ohos:text_color="#ffffff"
        ohos:margin="5vp"
        ohos:text="+"/>
</TableLayout>

然后我们在slice下新建一个AbilitySlice文件：CalculatorAbilitySlice.java

package com.example.hanrutablelayout.slice;

import com.example.hanrutablelayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.Button;
import ohos.agp.components.TableLayout;
import ohos.agp.components.Text;

public class CalculatorAbilitySlice extends AbilitySlice {
    private Text textShow;
    private Button btn_o;
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_demo3_calculator);
        initComponent();
        // 调整页面布局
        TableLayout.LayoutConfig tlc1 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80));
        // 设置表格规格：返回一个基于元素在表布局中的起始位置和元素大小返回规范实例。
        // TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
        // 第三个参数表示对齐方式：
        // ALIGN_EDGES表示边界对齐；ALIGN_CONTENTS表示页边距对齐。
        // TableLayout.Alignment.ALIGNMENT_FILL，
        tlc1.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 4, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc1.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1, TableLayout.Alignment.ALIGNMENT_FILL);
        textShow.setLayoutConfig(tlc1);

        TableLayout.LayoutConfig tlc2 = new TableLayout.LayoutConfig(vp2px(80), vp2px(80));
        tlc2.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 3, TableLayout.Alignment.ALIGNMENT_FILL);
        tlc2.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1, TableLayout.Alignment.ALIGNMENT_FILL);
        btn_o.setLayoutConfig(tlc2);





    }
    // vp转为px
    private int vp2px(float vp) {
        return AttrHelper.vp2px(vp, getContext());
    }
    private void initComponent(){
        textShow = (Text) findComponentById(ResourceTable.Id_text_show);
        btn_o = (Button) findComponentById(ResourceTable.Id_btn_o);
    }
}

修改一下MainAbility：

package com.example.hanrutablelayout;

import com.example.hanrutablelayout.slice.CalculatorAbilitySlice;
import com.example.hanrutablelayout.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // super.setMainRoute(MainAbilitySlice.class.getName());
        super.setMainRoute(CalculatorAbilitySlice.class.getName());
    }
}

然后运行即可。

韩茹_
关注
专栏目录
HarmonyOS鸿蒙基于Java开发: Java UI 常用布局 TableLayout
sybh的博客
01-14 813
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_cou
Android Studio实现简易计算器（表格布局TableLayout）
08-19
主要为大家详细介绍了Android Studio实现简易计算器，表格布局TableLayout，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
鸿蒙开发之表格布局(TableLayout)
qq_46054898的博客
08-16 1121
一、描述 表格布局可以实现行列式摆放组件 ， 也就是说可以把组件放在不同的单元格内进行布局呈现 。 它既可以通过xml代码实现也可以通过java代码实现 ， 我们这里主要介绍xml实现方式。 二、表格布局重要的属性 我们知道html重点表格的框架的基本样式或结构也是通过table的基本属性实现的 ， 然而在鸿蒙中也不例外。下面列出来鸿蒙表格布局的重要属性。 属性名称 取值 描述 alignment_type 对齐方式 align_edges
鸿蒙开发5.0【高级图表实现】 解决方案
最新发布
2301_76813281的博客
09-06 881
mpchart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
鸿蒙系统中的TableLayout网格布局
u010574271的博客
06-02 722
文章目录前言前期准备创建页面tableLayout的使用定义布局定义text组件的样式定义text组件模拟器显示如下：设置行数和列数 前言 TableLayout是使用表格的方式划分子组件 TableLayout的自有XML属性见下表 参考文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-tablelayout-0000001060379893 下面我们就以案例来展示其应用 前期准备 我们还
零基础学鸿蒙编程-UI控件_TableLayout
蓝不蓝编程
11-25 635
什么是TableLayout TableLayout又称表格布局,用于以表格形式展示内容. 1. 样例：2*2表格 效果图 代码 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:backgro
HarmonyOS：ListContainer实现表格
KI的博客
10-26 4667
自定义ListContainer实现表格。
关于鸿蒙系统报告,华为鸿蒙操作系统研究报告：全景解构（21页）
weixin_33772442的博客
05-27 847
鸿蒙微内核从底层即为物联网设计。上述可知，微内核的最大特性是仅在内核中保留 最核心功能，因此对于鸿蒙而言：连接实时性更好(响应时延降低 25.7%、时延波动率降 低 55.6%)，同时结合 5G 低时延场景，尤其适用于工业控制、智能交通等物联网领域； 可以做到故障隔离，最大程度保证系统的稳定性与安全性，在 5G 超多连接场景下更能满足 万物互联的要求。 鸿蒙微内核体现分布式的特点，解决 IoT 生...
Android移动应用开发表格布局TableLayout的特点.pdf
07-10
在Android移动应用开发中，表格布局（TableLayout）是一种强大的布局工具，它允许开发者以类似电子表格的方式组织UI元素。TableLayout以其灵活性和可扩展性，成为了创建复杂界面的一种有效方式。下面将详细探讨...
Android布局之表格布局TableLayout详解
01-21
本文实例为大家分享了Android表格布局TableLayout的具体代码，供大家参考，具体内容如下 1.TableLayout TableLayout表格布局模型以行列的形式管理子控件，每一行为一个TableRow的对象， 当然也可以使一个View的...
Android开发之TableLayout表格布局
01-20
在Android开发中，TableLayout是一种常用的布局方式，它模拟了电子表格的行列结构来组织UI组件。TableLayout由多个TableRow组成，每个TableRow可以包含一个或多个View或自定义控件。这种布局方式常用于创建表格或者...
Android 表格布局TableLayout示例详解
09-01
在Android开发中，TableLayout是一种常用的布局方式，它允许开发者以表格的形式组织UI元素，尤其适合展示数据或者创建表单。下面将详细讲解TableLayout的关键特性和使用方法。 TableLayout的核心在于其以行列的方式...
HarmonyOS开发54：表格布局：TableLayout
GeniusAng的博客
08-27 195
ability_main.xml代码： <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="horizontal" ohos:row_count="3" ..
harmonyOS应用-TableLayout布局
Damon
12-29 304
TableLayout布局 harmonyOS官网网址：https://developer.harmonyos.com TableLayout使用表格的方式划分子组件，如下图示例 在XML文件中创建TableLayout以及添加组件 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_pa
鸿蒙：ContentTable、Stack、Flex等组件和布局实现图像、文本显示界面
肖云鹤的博客
11-19 1577
本篇博文实现一个食物详情页的开发Demo 通过这个开发过程学习如何使用容器组件Stack、Flex和基本组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍
鸿蒙知识点---第四章
2402_84136989的博客
07-03 1248
本篇笔记涉及边框、圆角、背景属性等知识，具体包括边框样式、圆角样式、背景图、背景位置、坐标值、背景尺寸等一系列知识
五大布局之TableLayout
NWDB38的专栏
07-16 687
TableLayout顾名思义，此布局为表格布局， 适用于N行N列的布局格式。 一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。 TableRow是LinearLayout的子类， 它的android:orientation属性值恒为horizontal， 并且它的android:layout_width和android:l
鸿蒙应用开发（基础篇）之列表组件
xiangzhihong8的专栏
09-12 3152
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值