HarmonyOS学习路之开发篇—Java UI框架(Table Layout)

电子设计联盟

kfq2bfvyfhd6406098545.gif

- p+ G; E5 I' Y' a- ]6 x点击上方蓝色字体，关注我们
$ K: }) n+ x2 v. ?: b5 zTablelayout使用表格的方式划分子组件。

fxtq3ssw0zm6406098645.png

TableLayout的共有XML属性继承自：Component。
1 }. f/ ?/ z, u2 ~4 ?
TableLayout的自有XML属性见下表：


                       
                        属性名称
                       
                       
                        中文描述
                       
                       
                        取值
                       
( l9 j/ H% E$ w' K& N. {                       
  U8 _7 @" x+ c8 B8 @5 A  `                        取值说明
                       
# U0 b" F  c3 b4 V' Y                       
                        使用案例
                       
/ L4 ~! ]7 ]& J: t               
       
6 y7 H% R' W* Z7 g4 J1 S7 Y6 Y/ l       
               
* W4 T* V) i4 w/ o2 d- N' K                       
                        alignment_type
/ P4 Y& L, F5 ^5 V5 u3 G7 n                       
                       
6 d6 b" Z. g2 i% b4 M                        对齐方式
                       
                       
                        align_edges
4 l  H1 w2 A( [, }                       
                       
" D4 y2 s4 a, `' W' s; P1 Z/ ~                        表示TableLayout内的组件按边界对齐。
$ }& B! Z; h' P. v) X' E# {' G                       
                       
                        ohos:alignment_type="align_edges"
$ U) {. G; Y$ G. W( m2 J                       
               
7 }! f' I3 G7 M2 N0 M+ U2 M               
                       
                        align_contents
                       
                       
                        表示TableLayout内的组件按边距对齐。
                       
8 M, B1 T$ {2 S                       
                        ohos:alignment_type="align_contents"
- {1 F( c# t' _8 H" i( l                       
1 t+ \% C( l& b  c, L' W5 P               
               
                       
                        column_count
3 O$ W0 g" T7 ]) i2 z: _                       
0 K! `4 f5 X4 a+ i' f                       
                        列数
' B6 k0 ?% N  {! E) o7 Z                       
                       
( `+ e8 S; n5 _; t% {2 s: l                        integer类型
                       
                       
' j) z2 D5 N+ q  K. B8 \                        可以直接设置整型数值，也可以引用integer资源。
                       
5 |9 C! j! `# U2 X( |                       
/ A1 r0 N6 C2 ^7 r) o1 l                        ohos:column_count="3"
3 D" {# \: B5 C
                        ohos:column_count="$integer:count"
                       
               
! q0 z9 h+ [4 _+ ]               
" L; @  S- A) t2 z( A  q9 b                       
                        row_count
                       
                       
4 r) A# _) @3 q; i! h5 d                        行数
                       
                       
' t' ~7 J3 g5 T1 V4 R& k                        integer类型
                       
5 s& ^, \% {  W$ e* Y, H' w) _7 F                       
                        可以直接设置整型数值，也可以引用integer资源。
; V9 P( y1 W- b+ ~                       
% H) z  U0 p- N# O! W* P8 }* y                       
                        ohos:row_count="2"

                        ohos:row_count="$integer:count"
                       
               
6 m2 i1 Q$ H; z- Q1 J               
, F, e- b9 C8 f" ^* f1 w# D0 |                       
                        orientation
                       
( E7 e' s1 T& A# j! t# {  [                       
                        排列方向
' ^0 i0 i& o' D0 n1 ]                       
                       
                        horizontal
- \" z( m, s# k: f9 D                       
  ?! r0 q" {% N) @                       
                        表示水平方向布局。
                       
                       
                        ohos:orientation="horizontal"
2 X$ i9 S% f5 Z- v6 m7 E                       
               
& ]  Q" T  S" k) i( ^               
5 @! M) ^3 g. L: J% f0 p# c% P( _/ N                       
                        vertical
                       
                       
9 Y9 N+ b. z$ }: N# R/ T                        表示垂直方向布局。
$ g! \' F6 U" Q+ t                       
, H: {' Q! \0 _, b/ v                       
                        ohos:orientation="vertical"
$ {* v; ]- y9 z- Y( {                       
9 c; s3 Q% L# I' x, r               
( g; S/ _4 X% a; Q# I# o1 w2 \' U在XML中创建TableLayout，示例代码如下：

[table]/tablelayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="#87CEEB"    ohos:padding="[table]/tablelayout
在graphic文件夹下创建Text的背景table_text_bg_element.xml，示例代码如下：

"http://schemas.huawei.com/res/ohos"ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>    ohos:color="#00BFFF"/>"http://schemas.huawei.com/res/ohos"
& _: z' W0 o0 _" T# _6 G8 F. _$ k在TableLayout布局中添加子组件。
* ^( m. ~) p/ z: ]2 g0 h- M

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="#87CEEB"    ohos:padding="8vp">    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="1"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
6 d6 Y# L* {/ K* Y. I4 T& `; g" M0 c    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="2"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="3"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="4"        ohos:text_alignment="center"        ohos:text_size="20fp"/>[table]
TableLayout默认一列多行。

2 j$ N/ J$ m) e& ^$ s% T

dy10atfv2fc6406098745.png

, {3 h; `% p  k/ M
1 S- y) U5 b! ~. m# U设置行列数：

...    ohos:row_count="2"    ohos:column_count="2">
, i* Z  Y" H, W/ k0 x6 x设置TableLayout的行为2，列为2效果。

flwcwvjr20g6406098845.png

在XML中设置布局排列方向，以“vertical”为例：

/ T' Z' M1 ^) A; D5 s) [

...    ohos:orientation="vertical">    ...
设置布局排列方向为“vertical”的效果。

9 b+ ~9 T2 q2 A; n1 ]1 ^7 ~

esbsvmwndzi6406098945.png

% e8 S* I* @# f6 n* s
TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：
, O7 P# m- Y8 D2 B! u

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_content"    ohos:width="match_content"    ohos:alignment_type="align_contents"    ohos:background_element="$graphic:layout_borderline"    ohos:column_count="3"    ohos:padding="8vp">
    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:padding="8vp"        ohos:text="1"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
( a: a) |$ J, @7 T( C. Q    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"/>
    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="32vp"        ohos:padding="8vp"        ohos:text="3"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="32vp"        ohos:padding="8vp"        ohos:text="4"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
    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"/>
    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:padding="8vp"        ohos:text="6"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
* |/ I) e# A. |, v4 H: i边距对齐效果：
( T* Z" d7 u( Y3 H5 U( Z- n
+ h+ `7 L  o/ f0 H4 j

c51f3orwvkx6406099046.png

5 Y0 v2 H! g& ]5 M# C0 b
将TableLayout的对齐方式修改为边界对齐。

+ |# W! \% B4 S$ [) {

...    ohos:alignment_type="align_edges">    ...
边界对齐效果：
& t+ @4 k+ K1 H' I' ?2 e/ n
2 Z( o6 y+ L. _: Z* m6 G" M

pqnnz22v2co6406099146.png

5 |1 y: X7 Z/ s+ U& _) x0 t! A
引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：
2 w9 R4 T' M1 F% w$ q

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>

3 }, ~/ I7 @' B3 y$ zTableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。
! O$ k) F5 [8 ]5 V7 K* e
设置子组件的行列属性均为2的效果展示：

- Z. m3 r( i3 o' H- z  Q2 N

ek4edwbof416406099246.png

9 p" S' }% E$ k3 w2 B8 \; S( ?  N; ?在XML中创建TableLayout，并添加子组件，代码如下：
' o( G0 t5 m* ^  N/ E$ L

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">
    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"/>
7 ^9 a, I2 ]9 l: ?# t! K    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"/>
- W& H1 C# u4 C1 `1 q6 ]$ o3 `    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"/>
    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"/>
    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"/>
    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"/>
在Java代码中设置子组件的行列属性，代码如下：
! T) l) W0 Q  U

@Override    protected void onStart(Intent intent) {        ...        Component component = findComponentById(ResourceTable.Id_text_one);        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);        component.setLayoutConfig(tlc);    }
3 i) g$ t( z% u( x+ V    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
) @6 v: }3 Q& N& ^在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
; r" ]& J5 d4 I7 j; a. X* [# Y8 y
目前仅支持Java代码设置TableLayout子组件的行列属性。
在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：

