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

电子设计联盟

j4bsmruiqsx64011339950.gif

点击上方蓝色字体，关注我们
7 Z- e7 N: B9 P1 m/ ~0 f3 o3 Q" xTablelayout使用表格的方式划分子组件。

5l1kfilmr5h64011340050.png

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

TableLayout的自有XML属性见下表：


7 m  `: {, P( Y0 Q                       
& F2 B' L1 [' w+ z. F) p: b9 e                        属性名称
                       
8 R1 O/ R& ^) H/ I2 }( {                       
$ X4 A3 }- b% U. @' Q& o! U                        中文描述
                       
5 J% i  x+ ?, C/ }4 f& |# ?                       
                        取值
                       
                       
+ n& m( s) J  H, R) P                        取值说明
0 `  k) D' s" ^0 B( ~" n                       
                       
! n" Q% ]1 |8 j2 l: `8 {% g: O1 p# \                        使用案例
; P9 B9 P, M! U0 {9 E6 ^5 y" K, l- [                       
               
       
       
               
9 g3 ]. b1 s0 F! {% ~' ^/ l                       
9 |3 I: d2 g* E0 k- b$ d                        alignment_type
0 M; O' h7 A. N( |1 H0 S" T$ ?                       
                       
                        对齐方式
                       
) a) X2 g7 I* A2 n4 o0 X                       
                        align_edges
3 D2 W& {9 O' p) ^/ T  ?2 ?5 Z                       
$ N5 i. n. N( w4 Z6 ^  _                       
$ Z: Q" w6 e) v7 t                        表示TableLayout内的组件按边界对齐。
                       
                       
                        ohos:alignment_type="align_edges"
                       
, |  h( W4 P1 f# I- r               
" f0 Z: |; o) w9 m2 ], B5 Y               
                       
                        align_contents
                       
0 D1 X7 r1 g  x6 @9 [0 f6 J                       
                        表示TableLayout内的组件按边距对齐。
+ C! r1 o% T! p. B4 N                       
% \/ ~8 r' |; a5 s1 h                       
( K6 w% a! h; [/ r: m                        ohos:alignment_type="align_contents"
5 i2 `2 ?) G. \                       
               
1 J# f) D8 B5 D7 R9 W# S1 s               
                       
                        column_count
                       
7 @$ V$ S+ ?9 j                       
                        列数
                       
                       
                        integer类型
                       
                       
                        可以直接设置整型数值，也可以引用integer资源。
! S, G% U& K" e$ s. w                       
                       
" i. o; I# t" x3 m# ~/ m2 x8 @                        ohos:column_count="3"
: N! X7 g+ X- m* c4 q8 k' {) D
                        ohos:column_count="$integer:count"
                       
: ~$ T& E* p, {, u$ l% D1 g# Z9 s               
) _) f8 ^2 }8 O, I4 X- P               
) J1 E. R, ?; e' Y2 c2 n1 s, V                       
9 M7 `$ o6 N4 a* J5 A/ e# z                        row_count
* p% T3 |# I; c% H. ]- x                       
                       
                        行数
                       
) H$ \& ]9 ]9 O  M+ n2 i  R1 K                       
                        integer类型
' F7 _' x- p$ r  P5 a                       
9 [) J# b$ h2 D8 z# b& ?* L                       
$ h  x% O( N* D1 [                        可以直接设置整型数值，也可以引用integer资源。
% u8 a' ^+ E8 b8 k                       
2 @6 [- U" V3 i$ T, z- l: l$ I                       
                        ohos:row_count="2"

' a. O) F8 E/ R# ^                        ohos:row_count="$integer:count"
7 I% e) b: o2 V, x; _4 s                       
               
               
                       
                        orientation
5 _! k0 b4 w# r2 Y                       
% B$ v' l7 M4 m% ^                       
                        排列方向
                       
7 b2 o1 {9 M9 M& b                       
                        horizontal
                       
                       
  S% a9 j- ?' i4 ?  p. n  p                        表示水平方向布局。
9 J( P+ S; i/ G1 \% A, r# X; d                       
                       
                        ohos:orientation="horizontal"
; c$ U# Y- R/ ]6 c) ]9 {8 u                       
; u: t; a6 o7 q               
! O6 B6 q2 z1 e6 o8 q0 l( p               
                       
                        vertical
9 T4 n$ `; Y/ e$ ]                       
                       
                        表示垂直方向布局。
                       
                       
8 b) |. |/ U# v/ g. _2 r                        ohos:orientation="vertical"
; @: O0 m. P' f0 E( B, Y/ W* R                       
               
  A/ O8 Z" }3 Y  w4 ~; }在XML中创建TableLayout，示例代码如下：
, Y/ U# t. F8 x

[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，示例代码如下：
) }) [6 H! H# y% O2 U; L

"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"
在TableLayout布局中添加子组件。
: N5 u3 H# z) D. M. q

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"/>
    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"/>
$ |2 Q( E  x9 l    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默认一列多行。

eduxj5fxpbu64011340150.png

设置行列数：
! `4 B* ^- g% g6 J; W4 e% V

...    ohos:row_count="2"    ohos:column_count="2">
4 ^$ I) D; M) l: C设置TableLayout的行为2，列为2效果。

, ~" p2 P3 k) C9 m5 p5 Q8 K

3rxjgtuwd5v64011340251.png

7 g. ~0 O+ M: O) q在XML中设置布局排列方向，以“vertical”为例：

; J; M( S6 q  R/ s/ W

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

zoyxhbu4biq64011340351.png

( ^5 V; D/ d. N/ ]1 h
TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：
! k! ]2 g1 y) {0 {# }

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"/>
6 f5 o; u( {4 j6 @4 I+ J, e6 S    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"/>
# y% X" E* {* T$ ?8 F. e% G    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"/>
2 [* G3 f2 k+ s$ ]# W, w    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"/>
5 h: m/ b6 ]. w% d/ h- g& s    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"/>
. U  i5 o2 |9 j6 o    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"/>
: z2 O7 |% J5 R# Z& u边距对齐效果：
8 V5 ]) p5 {8 @: a1 L

t2qd0goxt4g64011340451.png

2 g) {& |) T' P6 m* Y/ M- a
将TableLayout的对齐方式修改为边界对齐。

) u1 C; ]4 |( T2 {1 u& D

...    ohos:alignment_type="align_edges">    ...
# Z6 {; v( Q' d; K9 D- U边界对齐效果：

* B1 q7 O+ a( o5 I* L. y& {! a

vrxtotgl3eo64011340551.png

% ^/ y; u* x' A. U1 h& x9 F0 }
. J. Z/ r$ ]( D! t; Z引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：

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

/ J5 e0 F7 g- ~( U- F4 ~1 yTableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。

设置子组件的行列属性均为2的效果展示：

a5q3pavvsv064011340651.png

: z, S8 [  p$ _" Q
在XML中创建TableLayout，并添加子组件，代码如下：
7 A$ d- @: n0 B" t

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"/>
6 d$ j" O, @+ \    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="16vp"        ohos:padding="8vp"        ohos:text="3"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
: V* f& W$ u# S+ r7 }    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"/>
$ x4 [) i5 F7 V1 \    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"/>
/ {& ^4 k* ^" i1 w: u' t8 n% I在Java代码中设置子组件的行列属性，代码如下：
* D( }7 Z3 U2 ]* S

@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);    }
    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
& c* _6 p8 |6 Q: ^0 R0 _在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
$ ~2 A! D  E, ]$ u
7 }4 F9 \# B7 V8 G9 s& y目前仅支持Java代码设置TableLayout子组件的行列属性。
0 i4 @, [# Z; d在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：

8 u) Q+ }$ e; A" Y7 q0 S

@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);        ...    }
子组件的对齐方式设置为ALIGNMENT_FILL的效果：
8 L" O: J+ y1 _8 O8 W9 U. J2 O

mmpjmxeuxsd64011340751.png

设置子组件的权重，代码如下：
( |' Y7 H1 l; I7 O# ?- ?

@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);
        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);    }
