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

电子设计联盟

nnap5d14ss364018786057.gif

; r+ w. s9 r" Z& O/ z点击上方蓝色字体，关注我们
- R+ \& U/ f' o3 Z3 cTablelayout使用表格的方式划分子组件。

zk0tipmeb4i64018786157.png

9 t$ y& j* v( `) ^TableLayout的共有XML属性继承自：Component。
* v9 O+ ?: L8 X# v3 {" c9 f; Q
TableLayout的自有XML属性见下表：


+ O% I" D) w( _7 G9 _! a4 v' Z                       
                        属性名称
; ]* O7 x! u- S9 Y! y/ S                       
4 E7 u( U; j9 m4 C/ j8 ~                       
4 a2 B1 H) r5 D# E& i9 M                        中文描述
! E5 s( d9 ^6 {6 R                       
                       
+ l# v0 b1 c% J$ t2 W                        取值
; S8 U7 [9 ~' c. R' Z, e8 a, _" {                       
; u0 d0 y) j) f  G) F* |& e                       
                        取值说明
8 o4 x5 M5 E+ ^0 o                       
                       
& S4 E, a' H. E                        使用案例
1 @. V- L& L- _% y                       
               
       
& l$ ]  H* y9 _       
               
7 V5 J8 l; |0 X* L                       
7 i* M+ w1 g: n" o( L                        alignment_type
                       
! @4 ?  Y% v) Y                       
                        对齐方式
) u' ^, H1 }* C6 I- r                       
- `2 c: |/ }0 T: P                       
8 s$ x9 E2 l( |- N; b! H0 F                        align_edges
: |: K0 h% b' P) F+ r) t. a  N                       
4 r1 u8 L+ n9 @, l3 Y; Q3 o                       
                        表示TableLayout内的组件按边界对齐。
* C8 a7 [! e$ t9 T% _/ M                       
                       
# [& c5 k& m+ r* T8 B) ~3 x                        ohos:alignment_type="align_edges"
* T1 c7 l' U- i7 c1 d) g                       
- u) V; @) d3 w               
               
; o/ N" t2 O3 V0 ~- v, g                       
                        align_contents
