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

news/2024/7/21 8:47:40 标签: harmonyos, 华为

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:row_count="6"
    ohos:column_count="4"
   >
    <Button
        ohos:id="$+id:btn_table"
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "表格布局_计算器键盘"
        ohos:background_element="#FF374FF1"
        ohos:text_size="20fp"
        ohos:text_color="#FFFDFCFC"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "7"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "8"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "9"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "/"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />

    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "4"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "5"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "6"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "*"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "1"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "2"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "3"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "-"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "0"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "."
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "+"
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "="
        ohos:background_element="#FF59EC23"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />
    <Button
        ohos:id="$+id:btn_clear"
        ohos:height="35vp"
        ohos:width="65vp"
        ohos:text = "clear"
        ohos:background_element="#FF7BA4CF"
        ohos:text_size="20fp"
        ohos:margin="6vp"
        />

</TableLayout>

 MainAbilitySlice.java

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

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TableLayout;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

import static ohos.agp.components.TableLayout.*;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button button_table = (Button) findComponentById(ResourceTable.Id_btn_table);
        Button button_clear = (Button) findComponentById(ResourceTable.Id_btn_clear);
        TableLayout.LayoutConfig config = new TableLayout.LayoutConfig(TableLayout.specification(0,1),TableLayout.specification(0,4));
        //TableLayout.specification(4,1),行规范
        //TableLayout.specification(0,4),列规范
        //设置宽度
        config.width = button_table.getWidth()*4 + button_table.getMarginLeft()*6;
        //设置高度
        config.height = button_table.getHeight();

        //设置外边框
        config.setMargins(button_table.getMarginLeft(),button_table.getMarginTop(),button_table.getMarginRight(),button_table.getMarginBottom());
        button_table.setLayoutConfig(config);


        TableLayout.LayoutConfig config2 = new TableLayout.LayoutConfig(TableLayout.specification(5,1),TableLayout.specification(0,4));
        //TableLayout.specification(4,1),行规范
        //TableLayout.specification(0,4),列规范
        //设置宽度
        config2.width = button_clear.getWidth()*4 + button_clear.getMarginLeft()*6;
        //设置高度
        config2.height = button_clear.getHeight();

        //设置外边框
        config2.setMargins(button_clear.getMarginLeft(),button_clear.getMarginTop(),button_clear.getMarginRight(),button_clear.getMarginBottom());
        button_clear.setLayoutConfig(config2);

        button_clear.setClickedListener(new ClickedListener() {
            @Override
            public void onClick(Component component) {
                new ToastDialog(getContext())
                        .setText("点击了清除按钮")
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });


    }

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

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

 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"


http://www.niftyadmin.cn/n/5362961.html

相关文章

STM32--SPI通信协议（2）W25Q64简介

STM32--SPI通信协议（2）W25Q64简介

一、W25Q64简介 1、W25Qxx中的xx是不同的数字&#xff0c;表示了这个芯片不同的存储容量&#xff1b; 2、存储器分为易失性与非易失性&#xff0c;主要区别是存储的数据是否是掉电不丢失&#xff1a; 易失性存储器&#xff1a;SRAM、DRAM&#xff1b; 非易失性存储器&#xff…
阅读更多...
[AIGC] Spring Gateway与 nacos 简介

[AIGC] Spring Gateway与 nacos 简介

文章目录 Spring Gateway简介主要特性优点总结 Nacos简介主要特性优点总结 Spring Gateway 简介 Spring Gateway是一个基于Spring Framework的工具&#xff0c;用于构建和管理微服务架构中的网关。它提供了一种简单而灵活的方式来路由和过滤请求&#xff0c;以及在微服务之间…
阅读更多...
ubuntu 安装 kvmQemu no active connection to install on

ubuntu 安装 kvmQemu no active connection to install on

更新 apt sudo apt update检查虚拟化是否开启 0 不开&#xff0c;其余数字表示开启&#xff0c;开不开都可以&#xff0c;不开性能弱&#xff0c;只能跑 x86 系统 egrep -c (vmx|svm) /proc/cpuinfo安装 sudo apt install -y qemu-kvm virt-manager libvirt-daemon-system virt…
阅读更多...
React实例之完善布局菜单（一）

React实例之完善布局菜单（一）

今天我们来用所学的知识来做一个布局菜单的组件, 针对这个组件我之前写过一个教程 React之布局菜单-CSDN博客&#xff0c;那个呢比较基础&#xff0c;这节课算是对那个教程的一个扩展和补充。这个实例讲完&#xff0c;这个系列就算告一段落了。先看效果 这个教程要求对React知识…
阅读更多...
Qt/C++音视频开发66-音频变速不变调/重采样/提高音量/变速变调/倍速播放/sonic库使用

Qt/C++音视频开发66-音频变速不变调/重采样/提高音量/变速变调/倍速播放/sonic库使用

一、前言 之前在做倍速这个功能的时候&#xff0c;发现快速播放会有滴滴滴的破音出现&#xff0c;正常1倍速没有这个问题&#xff0c;尽管这个破音间隔很短&#xff0c;要放大音量才能听到&#xff0c;但是总归是不完美的&#xff0c;后面发现&#xff0c;通过修改qaudiooutpu…
阅读更多...
ONLYOFFICE 文档 8.0 现已发布：PDF 表单、RTL、单变量求解、图表向导、插件界面设计等更新

ONLYOFFICE 文档 8.0 现已发布：PDF 表单、RTL、单变量求解、图表向导、插件界面设计等更新

我们最新版本的在线编辑器现已推出&#xff0c;为整个套件优化了多项功能。阅读下文&#xff0c;了解详细更新内容。 什么是 ONLYOFFICE 文档 ONLYOFFICE 文档是一款开源的办公套件&#xff0c;由总部位于拉脱维亚的Ascensio System SIA开发。它支持处理文本文档、电子表格、演…
阅读更多...
DIY制作硬模空心耳机壳使用的是什么原材料？

DIY制作硬模空心耳机壳使用的是什么原材料？

制作硬模空心耳机壳的原材料可以根据不同的制作要求和材料特性进行选择。以下是一些常见的原材料&#xff1a; 塑料&#xff1a;塑料是一种常用的耳机壳制作材料&#xff0c;具有轻便、耐用、防水等特点。常见的塑料材料包括ABS、PC、PA等&#xff0c;可以根据具体要求进行选择…
阅读更多...
Jmeter 基于Docker 实现分布式测试

Jmeter 基于Docker 实现分布式测试

基于Docker 实现分布式测试 制作Jmeter基础镜像制作工作节点镜像启动工作节点启动控制节点遇到的问题 使用Docker 部署Jmeter非常方便&#xff0c;可以省略软件的安装以及配置&#xff0c;比如jdk、jmeter。需要部署多个工作节点可以节省时间。 控制节点&#xff08;Master-主节…
阅读更多...
最新文章

Copyright @ 2022~2023