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

电子设计联盟

skmz1uctqen64025000303.gif

# O' _# _  O4 h" R+ r点击上方蓝色字体，关注我们
Tablelayout使用表格的方式划分子组件。

lw4olwwjoak64025000403.png

) X) _  l: X; t8 k* TTableLayout的共有XML属性继承自：Component。

0 p$ ~8 }  z# b) wTableLayout的自有XML属性见下表：
" ~  \. p6 U6 L! [- I, n2 f3 q9 S
/ @% t; g; d' h
                       
! w( f: Z. i6 D                        属性名称
4 ]) W6 @- j  j  c  X, I                       
                       
                        中文描述
& I2 ?' X  _* n                       
: N3 [( c/ C7 G0 e; g" I' w, y* u                       
                        取值
% w; X( c  `. F0 c                       
7 ?0 k5 @/ W6 c0 r2 `                       
/ T5 E9 M+ C3 i8 M: ^                        取值说明
                       
! G! u' P# A1 R5 {; q                       
                        使用案例
                       
  n6 x+ B$ x8 Y: P, B               
2 z& W# l& M* l! a       
; P4 p( a8 t! |& [& l0 B       
0 l4 T) e3 j: A( x6 I5 v; L1 Z) X               
                       
                        alignment_type
4 u- m( r3 p' G% F  f                       
- {" @# @# Z" o) d% C+ N8 A* ?  W4 U                       
                        对齐方式
( L; V$ P+ S9 F                       
% {- H1 A' N4 e& Z: w$ h4 i                       
9 T8 a& }! X3 p* n' ~! `' u7 Z                        align_edges
) t& y; w$ ]/ n7 e                       
  I, ]+ R1 e4 l+ A, V                       
0 C6 G7 @+ }% w5 W: A                        表示TableLayout内的组件按边界对齐。
                       
                       
  G. @* m0 q, [% [- ]                        ohos:alignment_type="align_edges"
                       
               
               
- W) Y! w: q/ G- B& [" U3 b) M$ O                       
                        align_contents
4 I8 B0 N" D4 D                       
$ E9 D$ x. X: W' L. m                       
( C: j! L: ^9 S- I% T4 F                        表示TableLayout内的组件按边距对齐。
                       
                       
                        ohos:alignment_type="align_contents"
                       
* @) z5 v" X3 l5 J  A- A) r               
* B* c) C5 w0 }               
                       
9 }. A8 A/ P" f/ E! ]                        column_count
                       
' h" S6 t1 K3 u& E0 G( y                       
9 z$ X. K6 ^5 N2 O: P. {                        列数
                       
) j: A! H$ I  H" A                       
% D5 V8 @. g& }" T) r- p                        integer类型
) G) L+ @# E0 F& K, a* b6 l                       
3 t& r" m/ U: O' @0 C                       
2 ?# B6 N/ \% p9 y# e1 b' e# B                        可以直接设置整型数值，也可以引用integer资源。
2 ^  J4 m2 H$ C, V, N                       
" x0 _" n0 k5 e" o% H                       
                        ohos:column_count="3"

- m& x$ m# z' F6 x                        ohos:column_count="$integer:count"
) d) h# {+ t. K. i7 n( o+ ]2 ^                       
/ c4 |  C' X& j  P               
- S3 ?. I5 ^  P' O9 k* x2 g  S               
                       
                        row_count
9 @& u) w* i/ V. A                       
                       
. R) f; y' o  {0 u6 H# R+ R                        行数
. N( C4 N+ |* G  k# _; z. m) t                       
$ I2 i: }4 }5 J1 {: X- D* ^                       
                        integer类型
+ L6 R6 Q* A5 E                       
* S; D# W7 n( f& _% i: M$ i2 r: @                       
                        可以直接设置整型数值，也可以引用integer资源。
                       
) f5 @; M' S; b* O: Y1 w& r5 T5 V                       
* B; Y/ ~3 Y. P- [                        ohos:row_count="2"

" x- Y6 \9 w( n5 I                        ohos:row_count="$integer:count"
, @: v1 S7 b' G" I                       
               
               
                       
2 ~$ }8 B* ]! S. F8 ^9 e                        orientation
                       
0 y# I$ B+ P1 B) \6 T                       
                        排列方向
                       
4 d' I) }2 R6 J5 A8 p% p                       
                        horizontal
6 _- r. x" }" V# ]) }$ J, b                       
                       
! i) X0 u- A  ]" p                        表示水平方向布局。
                       
; h( }7 u7 N, J; n1 ?2 a3 `+ t                       
9 G' C( l3 ~+ S8 c7 d6 y# y0 l                        ohos:orientation="horizontal"
* ^% r0 |1 u5 o7 x                       
2 ]: p2 T- V8 B, Q, Z; U. v( b, _8 W               
* \' C8 V( N$ v1 E2 b7 j               
                       
                        vertical
( Y4 c1 G1 b3 c; e                       
                       
& u+ A& _2 A& v9 L; V                        表示垂直方向布局。
                       
, @% s6 p3 y+ E: X                       
0 ^) L0 \/ S; M" v6 K! R4 [                        ohos:orientation="vertical"
  D4 ?! C" b; W6 V! }                       
$ X7 n5 e# O! ?# ^4 R. S               
! M! w1 K; ~3 C* D: p在XML中创建TableLayout，示例代码如下：
5 ]6 h9 `  N& g8 p  L& H

