HarmonyOS學(xué)習路之開發(fā)篇—Java UI框架(Table Layout)

硬件筆記本

點擊上方藍色字體，關(guān)注我們
. M! @- ?) k% U4 gTablelayout使用表格的方式劃分子組件。
9 [* N- u8 V, e) z. h; ^7 ]2 j
1 N9 D% c$ p5 }( C
1 m$ ^8 A! G' O. c) i
TableLayout的共有XML屬性繼承自：Component。
2 ?, \0 L! k! n: b0 D& v( y1 [& T( o
3 _- j' J' o/ {' B0 G& bTableLayout的自有XML屬性見下表：
) P4 _. i3 q) Y9 x% m. C4 b
* Y) f; p" _; Z& L! Z# l
! t9 r3 z3 B6 b9 m0 r0 `3 z0 C4 o                       
                        屬性名稱
6 e' V$ _% k5 S1 g$ ?9 d; f- ~+ h                       
                       
                        中文描述
                       
                       
/ o+ ?2 y0 s  n                        取值
                       
' n" G/ S' x2 q5 ~  M                       
                        取值說明
                       
9 x7 c$ M, y+ `  l                       
                        使用案例
                       
( n: m; [) K: i  u               
$ a  o$ ~7 y% b! W$ N, t7 L       
       
" i- ?! b0 |* h8 t: H" G- z/ s3 @               
% W1 ]9 E3 c2 C                       
                        alignment_type
                       
                       
1 q2 \. b% K$ F8 o/ e+ ^" h! d                        對齊方式
                       
( c, n1 q/ S' O& u                       
                        align_edges
                       
                       
                        表示TableLayout內(nèi)的組件按邊界對齊。
                       
  Q2 g; V( x* R: A( X+ o1 }, N! K                       
                        ohos:alignment_type="align_edges"
: Z# T5 O! G! p  Z$ t# e                       
+ \2 S, a  X% C, t# y               
' \$ o4 P: l9 @! y# [% A               
( ^! j$ U4 X8 U; k3 R# P" M                       
0 G& x, v, a9 ]$ b                        align_contents
                       
                       
                        表示TableLayout內(nèi)的組件按邊距對齊。
                       
" e$ Y! t! Z3 J8 }                       
, J& W+ U/ S" v' F                        ohos:alignment_type="align_contents"
9 h6 n+ M' W8 Y0 q2 K% `4 b                       
               
. a& _! W( W2 T4 p% ^+ g5 D. I& O               
' ^8 [% n8 E9 r6 z                       
                        column_count
                       
) a4 A3 y; z# M4 J8 \+ }: S                       
                        列數(shù)
5 z2 R, E* v8 P3 X/ d; G% m                       
                       
                        integer類型
9 j& `" K  H' E6 T. b                       
                       
                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
                       
% P* k5 u* a8 }% A- {; R; }                       
4 G% F! h1 i. V% s* i8 g% t                        ohos:column_count="3"
. G0 m; w% f' x9 k- X
! \0 M8 M% \- j; l* Y  w; q                        ohos:column_count="$integer:count"
3 K6 ?* I, s8 j                       
' w% Z2 o% b4 v+ M5 t# G& u1 Y8 k               
               
' Q2 w/ `9 J" t# q, N; x. G2 m                       
                        row_count
                       
                       
                        行數(shù)
                       
                       
2 ^$ _* |* I+ d; Q3 ]4 M3 r                        integer類型
; X' F* K( p1 q: i9 g- }                       
& L) e1 o; A2 |% F                       
9 P( Y- {; \; F: `! W# f                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
                       
                       
                        ohos:row_count="2"
4 {6 U! n, A. X7 y: }
3 s4 _; w2 Z* d                        ohos:row_count="$integer:count"
                       
               
               
                       
- E9 k) |+ x( n- _3 s) `: ]) c) X! u                        orientation
8 M( t) d% w4 v1 E" ^4 r7 {* {& u7 ?/ W                       
) L. q& r2 d+ ]; {; O; G                       
6 w3 N# i" @/ T7 l0 R5 a) e7 T" T                        排列方向
+ h* O. }* v$ ~$ x5 V                       
                       
& `/ i) T) e5 J3 ^                        horizontal
                       
2 g8 y8 f+ y+ K  ^* _3 {                       
                        表示水平方向布局。
$ b1 P' t9 ]2 W/ B1 S1 A. ~                       
- \7 l9 ^% l0 x4 |7 J                       
                        ohos:orientation="horizontal"
: p2 D5 b* k" J                       
. t# O$ q# I' T  t2 }. _               
5 ]' _0 G) W4 M' L               
                       
) w7 a' m& e( K, x+ b                        vertical
                       
                       
                        表示垂直方向布局。
1 V$ O- j( F2 U( s0 h9 _                       
                       
                        ohos:orientation="vertical"
                       
               
7 {% n, m6 G# m2 f在XML中創(chuàng)建TableLayout，示例代碼如下：
/ t8 _% L7 @% B$ j( _' z8 E

[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
; @9 h% v! D% r+ L在graphic文件夾下創(chuàng)建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"
0 [' g0 f5 C& ^( B& j; W! I. e( B/ _在TableLayout布局中添加子組件。
! w/ `$ v% K+ l3 T$ {8 e
% M; V4 Q- B6 ]; E" ^

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"/>
6 g* q* p+ h( x1 K+ K* Z9 `: 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"/>
7 s9 Q! J9 Y/ _1 j; g: p    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"/>
0 w1 \) o1 M: m! E. N9 s    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默認一列多行。

" Y" `' Z& [6 X* r+ z

設(shè)置行列數(shù)：
7 k1 A  i" [  L# {% a! P6 c
0 z: Y! ~- A) n. B; U; B6 m

