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

硬件花园

g43nwgt22hl640333607.gif

点击上方蓝色字体，关注我们
& Z, f: j$ E5 e3 d( z8 N( xTablelayout使用表格的方式划分子组件。
# i# b2 h7 X2 Q( |7 H
) ~) \: i+ i! Q2 k. Z/ i! C+ Z

a1c1ksif1ps640333707.png

; N2 v) n1 k' ]7 b$ Z$ p5 Q
TableLayout的共有XML属性继承自：Component。
  j% T$ t3 @! d% O% ^" N# O
TableLayout的自有XML属性见下表：
2 j# s7 r0 L& R: ?$ Z" ?1 |
# L- X; V' t9 I* Z
% q4 o  s/ H% X* p                       
                        属性名称
+ }& [4 z# {) _6 ]$ O: H                       
" a+ r5 U6 k# e1 ]- r0 i0 K1 T                       
4 A. F0 q  ^( v4 A                        中文描述
1 k- D: m# [) X( ?* g8 J. O& V                       
$ O3 ]' P0 q3 K5 Q1 c                       
                        取值
. A# I9 |# f/ j5 o                       
6 |! v. K6 j% R+ p                       
$ f! J7 i/ h1 |& w5 r+ y                        取值说明
                       
- b0 t+ h2 Y* u& _( u/ J                       
                        使用案例
) S* e. Y6 ~1 Y                       
               
; j* }& L$ y2 Q& n. ~7 S9 D# J' _1 U       
       
+ p2 c  k/ \$ `- {1 O               
5 l3 u0 X2 ], b9 f                       
                        alignment_type
                       
8 R9 o; \9 b' R, f1 P- Y0 |                       
                        对齐方式
                       
                       
- M5 |0 I' y3 ?1 P# O                        align_edges
0 \% F; U$ C! D- h6 O                       
                       
" u/ F" P# I: e7 c. M7 k                        表示TableLayout内的组件按边界对齐。
9 T4 x7 q: }  d7 c, t( f: R/ L$ H                       
                       
' s+ [5 n* L' j' p7 w; d6 ?                        ohos:alignment_type="align_edges"
                       
* y. ~! T/ c2 n( O               
               
! L: R2 d' X, H1 K6 R) y! e% P                       
! [& z# z) s6 p+ h6 @. B                        align_contents
* B2 g2 K+ A# H: ~. k+ \                       
- P+ p: a8 |$ }6 x4 F6 W2 q                       
                        表示TableLayout内的组件按边距对齐。
# Q# N$ Y/ [$ T6 ^1 |/ U( E0 F7 t3 \                       
, g- ?7 Y8 W- |9 h# K                       
                        ohos:alignment_type="align_contents"
                       
& q, O  q  `4 n  o               
: N6 R6 h& M$ Y5 o5 R* W* K( w               
                       
9 }4 y' u' o, w( |& r                        column_count
                       
                       
                        列数
                       
                       
                        integer类型
9 u& Y, ]5 h' y$ x3 n0 }6 Q7 m3 v                       
                       
3 D, {" `, D; m4 D, J  ^; U                        可以直接设置整型数值，也可以引用integer资源。
                       
8 _+ }% f! V2 A                       
* U! N% S1 {: @. ~0 B2 @                        ohos:column_count="3"

$ F6 `( o+ {  T5 T% Q                        ohos:column_count="$integer:count"
                       
# ]; l) x2 x2 f! V+ {: R               
               
                       
3 w5 b5 Z. ?/ D  x2 j; F                        row_count
                       
( N! m1 P6 h" l8 [8 Q$ P                       
                        行数
                       
+ k+ K7 Y6 f3 g7 i) N8 S$ f                       
                        integer类型
                       
6 B$ j9 B% J2 o7 ]' a4 q- k                       
8 G  f& |1 i4 R$ u                        可以直接设置整型数值，也可以引用integer资源。
' |* E. {9 F& t1 E) c6 \                       
( N5 j/ J. w& W2 I2 a5 W                       
                        ohos:row_count="2"
( i5 x: Y9 W0 m. ^  c+ `
                        ohos:row_count="$integer:count"
                       
               
% v0 i& K& a0 J               
! q1 g* G! G' m! f" L9 }% w. b. M* M                       
5 p# Y$ S) ?& Y4 s3 M0 }& F  M                        orientation
) v# x5 [, ]) R/ F2 E5 ]6 \% s                       
                       
                        排列方向
                       
" \( M* ^* ~+ ?: G: G                       
7 s% B; l; w5 x                        horizontal
                       
                       
- w7 t, G: c9 G                        表示水平方向布局。
8 B3 w+ W- ?0 v8 x                       
0 J: O# F6 W5 ^8 w' m                       
" U8 d- ^; `# D. n" Q; I6 ]/ R                        ohos:orientation="horizontal"
7 E3 m+ e. @" _8 k2 j5 c                       
: i1 w/ I/ Z, T! [) ]- R               
3 H2 r  r$ h" Q7 I" N               
                       
$ K% Z6 f/ S: u9 _; B8 U, ~% S                        vertical
                       
