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

電子設(shè)計(jì)聯(lián)盟

3 m0 J' K3 i2 J: Z' J點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
- N0 Q4 l+ v4 w3 u+ {/ iTablelayout使用表格的方式劃分子組件。

4 e& A" x# G  m/ F4 S
8 u' {0 G; m/ n! Q7 r6 q: P
TableLayout的共有XML屬性繼承自：Component。

TableLayout的自有XML屬性見(jiàn)下表：
2 P1 h* e" y+ ^' B( H- M
0 l1 i# w) M, ?! G9 _$ j; X( K  @
                       
                        屬性名稱
' P* A! p) s0 y" Y7 f, g5 b0 D6 b                       
  h* J8 b% `, _3 d                       
                        中文描述
                       
, T# Q7 _2 F: i* ~                       
                        取值
                       
                       
                        取值說(shuō)明
, M, R; o' Y* T$ F' G9 \                       
                       
                        使用案例
# G4 q- x1 u7 S* S5 o                       
6 s, i! d4 N1 q0 e0 U  F               
* h# m: A, h6 g  j; D       
       
               
                       
                        alignment_type
! v% \0 D, d# N) Q3 T                       
                       
                        對(duì)齊方式
                       
                       
                        align_edges
4 u# q( _& C& v$ }% i- X; a                       
                       
                        表示TableLayout內(nèi)的組件按邊界對(duì)齊。
                       
2 g# {, J. |( y% O9 U6 ]* D" \$ I0 p                       
- M6 D% H9 L' l$ C" O; }                        ohos:alignment_type="align_edges"
                       
1 j/ D2 L1 U7 D0 \. q               
# V" l+ ?8 o/ {  d               
                       
                        align_contents
                       
                       
                        表示TableLayout內(nèi)的組件按邊距對(duì)齊。
- ~$ r8 B& P8 J6 ?- Y: u                       
                       
% W1 |/ \( k: U( x$ S                        ohos:alignment_type="align_contents"
                       
               
               
                       
                        column_count
: q1 P8 ~  p# x9 z+ z9 d* L                       
                       
                        列數(shù)
                       
                       
3 E/ a# Z7 C' A  t$ f+ Y                        integer類型
                       
                       
                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
                       
, f4 M' y1 X- n                       
                        ohos:column_count="3"

                        ohos:column_count="$integer:count"
                       
               
               
& E2 M3 g- {  p* j                       
                        row_count
3 ]& S4 H" C# ?7 B' O                       
* c# n) v' d8 X                       
                        行數(shù)
                       
                       
  X" ^5 S7 b* P# v                        integer類型
. W( S# ?* l( ^+ a6 I4 E$ c                       
                       
  l) `3 B$ J& P7 q9 k' ?4 `# N                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
* l6 j* |" D- I                       
' \. }/ \& e& }* P9 O" A                       
& [- m6 {) B7 D' l; f/ r                        ohos:row_count="2"
) `/ V4 y4 d0 e9 R5 g) T% J. q
                        ohos:row_count="$integer:count"
7 e" T& ]$ f2 E                       
. d" _( v2 {9 h. |) j  t               
4 i1 N1 y- z3 `% k7 }" ~               
                       
                        orientation
6 O) C' M; u, f! l. w6 f2 ~                       
3 e1 Q  J5 C6 \; m  h. G                       
8 ~$ Y' B% h. R3 ~3 |( o- g                        排列方向
                       
# A* p% \+ H9 ~" U9 ]                       
                        horizontal
                       
                       
                        表示水平方向布局。
! N1 H8 T9 Y* p# Z  `3 l) F                       
3 ~, a  T% o" V% W$ g+ F& A                       
- C0 u3 X0 T! P) `                        ohos:orientation="horizontal"
7 L* S: H- D( G7 K- C) m                       
               
               
                       
9 m' E0 K2 B  i5 h' @9 p4 l" L- M# f                        vertical
                       
" O- A* E: ^* }7 x" \3 A2 h  v+ x                       
                        表示垂直方向布局。
                       
                       
                        ohos:orientation="vertical"
3 L2 ~3 s3 Z5 E: d                       
               
在XML中創(chuàng)建TableLayout，示例代碼如下：
, h* i+ }* e( `- _  I7 T. P' x

