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

电子设计联盟

5n0fprwcn1v64015937103.gif

点击上方蓝色字体，关注我们
Tablelayout使用表格的方式划分子组件。

5kl4j2fzucv64015937203.png

0 l# W# V% _5 f& `# D5 B# [
: d6 }3 ~; R! ~, j$ W* GTableLayout的共有XML属性继承自：Component。

TableLayout的自有XML属性见下表：
7 G/ B7 a1 |0 k; Z1 g5 A- l

                       
  ~: W7 z7 d. Y$ `/ ~  L                        属性名称
                       
. J* d- ?6 j) S7 T: `                       
                        中文描述
+ Q" l: [1 n' G( G' Z. M4 s                       
                       
, {4 P- X$ b8 e( a+ C                        取值
: t* E% A7 N: ~1 q3 ^! L                       
. t+ g2 n6 d& @, C- \9 Z                       
" l  T; N! k' f, W                        取值说明
                       
9 u, Z- Z1 ]3 C- M- E% I5 U7 x                       
) X8 a9 c( E* h3 {7 x( w8 K                        使用案例
                       
               
5 ]5 l6 K- N- h4 p; h. w5 J. i/ p       
       
               
6 X) b, O( K- {/ d                       
6 O6 V, T9 J% W                        alignment_type
                       
                       
                        对齐方式
                       
                       
* @) m% e! J: z2 O                        align_edges
5 [. @$ N* s! H! E' ]2 k6 g# U                       
                       
                        表示TableLayout内的组件按边界对齐。
3 j+ c+ f; W- X6 D- |$ {                       
                       
                        ohos:alignment_type="align_edges"
% k. l6 t4 L# {% T, Z$ Z" M: C                       
               
               
& e, T; h, ^/ V$ @( b                       
                        align_contents
                       
                       
                        表示TableLayout内的组件按边距对齐。
! z0 H0 T# M2 o5 h& Z9 Z/ F8 u                       
                       
6 Z# o$ K& G0 J7 B, y- t% ?                        ohos:alignment_type="align_contents"
                       
               
% \5 J. o5 x& _* M& a               
                       
                        column_count
! @! `! i; }3 Z                       
                       
- e8 F% d0 I. k' i  L                        列数
                       
5 n5 L  E' D- B) S                       
" M/ e- c, d2 C                        integer类型
5 ~( _: D6 t/ b. E                       
  X5 }$ \, q2 N/ {+ I; U/ d9 R                       
                        可以直接设置整型数值，也可以引用integer资源。
! W( {. t0 w6 ?/ v7 g! c                       
6 \) a5 c+ B8 Z9 b! k                       
* i# p+ B7 R8 M( y6 q                        ohos:column_count="3"

                        ohos:column_count="$integer:count"
                       
; |+ ?  p7 X$ l- t# @) T               
5 W8 H- I1 ?, a4 ^# N# o               
) |* G5 O9 B% k0 Q) R5 |                       
! N$ q5 b' r% I& @. A                        row_count
                       
1 I# t! j5 k0 b/ t" ^4 A+ t                       
                        行数
4 ^7 v0 D, E# a4 I! |! |                       
                       
                        integer类型
# D, X2 i6 P+ {- q' J+ A0 R                       
                       
$ ?' A- v& ^" {                        可以直接设置整型数值，也可以引用integer资源。
                       
                       
0 i4 ~& T0 u' Q                        ohos:row_count="2"
1 D- x# S3 F, }' X% _0 P) P$ h- A
+ {8 l( t$ i4 t( O/ g3 f" a                        ohos:row_count="$integer:count"
                       
4 s5 m  \8 F) x- Y  S               
               
; z4 [" Q9 m3 N+ M. L- ?1 j6 I                       
                        orientation
                       
                       
                        排列方向
3 _, ?. Y5 m  B% H+ S8 K                       
                       
                        horizontal
                       
                       
                        表示水平方向布局。
7 i1 D! k2 C: K+ J+ W4 K* ?3 @                       
                       
9 k: e! ]  u, J0 k& z* \                        ohos:orientation="horizontal"
; e% M6 m# j% e# t' Z. R4 O                       
               
2 W5 o: ]# R& x. t               
                       
                        vertical
8 c' m* G8 v7 y/ D( D3 m! F1 K                       
                       
- M* i( A( @, j$ I  ^0 ]" Z                        表示垂直方向布局。
                       
" f; \7 `+ Z' v% l: \                       
' ?( [! y+ E( W5 H; M                        ohos:orientation="vertical"
                       
               
在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
( \( {" O+ Q9 M6 K2 K6 h& ^在graphic文件夹下创建Text的背景table_text_bg_element.xml，示例代码如下：
. J" X; i9 ]/ K) _4 ?

"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 Y7 L* ?  k* S0 a9 o6 j在TableLayout布局中添加子组件。

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"/>
9 C; j  T" ~6 H4 ?0 @& Y    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 B' j" U+ j+ e9 _    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默认一列多行。
- n; f3 ?( @8 h6 F) y' }
, j' W4 M0 k" b; q0 s

rh5jbydhacg64015937303.png

$ s2 M+ }+ Z9 v
0 [( i8 u5 r$ L, F* A' T2 T1 x设置行列数：
# O+ y1 i5 Y+ t, n& Q  L& n

...    ohos:row_count="2"    ohos:column_count="2">
: V0 ?" a, d- ?. d1 K设置TableLayout的行为2，列为2效果。

jtjfnr2fvpa64015937403.png

2 C1 x: Y' F6 x+ R: e4 V' E% Z在XML中设置布局排列方向，以“vertical”为例：
! F/ S; |& H4 r7 P" l
8 _# L8 ?/ Z3 D- f. q+ A

...    ohos:orientation="vertical">    ...
( ~& e; U1 G4 B+ K, h设置布局排列方向为“vertical”的效果。
0 H/ N6 V' ?3 b$ H) x

okezreezlqr64015937503.png

: _* ]/ b- F' b
TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：
! \' Y/ O( Y& t3 I
! i# V8 O! t5 n1 L* b5 m; @

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"/>
    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"/>
- }7 `1 q: ^6 |2 R9 q- M    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"/>
) i3 ], v! ]  \. S8 A& S( }    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"/>
边距对齐效果：

: q$ w2 _' B8 v4 F% C: c: f5 j6 c

rhkhylvnlri64015937603.png

# Y4 [3 _; @  d; O5 X5 O
将TableLayout的对齐方式修改为边界对齐。

...    ohos:alignment_type="align_edges">    ...
边界对齐效果：
, W8 W0 J+ i- L" i
: D2 A  `+ z- \; C$ z" d4 S4 x

wmljm0q2zto64015937704.png

3 D: C" f2 o4 e) w0 o( T6 r引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：
2 l/ v  J- q+ D$ N

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
) l1 h& j+ T* R' R& @+ A
TableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。

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

4tmer1wll1b64015937804.png

- h1 V' w& H$ v% g在XML中创建TableLayout，并添加子组件，代码如下：

/ I4 w; B8 k! _3 E* W; K! y6 ^

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">
- ^; V/ {: b( q    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"/>
4 G" I5 J: v$ t# {; w/ j    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"/>
$ G! `2 O/ h" c6 z* W    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"/>
8 R4 Z6 g* k+ ?5 O& S6 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"/>
+ [5 @5 S- h% q9 F    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"/>
: }$ ^# c& f7 K. N在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);    }
    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

! ^  _" Z$ M& h  {- c目前仅支持Java代码设置TableLayout子组件的行列属性。
在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：

) y$ i7 d& {! r2 @" x& z. r, 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的效果：

hssm5xgskv364015937904.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);    }
上述代码将子组件的宽度权重设置为1.0，每行子组件会均分TableLayout的宽度，所以需要设置TableLayout为固定宽度或match_parent。

3 Z+ w- b0 U! j4 p

ohos:width="match_parent"    ...>
! |0 `! s: \* j, p3 f2 @' V    ohos:id="$+id:text_one"        .../>
4 M) M* r$ ?& C0 H( l+ @# ?3 q- W    ohos:id="$+id:text_two"        .../>
1 L$ B* q9 q6 E# [    ohos:id="$+id:text_three"        .../>
- y, y# ]/ x9 r1 A9 w5 G    ohos:id="$+id:text_four"        .../>
    ohos:id="$+id:text_five"        .../>
    ohos:id="$+id:text_six"        .../>[table]
  ], q, |/ Y  [! I将子组件的宽度权重设置为1.0的效果展示：

: ~' C5 `0 P1 }/ q- \, M

ef4luqhfsvn64015938004.png

& e5 z9 f3 e) U% J3 ~) q1 l

br5jtl0rik064015938104.png

往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
一种高速ADC和DAC转换电路分享
一文搞懂CAN和CAN FD总线协议
/ t+ V8 x* E5 s; J. `  D4 LLabVIEW和Arduino的巧妙结合（基础篇—1）
LabVIEW设计自定义滚动条
. \; V' {/ V7 t5 p5 L, ], S4 n

zo2q3nad5sf64015938204.jpg

% o. r0 l2 b2 o5 x2 l; g

cuhvnmpidaj64015938304.gif

点击阅读原文，更精彩~