; }7 T8 K7 m, ^' x+ E上述代码将子组件的宽度权重设置为1.0，每行子组件会均分TableLayout的宽度，所以需要设置TableLayout为固定宽度或match_parent。

; q0 [7 p& R8 R( d

ohos:width="match_parent"    ...>
    ohos:id="$+id:text_one"        .../>
5 n. y3 U8 V% G# J$ c2 v    ohos:id="$+id:text_two"        .../>
. w5 q' y  ~) [, {    ohos:id="$+id:text_three"        .../>
' U; T# \2 ?% [& ?( |5 l7 C; {    ohos:id="$+id:text_four"        .../>
    ohos:id="$+id:text_five"        .../>
& J' P9 g6 Z6 C. d* W    ohos:id="$+id:text_six"        .../>[table]
将子组件的宽度权重设置为1.0的效果展示：
( M* W8 L6 I0 N3 t% w

oq0ww54svhl64011340851.png

; o( I. D/ o0 ~9 f
; T: m0 @$ B, L: U5 t' \

tut2ac4yb1164011340951.png

往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
8 Z5 ]* k, _! w( J" ~2 s一种高速ADC和DAC转换电路分享
  h% C+ D. k1 e8 g! K一文搞懂CAN和CAN FD总线协议
LabVIEW和Arduino的巧妙结合（基础篇—1）
; r7 T& J1 g% t0 y  D) ULabVIEW设计自定义滚动条
; }+ V3 f7 M/ ]$ z: q+ N# l( W% k; q5 ^

bahiptkecvz64011341051.jpg

9 ?2 _( r/ H9 ?4 g* A+ V  `/ t; y

bby0wizcklx64011341151.gif

& R. U5 k; ]$ x. I) I" h+ P点击阅读原文，更精彩~