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

硬件笔记本

upjsyjqyfke64023064555.gif

点击上方蓝色字体，关注我们
$ d! j; Y1 p* b8 D9 x# B" JTablelayout使用表格的方式划分子组件。
) [" n/ H& h! S# ]2 ?- ~, I$ w8 ^

y4srucwgcty64023064655.png

. O% v5 V+ Q- y' S8 [1 pTableLayout的共有XML属性继承自：Component。

( _# P% V7 Z  F' x) \/ _TableLayout的自有XML属性见下表：

+ z( X: h/ U' @! D9 o4 D
' m% P4 O# X0 p- t' e( }& m5 P; p                       
/ {: o6 a4 e# W1 P: c                        属性名称
* }% y4 ]2 u, J# F5 [( h8 O9 A/ q                       
                       
                        中文描述
                       
                       
                        取值
4 s* q6 X7 k4 `7 |' q                       
3 z; D. D' U/ c4 y7 [                       
; Y# y( r0 N6 H  T: m+ F* w                        取值说明
% O% U6 U+ O" A, k, x4 p                       
                       
! t- {# k" u' w5 Z/ r9 [! \                        使用案例
$ r2 E5 t; B* d; z% G) ]                       
& \, _, k4 i- k  m               
       
       
               
                       
# I! j- \" T# c( M9 R+ r                        alignment_type
6 ]- `+ V  V- T. b# J1 w  H) l( T                       
) U+ H+ `, m, g  e1 r                       
                        对齐方式
                       
                       
                        align_edges
                       
                       
                        表示TableLayout内的组件按边界对齐。
9 t5 E3 r2 _, Q. c3 q% z; k6 W                       
                       
% c: l! y0 ?6 e2 X" S7 Y6 _                        ohos:alignment_type="align_edges"
  B8 r0 T$ H& D( G( ?( ^                       
               
               
                       
7 X) a  x& T6 `7 d3 K: e! h                        align_contents
                       
1 z. T. w5 b4 J: v/ T- U                       
                        表示TableLayout内的组件按边距对齐。
                       
! b1 C: J% j" L                       
4 F$ m& |, E7 ?0 W$ `                        ohos:alignment_type="align_contents"
& X1 Q' P' a- ?& h$ |0 W1 k2 s                       
               
: l' E3 o$ a1 v7 {! \               
                       
                        column_count
9 t" x5 ]1 S" w% \- J, J; Y                       
3 S( s2 z+ s( S  z; s  Z& b                       
                        列数
& P! n( C! J  p+ @  k8 x                       
( T! ?2 V- y7 D9 N' \                       
' m  T( E9 G' C                        integer类型
                       
                       
                        可以直接设置整型数值，也可以引用integer资源。
9 g  K5 Z/ z/ X) ?- p$ N                       
                       
                        ohos:column_count="3"

                        ohos:column_count="$integer:count"
                       
( D. w- h$ E' t& M4 u& ^+ C               
( h2 o% H5 `: }% W3 v7 ]- n" U               
                       
                        row_count
                       
                       
: w- X# t  D" w; |6 J5 D                        行数
                       
) Z# M& ?$ g( @" d1 q                       
                        integer类型
/ j$ s% O# ]+ v" n                       
                       
# U( d- a# K8 c8 N                        可以直接设置整型数值，也可以引用integer资源。
4 J9 o- _' W" k( t                       
+ h- |1 D7 b; ~- C- [2 G                       
                        ohos:row_count="2"
; g- ^+ w2 v7 E3 U' g( |, N& M
8 J4 d8 S' t- H: \                        ohos:row_count="$integer:count"
                       
3 u. d' o5 J" ]; I* I               
/ b1 I# f* J3 K' W  Y" Q. f$ k               
                       
                        orientation
                       
                       
3 g6 [* M  y: g( M                        排列方向
+ R' V8 S5 T1 [& x                       
                       
                        horizontal
                       
                       
                        表示水平方向布局。
2 z) j  U3 S6 @, p$ w                       
* s2 p! q5 Z+ y1 ]0 y- G6 t- A                       
                        ohos:orientation="horizontal"
6 D# O9 d- T$ C- A8 _7 K  b                       
  D5 E+ |$ ]* i( t# T               
6 I! l6 E9 f. ~' P+ {               
& [0 Q" N( z$ E; g                       
                        vertical
                       
3 u+ c( ]  y9 g+ d                       
& |4 Z; G0 ]6 }( v* h                        表示垂直方向布局。
                       
( M  r0 Q) w, R$ m$ U                       
3 S! S7 N$ ~% X  e0 e                        ohos:orientation="vertical"
3 K; c) p; |/ r- n; M: I$ {- O  x                       
4 w+ d, r/ R# W# X2 o               
在XML中创建TableLayout，示例代码如下：
1 g7 K: ]0 b2 q! W

[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
& p2 e) T9 v' u在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"
在TableLayout布局中添加子组件。

