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

電子設計聯(lián)盟

9 \# H4 p! K; H. w點擊上方藍色字體，關注我們
" G0 i# o, ?+ y7 \1 E3 p2 O5 |Tablelayout使用表格的方式劃分子組件。

& b% X5 R. ?! q% n0 o

TableLayout的共有XML屬性繼承自：Component。

TableLayout的自有XML屬性見下表：
% o3 x/ F4 O3 ^7 r7 ]* W6 G5 U( o. |

. I% w/ W6 S8 W, }6 [4 g' R6 B  t* G                       
                        屬性名稱
                       
  q; F" B7 {) E                       
5 E4 X- z! |* _                        中文描述
                       
                       
3 F3 N- c1 H0 T                        取值
1 D! }' d4 j% [0 I  w+ ^4 j+ I                       
) n9 F4 x% T; l: J) `$ L5 v1 y+ @! L                       
                        取值說明
                       
: B4 X1 ^3 t; _( v" ~  l! M9 X1 x                       
                        使用案例
                       
               
( i5 o* {. P: }1 y* g/ P       
       
" C; \, g. Q  R+ q6 ?               
                       
2 _* B5 I& f6 \* Y. i                        alignment_type
                       
                       
                        對齊方式
                       
                       
$ g2 C+ ^+ r6 N; ~4 @6 \                        align_edges
8 `0 ?5 ^- k, N' v# x                       
1 P4 i4 z  o. J+ m# H4 j4 Y/ J, O; g                       
% h- D' G' W! e                        表示TableLayout內的組件按邊界對齊。
                       
                       
                        ohos:alignment_type="align_edges"
                       