[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
' Z# k5 x6 n3 Q6 _3 x" f在graphic文件夹下创建Text的背景table_text_bg_element.xml，示例代码如下：
6 }6 k- a5 q/ ]$ F1 C. f

"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"
5 A$ V- Y; O$ z9 @- l: v在TableLayout布局中添加子组件。
& ], z7 t3 L, b* k
( U6 m, ]7 i5 b# o% t0 i% o

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"/>
) `, _4 u- k. W8 P9 u$ B    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"/>
. ^1 K; s4 a( ?" }3 |* q. a1 _    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默认一列多行。

6 q* s0 V, r- i2 o& |

ojwlcaeg4mz64025000504.png

1 x  b" {/ L; L0 I5 v0 L5 _7 j; \
设置行列数：
6 M  U3 Q' P* i5 o
+ V1 N% x6 M+ h+ @2 W- \5 \

...    ohos:row_count="2"    ohos:column_count="2">
设置TableLayout的行为2，列为2效果。

0 C' Z1 P; r( P5 y

llaihpgwn2r64025000604.png

5 O0 g9 U1 D% Y1 Z" A
3 m$ k& _+ ^& U% d# `, E# ^' q在XML中设置布局排列方向，以“vertical”为例：
% W2 ?9 e: O6 Y- y- R- }, t
& A# c5 e9 c2 z2 |" K7 S

...    ohos:orientation="vertical">    ...
设置布局排列方向为“vertical”的效果。
5 D( W- h. e. j5 l

0an5vavm0fe64025000704.png

& t' e5 d  D' y. X
* b7 f' [+ c9 r% p/ g% @TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：

2 e4 Y- y2 ?$ q; x& ~2 T

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">
7 _, d6 m9 @% B5 ~    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"/>
    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"/>
) O( Z. Y' j$ R8 o: L2 A    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"/>
$ `  S; r% D9 h. A4 `- s. j    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"/>
3 D3 N9 \% J$ f' f! g8 @2 V    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"/>
( x* L6 L+ @. B边距对齐效果：

ltnrknoefcs64025000804.png

将TableLayout的对齐方式修改为边界对齐。
  e( \1 j6 b+ Y; s; U3 d0 r- }

...    ohos:alignment_type="align_edges">    ...
边界对齐效果：
: f7 H6 c3 Z# |# s0 z, I

qwph0k3hehq64025000904.png

; C; s1 w4 b0 \: v. l/ [引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：
6 H, K7 z  k- u/ ~
! ]- \: N: a1 M2 r+ H# m

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
9 d: S) W; k9 _' a; ]& l
TableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。

3 Y  a: [9 d9 k设置子组件的行列属性均为2的效果展示：

5m2qjqxfasu64025001004.png

: Y' v" W3 Q; @' ^$ q6 i
' c( {+ m: q: D! f6 t& J5 t在XML中创建TableLayout，并添加子组件，代码如下：

% _6 q: x! S8 z7 g- D# A

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">
; P- i( T7 `  B3 b1 X1 u    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"/>
    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"/>
4 o3 M6 h3 v& N1 b    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"/>
0 F9 l! i. V, y& q6 }& p, h: W4 H    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代码中设置子组件的行列属性，代码如下：

@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);    }
( J2 t; z4 L; _3 p) J    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
' |; V; E* D( J* @: m: W" j在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

, e+ j. z4 O; ]  f$ X' F目前仅支持Java代码设置TableLayout子组件的行列属性。
在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：

@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);        ...    }
/ K# w. |' |: w. P+ _9 a$ E/ w子组件的对齐方式设置为ALIGNMENT_FILL的效果：
6 M( t7 G2 p- u0 q5 [8 y+ M& e6 ~
& ^+ m% l- A0 a9 I

1ai1kpjr4jz64025001104.png

设置子组件的权重，代码如下：

@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);    }
0 S$ z1 Y$ z( `. h3 a上述代码将子组件的宽度权重设置为1.0，每行子组件会均分TableLayout的宽度，所以需要设置TableLayout为固定宽度或match_parent。
* G. v) v2 y5 Q7 b+ ?7 ]

ohos:width="match_parent"    ...>
    ohos:id="$+id:text_one"        .../>
* {. k/ j; g6 p5 G: D    ohos:id="$+id:text_two"        .../>
3 \3 y$ w4 m0 V    ohos:id="$+id:text_three"        .../>
    ohos:id="$+id:text_four"        .../>
/ z% f5 u  Q  p; P. J  d# y. ]    ohos:id="$+id:text_five"        .../>
/ i" {" v2 f0 d/ o6 g$ |    ohos:id="$+id:text_six"        .../>[table]
% E4 B  i3 E0 W' r将子组件的宽度权重设置为1.0的效果展示：

0ilu22b4vq364025001205.png

# p) H- ~: W, s/ \; o( N
7 o$ Z  Y5 e$ N4 y0 e

fasoyu4yzjq64025001305.png

往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
9 Q' b0 ~  d, m& K一种高速ADC和DAC转换电路分享
一文搞懂CAN和CAN FD总线协议
LabVIEW和Arduino的巧妙结合（基础篇—1）
LabVIEW设计自定义滚动条
% J9 C7 U( ]8 x9 `6 C

t5moebzfrj164025001405.jpg

iqwediukx3264025001505.gif

点击阅读原文，更精彩~