[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
: X7 U5 c& W( m- k( U在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布局中添加子組件。

0 d: I$ R: D. E* d

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"/>
, b) [* O. h, y    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"/>
. ^7 X- g" n9 `* i8 Q% t    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]
; e5 f  V, A: l9 O0 k6 ZTableLayout默認(rèn)一列多行。
1 ^/ P. }2 ?( d3 ]


設(shè)置行列數(shù)：

  a  T9 S% l; `7 K, a1 f

...    ohos:row_count="2"    ohos:column_count="2">
設(shè)置TableLayout的行為2，列為2效果。

4 X1 d3 g' N# y

在XML中設(shè)置布局排列方向，以“vertical”為例：
' h) M7 m% e  D: L
9 t* F& k7 k8 ~4 a+ v# B

...    ohos:orientation="vertical">    ...
設(shè)置布局排列方向?yàn)椤皏ertical”的效果。
/ g5 L8 i3 A0 |# ^


TableLayout提供兩種對(duì)齊方式，邊距對(duì)齊“align_contents”、邊界對(duì)齊“align_edges”，默認(rèn)為邊距對(duì)齊“align_contents”。代碼如下：
' q8 z: u, J- t$ l3 V. {

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">
2 O% @! f3 M2 s5 S# Q- [7 I! m    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"/>
9 @7 ?% l* \- q9 X+ D- h3 O    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"/>
  e' n/ w% ?3 A4 H; g; P: Y    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"/>
& \9 b. n; l! z& v  |3 b7 d% l2 G    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"/>
0 M* A; @  g: W8 K! J' d    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"/>
( S: H& b" @- J0 v) p3 H% @邊距對(duì)齊效果：


2 N% Z1 b# f5 @( w8 ^6 M
將TableLayout的對(duì)齊方式修改為邊界對(duì)齊。
% S- e+ F* ^) U+ q+ `6 U0 r3 g

...    ohos:alignment_type="align_edges">    ...
9 q  \  m9 o! r. r" u, E邊界對(duì)齊效果：
) k' I: w! U, E# }. `
2 v2 U' y6 v1 r  [/ b2 a
9 J$ D, f, \; x( v# U+ t
- B; K# b' k, P( B, b2 @: q引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：

"http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
+ p: a! O5 H- z, \5 e2 w
TableLayout合并單元格的效果可以通過(guò)設(shè)置子組件的行列屬性來(lái)實(shí)現(xiàn)。

設(shè)置子組件的行列屬性均為2的效果展示：



  @6 N) t& V  @) n+ F5 _在XML中創(chuàng)建TableLayout，并添加子組件，代碼如下：

* ]  j. `9 f* g  K2 o) H( `

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">
, h; a$ J+ k9 H# W1 Z    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"/>
* r  ]! p2 v: o2 w0 H% L    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"/>
% r) k! r* _/ n& D  J+ J, _% C    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"/>
" ?3 O& P) ^& ~. A2 i& g    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"/>
) K4 ?; ~0 v# d: r' w  ?1 u    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代碼中設(shè)置子組件的行列屬性，代碼如下：

@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());    }
/ i0 W! Q: C$ h. R# C/ E在設(shè)置子組件的行列屬性時(shí)，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。

# i# R0 ^4 U1 J/ m; L/ e; [目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。
在創(chuàng)建子組件的行列屬性時(shí)，還可設(shè)置子組件的對(duì)齊方式，修改上述Java代碼如下：
; p9 X% d" z0 w
4 z6 R. m8 W+ K0 i" O4 @' l9 @

@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);        ...    }
+ s8 m! c# h/ ~, s; N子組件的對(duì)齊方式設(shè)置為ALIGNMENT_FILL的效果：

& w8 _4 y- U' H3 v. K9 _/ ~) {

6 Y, d  M, b3 \設(shè)置子組件的權(quán)重，代碼如下：
! b' y3 B- @5 h- M
4 `6 F  T+ \6 C- F9 a# t- r% B. x

@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);
" h; m2 @+ w+ ]! Q2 r/ E; Q0 t        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);    }
上述代碼將子組件的寬度權(quán)重設(shè)置為1.0，每行子組件會(huì)均分TableLayout的寬度，所以需要設(shè)置TableLayout為固定寬度或match_parent。
8 |6 u9 }0 u( Q$ S( u
! y5 P" T4 p% I) {

ohos:width="match_parent"    ...>
3 i; b7 M5 l+ k0 F, N5 d  i' ^7 |, P    ohos:id="$+id:text_one"        .../>
6 P5 _7 n% V3 E, b3 B3 y: b    ohos:id="$+id:text_two"        .../>
& B8 n! r4 G! H: o( n7 `    ohos:id="$+id:text_three"        .../>
    ohos:id="$+id:text_four"        .../>
, Q8 `# r4 }) X! m    ohos:id="$+id:text_five"        .../>
% h6 a# _# h1 |) r+ m. x    ohos:id="$+id:text_six"        .../>[table]
/ e: Y! \- S5 n, K; i6 S' a: \將子組件的寬度權(quán)重設(shè)置為1.0的效果展示：

7 T3 K9 y" F- U/ ~

5 C" u' j4 W4 q
7 o2 B1 r+ P, \# y4 [
( o" A5 ?% Y0 W往期推薦基于Mobile SDK V5版固件開(kāi)發(fā)大疆無(wú)人機(jī)手機(jī)端遙控器（5）
$ C! y) E! p9 K# y' O2 g$ y一種高速ADC和DAC轉(zhuǎn)換電路分享
% J+ U' p2 }$ D" N& Y5 @; W  R# y3 N一文搞懂CAN和CAN FD總線協(xié)議
- y5 `  W) Y. ^LabVIEW和Arduino的巧妙結(jié)合（基礎(chǔ)篇—1）
) C! E. g/ v" H: p; u: O, x: xLabVIEW設(shè)計(jì)自定義滾動(dòng)條


5 c8 u; G  s; J3 p) H3 b
! K8 e1 T7 \% s0 F" c: ~- L& ^' E
點(diǎn)擊閱讀原文，更精彩~