, w0 l( q+ {+ u  N/ L$ Q                       
6 R/ \' z5 o$ c' h& V& W                       
" [' h, X# g( S* x- R# l3 X                        表示TableLayout内的组件按边距对齐。
1 {: y  C6 p/ u9 `                       
                       
                        ohos:alignment_type="align_contents"
                       
  T( R( ?5 g/ p/ p( s5 _' R% w               
               
                       
. u1 S1 P6 J7 X( R1 X+ E5 D% U/ \                        column_count
                       
                       
& I% c' p& c! A: a0 [& V; W                        列数
                       
                       
& _0 K2 p3 V  o8 U                        integer类型
* S) H  {1 f" S5 a) c% E                       
2 Z/ F9 s: A  A' c                       
' h; m5 U; _  o                        可以直接设置整型数值，也可以引用integer资源。
                       
                       
+ S9 P, m1 F, R" ?. \( D6 L+ o* X                        ohos:column_count="3"

                        ohos:column_count="$integer:count"
( W+ S3 t0 O0 e3 m6 a) s                       
               
               
- c' @' \$ D" n' w! v, T0 y                       
                        row_count
: U3 ?; Q, Y/ z. S% y9 b9 p% m                       
                       
5 u- j5 u& N1 }# H& i                        行数
0 R" t# H7 G0 f- C; |                       
                       
/ w5 ~" x) p, u* v* \7 p& k                        integer类型
                       
                       
. F! N( q" E0 O+ A                        可以直接设置整型数值，也可以引用integer资源。
7 x" ~( F% o7 Q3 v, v* L; v                       
( D. ~( Y) c1 U- G: I                       
. K/ z: j( }* i% @* [# j/ i                        ohos:row_count="2"

                        ohos:row_count="$integer:count"
                       
* B# H4 t! n# ]/ g               
4 L& j- h) q8 T+ R/ a' y( m) x: }               
2 {9 I+ J+ u+ e                       
3 \8 ?! I( `( F! S                        orientation
                       
                       
4 S* m4 p; S7 F8 x0 Y- r                        排列方向
7 {4 Q3 \0 y# S7 d7 B, E                       
$ p8 p  F' t! ?2 o7 \                       
# y& m' x1 p6 _+ k5 H6 I; V                        horizontal
                       
                       
                        表示水平方向布局。
                       
                       
                        ohos:orientation="horizontal"
                       
2 L4 {* ~5 u( ^, ^* A6 K               
. a7 {; I' D& ^+ F, U               
                       
& M) ~4 N) M: j  B5 l: b: n+ S                        vertical
                       
8 [: S& t1 }! U, n                       
                        表示垂直方向布局。
                       
                       
3 F; q% ]2 Z3 h                        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
在graphic文件夹下创建Text的背景table_text_bg_element.xml，示例代码如下：
, ?/ b8 o4 T2 a- b3 |

"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布局中添加子组件。

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"/>
6 o6 d9 K# G- |/ W, r    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]
9 r% x2 {* v/ N/ O, l4 S, mTableLayout默认一列多行。
5 t5 P- ?4 \1 U$ h! |

vdnwwxxbhxe64018786257.png

设置行列数：
/ u" |+ L+ m: s: Q
9 @6 j3 R$ d2 s# S

...    ohos:row_count="2"    ohos:column_count="2">
+ R8 U" ]1 A- v8 N6 {设置TableLayout的行为2，列为2效果。

1 I8 G) m: f6 k5 O! x1 t1 o

jjd32zse15f64018786357.png

6 K% N7 I* T* J2 f/ x) Z
在XML中设置布局排列方向，以“vertical”为例：

...    ohos:orientation="vertical">    ...
( D0 V% {  {4 s! _2 ?! @& F设置布局排列方向为“vertical”的效果。

- X( L+ [4 e! y! \2 r' {

wxoeuke3cso64018786457.png

6 x4 x/ ^$ {& v% B# O
( s$ Z: w+ I% T* Y  ^6 {6 V7 `* qTableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：

3 b6 Y6 b/ S- w& u# R7 k* [

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"/>
6 ]' o2 m- g& {& `7 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"/>
! }( Z8 z( \0 h" o* |    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"/>
3 L8 z1 Z- a9 \' Q' i( f    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"/>
边距对齐效果：

1qzwejhiyoq64018786558.png

- s. k! F6 ~  a& j. S$ y& [4 K3 s将TableLayout的对齐方式修改为边界对齐。

2 Z* c, u7 y2 G, Y! J) u) I

...    ohos:alignment_type="align_edges">    ...
边界对齐效果：
7 V! J5 s  T( M" J
$ j3 H4 P3 j: b6 j

v42rclvnw4p64018786658.png

引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
% E* I# \% j& ?% c: i. p
7 {& }/ e4 k0 x; Y1 wTableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。
% a, w% l; X5 `# @/ K
% d) y0 C$ _- a8 n设置子组件的行列属性均为2的效果展示：
- g* D$ t; s$ {$ l9 i; @4 }

bwmgyokcivs64018786758.png

+ W) ^. M0 t2 h* P$ `在XML中创建TableLayout，并添加子组件，代码如下：

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 G) h0 ?$ Q& Z: [) @8 G! ?    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"/>
    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"/>
6 p5 k2 |1 h2 Z5 q7 M- W  S$ 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"/>
( K! |5 H* V0 v- V/ ?    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"/>
8 u, a" @5 N( ]" \$ B! u4 v在Java代码中设置子组件的行列属性，代码如下：
( W% n! l4 V, |/ \
4 G, u0 ^  C; W, ~0 f5 t/ E

@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);    }
$ e- h9 ?: z- f* V    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
$ k0 h1 O1 t, S; b$ `6 v( ~7 s
7 ~- X" K$ b5 ]4 I目前仅支持Java代码设置TableLayout子组件的行列属性。
在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述Java代码如下：
  O% t2 I$ @' t
  @8 a) n' E; C" g7 S; k8 J$ r) `3 q

@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);        ...    }
, |' r1 W* r7 A4 h: i$ J# _4 y子组件的对齐方式设置为ALIGNMENT_FILL的效果：

3 D; f8 V) ]2 J( u. J0 `) E0 ?

kwezhlemrcu64018786858.png

7 C# A5 V. B" ^' H
设置子组件的权重，代码如下：
( O' f) p( E( Z, Y0 {' X$ u

@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);
8 [% S1 i0 G* B) U! h        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。
2 S  E. x8 M. b- N" a* t
* n: }9 z% s' r6 @

ohos:width="match_parent"    ...>
6 I3 R1 c& r- m. Z6 R1 ^: H) @1 W    ohos:id="$+id:text_one"        .../>
4 t: G, J. P% h% s4 ?1 j* v    ohos:id="$+id:text_two"        .../>
/ M/ |/ J+ }* A" ?1 f1 X* Y    ohos:id="$+id:text_three"        .../>
    ohos:id="$+id:text_four"        .../>
    ohos:id="$+id:text_five"        .../>
" w0 m5 }+ X# _, Q2 A0 d. b# \    ohos:id="$+id:text_six"        .../>[table]
  P& ]0 ~" ~/ x! D0 t# D) d& H. ^将子组件的宽度权重设置为1.0的效果展示：
6 T# y+ R  c, L9 p# E: b

2hed5d0clfr64018786958.png

  X1 W; n6 U2 R; Q
7 a- b  }3 u; Z; f

0lzvlcjvo2264018787058.png

" d8 N: ^! r2 U* P3 K  U; I2 d# ~) h往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
一种高速ADC和DAC转换电路分享
一文搞懂CAN和CAN FD总线协议
/ h/ K; J4 @: ?, tLabVIEW和Arduino的巧妙结合（基础篇—1）
LabVIEW设计自定义滚动条

dzdnnjcmsp464018787158.jpg

% E! R5 N" D7 u; K. D

fyoqsj2br5r64018787258.gif

点击阅读原文，更精彩~