/ G2 o+ M& l- a               
8 P. Q1 B$ y: w+ z; M* u# X( T! p# K               
' x: p6 _) P; p9 V                       
; x" P7 O2 S( U& m                        align_contents
  @6 d) F( _9 c. F# D                       
' y  z7 _8 m3 b4 H; Y                       
9 B0 c. {  i+ @; A; g& I* N1 t                        表示TableLayout內的組件按邊距對齊。
                       
) |: z6 G8 F6 L# p, T: ^                       
+ r% H! A4 q8 t                        ohos:alignment_type="align_contents"
# L' o# S. ^, p                       
               
               
                       
                        column_count
6 u7 S% i  K9 F* |" p                       
                       
                        列數(shù)
                       
                       
7 p( ?& L& Q/ r, w- Z' p/ j                        integer類型
6 ~5 [  x* K, J8 V                       
                       
                        可以直接設置整型數(shù)值，也可以引用integer資源。
                       
  u6 J  ~6 V+ r* a                       
                        ohos:column_count="3"

# n* g& w# |: N5 D7 [                        ohos:column_count="$integer:count"
                       
               
( y2 Z3 ]' I4 p! k               
9 a' N( h2 V+ C0 m5 A                       
                        row_count
- S# N$ B3 h5 L& ~& d( Q5 J5 ^                       
                       
0 N& a3 c+ Z6 N( n. ?                        行數(shù)
                       
+ y0 n6 A/ B: i8 }' s+ y* ?, K0 G                       
1 S, z, F; s6 z6 y& v1 _# u& D                        integer類型
! C2 \* R) V9 y& q                       
* `; t* O* r. p- w                       
                        可以直接設置整型數(shù)值，也可以引用integer資源。
                       
                       
                        ohos:row_count="2"

8 r2 w  U1 M  Y  E% R5 ]: e                        ohos:row_count="$integer:count"
6 a$ Q! q# [% m# W& U                       
3 c! S; a! ?% P* m" H5 x               
               
                       
                        orientation
                       
                       
                        排列方向
                       
6 d0 v# o" d5 D% B: v& S9 V                       
                        horizontal
/ R3 J9 ^4 I9 I9 h                       
+ o& `* ?' }4 y                       
4 l+ {9 w8 z4 o: `5 ]5 K                        表示水平方向布局。
                       
                       
                        ohos:orientation="horizontal"
- ?+ Z) a; K! [  A' m! X0 y7 {5 Y9 n                       
               
               
( q4 b7 q' Z* M                       
  g/ X# L& n5 C' |! |, \                        vertical
                       
- a! v  H3 D: y% ~  N                       
                        表示垂直方向布局。
& {; U9 \- d4 r6 ]+ b5 H6 I                       
                       
                        ohos:orientation="vertical"
                       
3 f- R) O: R- G! b               
6 q+ i- S$ Z& W/ L. C在XML中創(chuàng)建TableLayout，示例代碼如下：
  @- ]; A" e5 e/ e% P$ m$ x; B

[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
4 l" M# C+ G( n8 d6 |. {7 o在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"
在TableLayout布局中添加子組件。
9 x- z1 ?/ _; y' B

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 N" s4 p3 s8 {. U0 U3 x    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]
' Z3 r9 w0 F( D, ^( W& l: g/ l6 UTableLayout默認一列多行。
5 d- D6 M  i9 n) M7 B0 `6 y
% I( @4 ^  a3 G

設置行列數(shù)：
, L. _$ C7 ?1 ]/ g$ o

...    ohos:row_count="2"    ohos:column_count="2">
: y$ G4 Y! M: N! H! F/ |9 z設置TableLayout的行為2，列為2效果。



在XML中設置布局排列方向，以“vertical”為例：

...    ohos:orientation="vertical">    ...
$ j" B( J) U7 z/ I- @0 ^設置布局排列方向為“vertical”的效果。

( w0 t1 u  n5 A2 \! w$ _
0 J/ i  e8 {# `6 G
TableLayout提供兩種對齊方式，邊距對齊“align_contents”、邊界對齊“align_edges”，默認為邊距對齊“align_contents”。代碼如下：
8 X. S, m* G9 ~" x6 }! {* }7 ]3 G
0 j! d; i5 j( S0 `+ Q$ h* v5 H

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">
- c3 h. T$ L% {( b" F5 ~3 y. T    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 \9 K( T- c' G) \1 o" m    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"/>
. r" m- f- g& _  w    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"/>
; K* b9 f: M, p2 R    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 G3 ^  E; |0 v, O3 i+ E    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"/>
邊距對齊效果：


: ~0 m; d! F5 ^5 P# J# u; _) R
將TableLayout的對齊方式修改為邊界對齊。
0 Q) D; }, e0 ^& ], D9 \& R0 \

...    ohos:alignment_type="align_edges">    ...
邊界對齊效果：
) A) ]  U% C& e7 F
; Y4 \4 A" O/ a+ T2 I* |
/ R3 |1 {/ K8 Z" Z2 x. `
引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
$ [( c1 n7 x& a& Y( g/ ]
& R" o# ?% Y: v$ I1 l$ S" tTableLayout合并單元格的效果可以通過設置子組件的行列屬性來實現(xiàn)。
$ x6 Z9 d, K  Q1 Z8 j
設置子組件的行列屬性均為2的效果展示：
5 |' ^/ H- Y% G+ @8 o

- M, a5 e! O, m* k' U/ W0 d, D1 U3 Q
在XML中創(chuàng)建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">
) X( m- P( C7 A2 b6 A: ]. u1 F    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"/>
$ C1 F9 e" |' b3 ~4 J: b    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"/>
+ a( l2 y7 B5 p$ G' `, B5 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"/>
3 Q6 {- R" l& L8 T) q* }    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"/>
- V% b3 l0 e0 R, K# z; Z    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代碼中設置子組件的行列屬性，代碼如下：

@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);    }
# w6 [6 e! a! i- m    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
  y2 Z5 ?  V5 Z7 q% ?3 j- {8 }" F在設置子組件的行列屬性時，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設置的行數(shù)和列數(shù)。
4 [1 J5 H6 R9 w4 c% i
目前僅支持Java代碼設置TableLayout子組件的行列屬性。
在創(chuàng)建子組件的行列屬性時，還可設置子組件的對齊方式，修改上述Java代碼如下：

* W9 N' k0 E4 u

@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 W# W, j4 v7 f# G子組件的對齊方式設置為ALIGNMENT_FILL的效果：
/ R) M6 N' }* q: J3 s7 X; N+ f
8 b% x3 t, `. z! ]6 h8 ^

設置子組件的權重，代碼如下：
( M5 K+ B' [7 A; |
" [# `) X' K: R4 P

@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);    }
$ ^4 U8 b4 {% r, J3 O8 P) K上述代碼將子組件的寬度權重設置為1.0，每行子組件會均分TableLayout的寬度，所以需要設置TableLayout為固定寬度或match_parent。

ohos:width="match_parent"    ...>
5 `( N/ C' o6 }/ T% |+ Y) _    ohos:id="$+id:text_one"        .../>
    ohos:id="$+id:text_two"        .../>
/ f+ y( Y% A$ _/ s    ohos:id="$+id:text_three"        .../>
0 \7 Y& H; K: o1 R3 k    ohos:id="$+id:text_four"        .../>
& j6 @2 A- ]  _    ohos:id="$+id:text_five"        .../>
, |8 X, ?- `% m" W* f; g1 e    ohos:id="$+id:text_six"        .../>[table]
2 q9 W# c* Z! _. @將子組件的寬度權重設置為1.0的效果展示：

" W+ M+ r1 \  [" [& O$ P& D
5 V) Y/ T4 }) |$ t. @


往期推薦基于Mobile SDK V5版固件開發(fā)大疆無人機手機端遙控器（5）
一種高速ADC和DAC轉換電路分享
  ]. }- T5 p' _0 W! d3 G一文搞懂CAN和CAN FD總線協(xié)議
  O: |6 m8 k$ q- p5 f( cLabVIEW和Arduino的巧妙結合（基礎篇—1）
LabVIEW設計自定義滾動條
6 d7 l) }, v( ~; _. C" k


/ u8 _6 }; z( [
' b9 _; g% u  c! U% y點擊閱讀原文，更精彩~