, n# i( ]1 q+ @: ~: K0 ?

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"/>
" q+ Z9 g* \( o2 K2 [, x    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"/>
0 I7 y5 k5 {" h/ |* ]    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"/>
& O+ V9 a% U, o% D8 Q    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默认一列多行。
& W# J; r0 U) a4 u- J/ b7 f

t3xn1evcjlq64023064755.png

7 R0 I. e. I# R  \' W- ?设置行列数：
. j/ X( ]" j% S2 E- c7 j
! `0 {4 z9 p: J- S

...    ohos:row_count="2"    ohos:column_count="2">
+ @- a9 H/ v2 C+ V7 i3 Q5 s$ l设置TableLayout的行为2，列为2效果。
# C9 r  v8 @3 l8 o( N" v, D' W, ~

0x1vb03eukh64023064855.png

在XML中设置布局排列方向，以“vertical”为例：
( F% ^, g7 ?/ s4 l; M

...    ohos:orientation="vertical">    ...
设置布局排列方向为“vertical”的效果。
  h7 Q- r" X6 Z8 ^6 _! A
; f5 S! ~, U& G& h

unz3dzuc5xl64023064956.png

+ I* k9 J7 ^8 R9 Y% [
: s9 w) a3 R) k8 i! K# fTableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：

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">
3 @: c7 z( j2 j    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"/>
% b5 h5 B1 k, |/ {, [$ z3 t. i    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"/>
" g  O- a6 X' P$ L3 l1 f- x    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"/>
边距对齐效果：
% F4 g! }  ^( ^7 [2 }) |( H1 ^7 |
9 x! e4 X4 Q; D7 C; `

oyxyntwu5gz64023065056.png

1 K2 T: n5 a; b
将TableLayout的对齐方式修改为边界对齐。

: s+ q% }7 q6 d+ N1 O7 \

...    ohos:alignment_type="align_edges">    ...
边界对齐效果：
# L5 ]) y- O! w" b) r) g
' _/ G0 o. q1 `- G

ij5c3kwpbia64023065156.png

引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：
) P. S" J0 b' P! b: C3 M
. s+ r8 x5 S5 a, X4 a1 T

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
( l( w* [4 m$ b+ L
" g4 k) Y$ u6 F6 n3 E) m7 Y" M& ZTableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。
1 d8 @; \' V2 l7 r* a$ q, `; [
7 x) L/ A1 o' _$ n3 z设置子组件的行列属性均为2的效果展示：
; p1 a% W4 U) @  G
5 B7 X) `! P9 w! r

yefghctpkvy64023065256.png

4 a* q7 I/ i' F% f7 j
# Z- R4 Q4 L* @0 E0 }在XML中创建TableLayout，并添加子组件，代码如下：
0 Q0 H9 j5 K5 v) ?6 c
* J5 R! S: H0 }, I, s$ \# s- }

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">
/ d5 H6 R9 \/ q4 h8 R1 g0 S' e    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"/>
0 p. O' l! n9 I6 j/ K; n    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"/>
  K( I- ~% g: h    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"/>
& \4 i, S' @0 y0 g6 j: X4 w& b    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代码中设置子组件的行列属性，代码如下：
( }( o4 T2 ~: A
1 e( B+ ^5 k7 T. |9 a  [% c4 ]

@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());    }
  B- d: N& s! e' w在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

; t( n- u  @, E# r# s3 a  K目前仅支持Java代码设置TableLayout子组件的行列属性。
在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：

8 ?5 U& g  D4 k5 a' w/ X) b

@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的效果：
9 t" j1 }0 X: Q7 g1 Q
( a2 j5 A+ ]: i0 W- K" R, ]

34h3fyeecrb64023065356.png

$ ]8 T3 n% n" t  |% L5 c* B5 w
设置子组件的权重，代码如下：
3 C$ m0 s# t8 d4 Z5 o/ [
/ ?) B# i3 ^3 k5 z$ S

@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);    }
( y' H; A1 ?6 M0 N' v上述代码将子组件的宽度权重设置为1.0，每行子组件会均分TableLayout的宽度，所以需要设置TableLayout为固定宽度或match_parent。

ohos:width="match_parent"    ...>
    ohos:id="$+id:text_one"        .../>
" Q7 X+ o" h0 ^    ohos:id="$+id:text_two"        .../>
    ohos:id="$+id:text_three"        .../>
! K& s3 }6 M8 ^) k1 J! i* y6 R    ohos:id="$+id:text_four"        .../>
    ohos:id="$+id:text_five"        .../>
    ohos:id="$+id:text_six"        .../>[table]
2 A! i5 j3 C$ G( \/ I将子组件的宽度权重设置为1.0的效果展示：

ijxnpfrv23564023065456.png

/ _" T; \' x5 X' F1 C4 m
( A7 E4 D/ N% V

c0n5zn40ptr64023065556.png

往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
一种高速ADC和DAC转换电路分享
- r: m" l' ], u# r! V一文搞懂CAN和CAN FD总线协议
* S# q# r' r" a" jLabVIEW和Arduino的巧妙结合（基础篇—1）
LabVIEW设计自定义滚动条

$ P4 v6 Z: j+ `* c' A+ |. t- t

wmjjolurf2k64023065656.jpg

, f0 i! `2 A+ v5 v0 ^

zg0xz1hpd4064023065756.gif

点击阅读原文，更精彩~