...    ohos:row_count="2"    ohos:column_count="2">
設(shè)置TableLayout的行為2，列為2效果。
" k' z9 v3 i, b; f; }9 D  `0 `

- N  i5 O/ m) |8 H: G* X2 n; b7 }
在XML中設(shè)置布局排列方向，以“vertical”為例：
- f3 B: Z! ]; |# o1 L
. O; @+ ]. K1 C" T, \" C9 H

...    ohos:orientation="vertical">    ...
4 e6 v! V+ L8 C$ Y1 R3 i設(shè)置布局排列方向為“vertical”的效果。
' U8 O! H% _- W9 i1 b4 I7 X
4 Q2 W" Z  [8 {
6 W# {: ]* P9 ]2 f/ o+ I
TableLayout提供兩種對齊方式，邊距對齊“align_contents”、邊界對齊“align_edges”，默認為邊距對齊“align_contents”。代碼如下：

7 L' m  P2 a) M8 Z+ G

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">
- R" d: E9 x5 U; @3 T' U9 k    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"/>
5 r( Y2 T4 k8 j. M# d    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"/>
" O. w$ t: {7 H    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"/>
1 K( w+ ^2 F$ m' ^& g# T邊距對齊效果：
2 B" e- D: D' k+ ~

* {$ f0 f" H& V5 N  Q
+ ~5 \/ Y8 h& }4 K4 c6 h將TableLayout的對齊方式修改為邊界對齊。
! r7 ^# w; Q1 y+ A/ r

...    ohos:alignment_type="align_edges">    ...
邊界對齊效果：
' R/ }$ o9 j7 i6 y# s
' f6 w/ e# S& d) D, B: {

" ^; k5 a" e( h; {( d' B引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：
7 U/ D$ r! Y% J, s! J6 t7 ^0 U

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
8 Q5 X. `- C/ }- r3 d
TableLayout合并單元格的效果可以通過設(shè)置子組件的行列屬性來實現(xiàn)。

% s$ Z& G- n# r0 l* }3 t1 ?設(shè)置子組件的行列屬性均為2的效果展示：

" F8 ?; w3 @- g8 _: e9 j6 ^
. X1 B2 h; T; S8 F9 r' `
在XML中創(chuàng)建TableLayout，并添加子組件，代碼如下：

* m6 C: ^% X5 [+ D+ 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">
    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 u" b" x; q9 ]+ ]    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"/>
    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"/>
8 ~8 f$ y) g- |( D6 V) s1 C在Java代碼中設(shè)置子組件的行列屬性，代碼如下：
9 P/ s% O* T* f* n0 W: g
' t0 Y) P/ N0 G5 }5 c) q3 y9 U# H

@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);    }
; a% i+ m( {) B1 u9 }6 {6 J    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
/ F( D8 v% A# M3 M* i在設(shè)置子組件的行列屬性時，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。
) u) [3 x, ]7 [# e: [. t8 x
$ K3 o6 z" V2 f目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。
+ @3 v* h0 h, ~0 T  Y) B# h4 A1 y在創(chuàng)建子組件的行列屬性時，還可設(shè)置子組件的對齊方式，修改上述Java代碼如下：
* w1 L6 P0 l+ p, A  c0 z2 t
8 J, U& M. J# R0 A  S- P

@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);        ...    }
5 k$ N8 I: x. f3 |7 ~子組件的對齊方式設(shè)置為ALIGNMENT_FILL的效果：
: s8 Q/ r, V  E/ V0 d+ n6 A
# Z# n; W. ^7 Y8 _  s  j: b

1 N% G# \) Z5 N$ Q' _& y# i設(shè)置子組件的權(quán)重，代碼如下：
9 ]3 p8 P8 F: ?4 F9 w, H! I, F8 @7 r
8 f3 X# w- T+ M  O

@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);
$ k) o/ x! a6 @" [        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 h5 I' l6 J* [' c2 z- J. ^: _. H上述代碼將子組件的寬度權(quán)重設(shè)置為1.0，每行子組件會均分TableLayout的寬度，所以需要設(shè)置TableLayout為固定寬度或match_parent。
& [7 s, v9 h5 n) z2 b/ A7 ^

ohos:width="match_parent"    ...>
* _3 {: q. r. }) t/ V8 c# _    ohos:id="$+id:text_one"        .../>
1 r0 B% h: Y6 ?    ohos:id="$+id:text_two"        .../>
9 v; W8 W8 x4 y0 b9 c    ohos:id="$+id:text_three"        .../>
( y* _' O7 L" f9 q# C+ d. E    ohos:id="$+id:text_four"        .../>
# T: n' P  }. ^' F    ohos:id="$+id:text_five"        .../>
9 f9 B5 m6 n$ k, G    ohos:id="$+id:text_six"        .../>[table]
將子組件的寬度權(quán)重設(shè)置為1.0的效果展示：
& f4 n7 z; f: `  i1 h5 o4 |, b

8 o. M/ x' C8 E1 [# V, ^


往期推薦基于Mobile SDK V5版固件開發(fā)大疆無人機手機端遙控器（5）
4 n) [8 W) @4 C* c5 A一種高速ADC和DAC轉(zhuǎn)換電路分享
一文搞懂CAN和CAN FD總線協(xié)議
* H7 a7 I. n8 T+ RLabVIEW和Arduino的巧妙結(jié)合（基礎(chǔ)篇—1）
8 [/ q1 U, p! ?! {: {, ELabVIEW設(shè)計自定義滾動條
# k2 a+ Q. n8 T  k6 ]. S
3 ^3 X0 B. \3 w  O5 \) A6 C+ o7 j6 u; J
: A# i7 Q5 a2 A
4 e7 X) P& `- @6 ]% j7 |
點擊閱讀原文，更精彩~