0 ?5 o' j( t3 A  k. P9 f                       
( |- v' ~  v7 z4 C                        表示垂直方向布局。
                       
                       
                        ohos:orientation="vertical"
                       
               
2 K2 F8 T" a9 l9 e! u- g在XML中创建TableLayout，示例代码如下：
" R" t6 u; E3 b% ~8 C

[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
& _5 d# x* d6 Y在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"
' G% e  h( O& g: ?8 X在TableLayout布局中添加子组件。
: t6 a+ u) Z9 M6 g: z

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, P' u+ U6 ~! T' g/ H* r' ^    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"/>
5 _% z# Q9 B  R' T7 O& H$ `3 S, E    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"/>
    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默认一列多行。
! k6 h1 P/ K' [: b9 o& p

4a4qj3ke5nw640333807.png

; P' ~7 G" J+ x' B7 q
设置行列数：

...    ohos:row_count="2"    ohos:column_count="2">
, }# N( @# k9 Q设置TableLayout的行为2，列为2效果。
/ V' W9 L+ B3 m

sb22d1xcsdf640333907.png

, n5 h% h/ M& F$ ?  _
/ W7 N( t5 P" |  u8 J在XML中设置布局排列方向，以“vertical”为例：

...    ohos:orientation="vertical">    ...
设置布局排列方向为“vertical”的效果。
. [2 N/ v- u5 B4 Q$ h
& l: [+ A9 z" |7 T

fq3thgdkk42640334008.png

+ Z( ^! F0 I4 c& e9 Y
TableLayout提供两种对齐方式，边距对齐“align_contents”、边界对齐“align_edges”，默认为边距对齐“align_contents”。代码如下：

: y' i2 Z, w( J

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"/>
+ e/ u8 Q% X( A1 B    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"/>
% x) {: y4 p, c    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"/>
    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"/>
. Z, z$ B. \8 a# S  W9 h6 u边距对齐效果：
+ f7 w" |) j* B3 r( W% @5 b
% e! [5 L: d3 q/ C9 D

ujxbcprrdy2640334108.png

$ Q* B# V& I7 w4 s* \将TableLayout的对齐方式修改为边界对齐。

...    ohos:alignment_type="align_edges">    ...
边界对齐效果：
; }$ f' R3 \. `; D! X0 B. c3 _
% B' u# Y+ d3 [" z! G: j2 O

foypwvjds3n640334208.png

引用graphic文件夹下的背景资源文件为layout_borderline.xml，示例代码如下：
. U: u# \# V( M0 t% K
1 ?9 t. j5 ^; f. ~; ?0 _, ^: s

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

TableLayout合并单元格的效果可以通过设置子组件的行列属性来实现。

设置子组件的行列属性均为2的效果展示：
9 W$ I7 y# A$ O) i- ^; i( _; z* x
4 E8 o8 f2 c+ U4 m* p) m

logii0loco3640334308.png

6 N  {2 Y5 A1 N& E
& r  V" O+ W* T在XML中创建TableLayout，并添加子组件，代码如下：
: B* z8 D& z6 i$ K
% f8 ^! {1 X5 e8 l1 [2 l1 y

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">
, X  \# L2 R; ^( j0 K    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"/>
1 O& a' u$ w5 M$ ~' T% y. X    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"/>
! Q  p0 D1 m- Q: B# J0 O$ W    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"/>
& o2 S5 \+ g9 r" }' I/ N    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"/>
    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代码中设置子组件的行列属性，代码如下：
% j! U9 c1 R# E! U  l- \' j0 ]

@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);    }
. H1 A  P' k" n- u5 ?2 }3 I    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
# M) P  G/ y3 h! y7 c0 D0 x
) ~1 l! Q+ ]* U3 n目前仅支持Java代码设置TableLayout子组件的行列属性。
7 s3 Z7 D3 p0 w5 [. ~8 Q! |0 c: O在创建子组件的行列属性时，还可设置子组件的对齐方式，修改上述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);        ...    }
子组件的对齐方式设置为ALIGNMENT_FILL的效果：

cqb4qzs3oym640334408.png

5 d+ m" F! ?1 \' h设置子组件的权重，代码如下：
5 O. o2 C4 _- c/ K7 s, M  B0 `

@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);
+ C0 X# X3 V4 w! R% V* k        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。

# x! N2 k' Y( ~! z0 j- {

ohos:width="match_parent"    ...>
    ohos:id="$+id:text_one"        .../>
    ohos:id="$+id:text_two"        .../>
, n7 O& c4 v7 ^& C! ~: K    ohos:id="$+id:text_three"        .../>
    ohos:id="$+id:text_four"        .../>
    ohos:id="$+id:text_five"        .../>
% `1 [* e/ l% k' y9 l& Q    ohos:id="$+id:text_six"        .../>[table]
& G! o0 \) n$ J5 S7 w% Y7 r将子组件的宽度权重设置为1.0的效果展示：

* W$ c' e( w! s, @4 g$ r

3mekn32jzvb640334508.png

  D; d5 T5 \/ A* H' F, l9 Z
9 f4 r+ F# \3 R( {7 M0 j. }+ S

ogbaqisis1f640334608.png

3 `1 Z4 L: b7 a% w往期推荐基于Mobile SDK V5版固件开发大疆无人机手机端遥控器（5）
& }2 l: o8 c# R# G& w, i3 n一种高速ADC和DAC转换电路分享
+ e. ~, B  W% a; N# K7 L/ k一文搞懂CAN和CAN FD总线协议
LabVIEW和Arduino的巧妙结合（基础篇—1）
1 h$ u3 y3 {% K: ZLabVIEW设计自定义滚动条
- P7 t3 ]1 Y) m% b) O& b0 f
- a. B3 G0 N: w5 x/ f

51ql0fnlvwc640334708.jpg

( U7 J1 `' a* l; d& }$ M3 W

oq1sin3a4bp640334808.gif

点击阅读原文，更精彩~