8 E3 e# a) M" X9 _7 a# \8 r/ |

@Override    protected void onStart(Intent intent) {        ...        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);        ...    }
9 T, \4 d  L3 E* {子组件的对齐方式设置为ALIGNMENT_FILL的效果：
! D, M5 C: j4 `
4 k$ q) G6 Y7 H# }

dwv3shrkjvq6406099346.png

设置子组件的权重，代码如下：
$ Y9 v7 J$ f; }4 ]

@Override    protected void onStart(Intent intent) {        ...        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(0, vp2px(48));        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 1, 1.0f);        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1);
& A' m6 n. w4 e! R9 I$ ^7 f        findComponentById(ResourceTable.Id_text_one).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_two).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_three).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_four).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_five).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_six).setLayoutConfig(tlc);    }
上述代码将子组件的宽度权重设置为1.0，每行子组件会均分TableLayout的宽度，所以需要设置TableLayout为固定宽度或match_parent。
  ~* M( W2 [0 V) Y1 e# c
. ?/ G, V# O3 w! _. p9 Z% g

ohos:width="match_parent"    ...>
; J- y' M4 q! h8 C4 @    ohos:id="$+id:text_one"        .../>
6 o% U2 T4 t* O, _$ ?( [9 _    ohos:id="$+id:text_two"        .../>
    ohos:id="$+id:text_three"        .../>
    ohos:id="$+id:text_four"        .../>
% K6 j6 u9 w3 j, S9 {$ K6 @    ohos:id="$+id:text_five"        .../>
+ l) y3 v2 c* y+ d! _- |    ohos:id="$+id:text_six"        .../>[table]
将子组件的宽度权重设置为1.0的效果展示：
# {: U2 |. ]; V- V- O  v0 z' o

zxuaeir1fhl6406099446.png

2 U- p5 A6 l( e3 u

mdpiy0r3oy16406099546.png

往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
一种高速ADC和DAC转换电路分享
一文搞懂CAN和CAN FD总线协议
LabVIEW和Arduino的巧妙结合（基础篇—1）
7 [* Z! c9 ?, t* u* `$ Z  V" i5 TLabVIEW设计自定义滚动条
" [" _- K% X( z) c
6 z& W7 p1 \) b% S2 O

qwg2v3bbf426406099646.jpg

( A7 ]; W: H$ Z$ g' j

uaetuwcvdjn6406099746.gif

点击阅读原文，更精彩~