電子產(chǎn)業(yè)一站式賦能平臺(tái)

PCB聯(lián)盟網(wǎng)

搜索
查看： 60|回復(fù)： 0
收起左側(cè)

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

[復(fù)制鏈接]

660

主題

660

帖子

4567

積分

四級(jí)會(huì)員

Rank: 4

積分
4567
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2023-8-9 12:00:00 | 只看該作者 |只看大圖 回帖獎(jiǎng)勵(lì) |倒序?yàn)g覽 |閱讀模式
: [- V  z( W# k' L- x6 m
點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
  A9 n  E3 z! L& m5 OTablelayout使用表格的方式劃分子組件。
; n4 Q- r/ t/ m" v8 e( O# {2 u; K3 [6 X+ i! ]9 v& e' g2 O7 B
. H" }, n2 R9 e

1 Q/ k3 c- n" b1 vTableLayout的共有XML屬性繼承自：Component。
7 M4 u7 s' j3 z5 r. w+ K9 m6 \- z
0 D3 d) x5 `( f9 c( C  kTableLayout的自有XML屬性見下表：' t/ Q8 E+ N' j* C6 M( z

2 g; f2 }4 s- v( R( T9 `9 v5 _5 j5 H1 r1 Q3 g5 @& t
                        6 S& x% V& ]5 Q5 W/ M
                        屬性名稱
( \/ |- y% @) t0 Y                        ! w6 P. X2 ~/ I) Z
                       
0 u! V3 K- F: [) ]5 e% p- R                        中文描述
" t& Z; M8 k  z2 s                        ' J2 [! |5 T% ]! Q; L
                       
  q: ?( u1 |. R, n2 f                        取值
  j0 o: d9 x5 {6 X                        + f& e  @# n. c
                       
7 J$ q0 T( G) [8 g* P                        取值說明
; G' }2 g: Q. O1 T+ ?                       
  f% D5 n5 G7 T2 m% b0 E                        % i# y* L+ L0 ~3 L  A, A% {' Q6 j" [
                        使用案例
7 ^# L- Y. x9 D& p/ c9 h& k  x                       
7 h  I3 C6 m7 y0 U" ]               
6 ^3 A. M% ]5 g          C- S2 t. Q" k7 n
       
9 a. O, x8 [( M' T               
3 w$ p7 v5 O& s, x! P                        ' b& \2 `& c) ~- }0 v
                        alignment_type( ^" W6 P) \+ i+ H, J
                        + O# Y* C  v$ f
                       
! U8 j2 O& g( u0 g! ^1 I1 _                        對(duì)齊方式
) H5 L1 v$ C1 b: i2 w                       
7 _" Q6 ?+ k, F! J5 V) ?                        3 ]; ~- N5 s2 s  p* V' p% a
                        align_edges7 F3 e* |- O7 m6 f) @+ }
                        $ G8 P5 o9 ]& L/ v1 Q( D# \5 L
                        6 t3 c2 @, ?5 C3 X& H
                        表示TableLayout內(nèi)的組件按邊界對(duì)齊。+ a  P7 s/ L( e! `
                       
; s1 j( D5 Z7 Z                       
/ }3 m' \2 a4 {4 J. w                        ohos:alignment_type="align_edges"3 a3 f" o( j( z% ?
                        ! B' V0 G  f1 d7 `1 Z
               
' q- K6 N: \# H$ W7 a' E               
, m0 q$ ~+ ]# S; A% A: e$ {                        2 i) G" q' c: k9 x0 q3 ~
                        align_contents" S( ~- }5 q- O+ m# D
                       
" z0 z2 K" V3 z: Q                        ; K; y7 `# ^3 u) R$ @
                        表示TableLayout內(nèi)的組件按邊距對(duì)齊。! s% }- F3 D% d1 N
                        4 R; B6 C7 ^7 v, S' Z6 l, }& s
                       
5 J# V; o( \! q3 ~: }5 g                        ohos:alignment_type="align_contents", `! a' @, Y& q% l5 `  w
                        ; k0 E2 q* u$ b; C1 b
                " x5 l$ {% D1 ~
               
! c$ Y+ u8 G, o5 r5 A, e  ~                       
! W$ c& i' C4 O                        column_count* p" J' C+ a$ l
                        " j1 C) |* f' O2 K
                        ) N) N3 C1 t% R6 o. h
                        列數(shù)
2 n! a" u+ G3 i# m: Z- M; _                       
9 K0 f; w% M) h                       
1 s- H4 L; J6 V                        integer類型7 J* _" i' r- Q+ J6 B
                       
1 ^: u! q6 S$ r9 Z' W: j* R                       
, ~( y  h. S7 }. V9 O& H/ M5 n                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。, u4 u9 L/ w* `- B6 N+ Q
                        5 g4 L6 K$ ^. W; P
                       
( }- ]  Z# m# m, |+ K5 B9 i                        ohos:column_count="3"
7 |( P9 z" I. W5 Z, e0 C, a
% t) f) u- L7 x8 u# F+ v/ F                        ohos:column_count="$integer:count"
% Q: G! @" q1 \2 U- [                       
8 `" O4 \& Z! ^4 l) g8 C% f6 x                ! p( ?$ A' G3 f$ q0 q/ l
                4 ^' x, A. I4 u; n. F" L' Q9 X
                        1 h3 m; t: W$ |) i
                        row_count5 P5 e( f6 S7 g3 [/ a/ K3 H% n
                       
7 o) u! B7 N" Z1 _( l& D                        * s/ d$ a* u3 r6 G
                        行數(shù)6 M& I' |: R* U
                       
$ x/ }) @# F, J2 ^. P                       
- w' H& b$ k; `                        integer類型
, f1 |& a3 K% h9 u                        ; Z# Y2 ]. Z! G/ o& `& _
                       
! o4 ^, |0 G( x                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
& G* P4 V7 z: r- l( _2 h( }                        " y' K! P& O& @, U3 y# K
                       
& Z! R' |' d3 d9 m                        ohos:row_count="2"
% |% g( d9 S9 K6 o) s5 f4 O2 a& K9 b! [0 ]' @2 O" D* S8 w: I
                        ohos:row_count="$integer:count"
$ d/ u/ ~9 t' v+ t( J8 E                       
3 H, W7 S) }% x  B               
" {5 e4 y$ W2 W1 [               
3 @7 c8 P$ M, Z" [                        , P0 h3 n. s% F: c
                        orientation
3 o  q7 @1 m; r# z0 A9 S8 Y+ _                       
) l5 s0 O8 V6 `                       
* F+ o- b4 g' O                        排列方向# n8 c( X6 t: p- U" G
                        4 U8 u  ~$ |! g) Y
                        : x8 w; m" Y* B  i9 X6 D
                        horizontal
0 |& }2 [5 [0 B4 d3 o                        ) x- w& Z# `( m# D
                        + i" [/ J) n* W+ Q# C: T
                        表示水平方向布局。
- r! `% q: a) u, O% P/ j                        , p. a  k6 b& g8 W3 y" ]) I
                        # U( x) m; }. a* J
                        ohos:orientation="horizontal"
7 v* z) ^$ [$ C- U6 O% Z                       
7 ]1 q6 @3 ]* O" P8 I; v               
; S( M; U# ~4 K6 W  k' W; G, f  b                / V* }% ^" h( H% e
                       
( X; C1 e& V, g. Z/ l                        vertical( T' y1 T  J' U. U; r3 o( E/ f
                        1 d4 H4 K- _% X: r% o6 ?, e
                        - r2 W( A/ o7 C7 ~8 e, d- b; x0 ?
                        表示垂直方向布局。
! F/ w! w1 H! _/ k( q2 p                       
* {0 G" c! r# T0 x2 J& W                        : r, ^1 G4 E/ {: S9 d, G1 [
                        ohos:orientation="vertical"
* [! H1 |  Q  {                       
8 b# Y/ O& Q6 e5 I8 X& w                ' h; X, A8 H$ P' f5 m2 a. X; z4 L
在XML中創(chuàng)建TableLayout，示例代碼如下：
: \) l4 S9 f) A# e3 u1 a2 [* N
  • [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" c0 J1 U3 ?9 B. j2 ?
    在graphic文件夾下創(chuàng)建Text的背景table_text_bg_element.xml，示例代碼如下：) U$ {# M; ?# j
  • "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" ' g1 z0 x7 n# ^+ O
    在TableLayout布局中添加子組件。
    1 n) C7 M/ n1 H& G( G& R. D4 g
    7 ]1 w  Y6 G: |; W3 m1 W  {
  • 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"/>
    ( `. t! o- X" y: _+ I! }, l    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"/>2 M" M: [& Z) O$ ~3 K& {; @+ v
        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"/>/ Y6 c" G+ M- I5 C) F
        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]
    ) [" j: L! O) ~& zTableLayout默認(rèn)一列多行。
    2 {( ^& l( g1 D$ P# C! {9 h7 @# N# h: H
    8 l' R3 s. ~; y) v5 a

    # E3 f+ J$ I4 N! f* F, {設(shè)置行列數(shù)：
    ' i' N  o2 h& d7 _+ T! S5 |1 l$ i3 ]4 u. G, y
  • ...    ohos:row_count="2"    ohos:column_count="2">
    3 ]* R2 v8 A' U5 }, f2 L+ _( ]設(shè)置TableLayout的行為2，列為2效果。
    1 ]9 R! M' k, ]9 ~$ L; f3 `1 e* C  V+ i, s0 x2 ^! {
    . T5 z; [: T! H1 I0 q$ A1 u, Q
      g* n2 V& E" T  R
    在XML中設(shè)置布局排列方向，以“vertical”為例：; ?! R' a; g6 h
    2 E3 u( I: X' _  v
  • ...    ohos:orientation="vertical">    ...' f' r  f0 C5 n
    設(shè)置布局排列方向?yàn)椤皏ertical”的效果。6 |4 h0 O. w/ r

    0 b0 O! [. N2 K/ l6 }. G- c
    $ c5 n* y3 s& t
    . t) Z) k1 d% d. v; k9 \9 g3 kTableLayout提供兩種對(duì)齊方式，邊距對(duì)齊“align_contents”、邊界對(duì)齊“align_edges”，默認(rèn)為邊距對(duì)齊“align_contents”。代碼如下：
    2 x0 U  r* J8 D7 D( `9 \; m/ S  h" ^- ]8 @8 Q+ o
  • 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">
    . B  K) N$ V3 Q    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"/>
    . P8 q* `1 V" Z    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"/>
    ) K2 T. v" F* s& ~    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"/>
    * f# w# J% N  Z4 x4 R" f7 R    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"/>
      z" x4 g) ]! q$ Y8 ~% w    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"/>
    : ~! ?1 g7 V. x* H! Y; o" M+ ~    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"/>
    4 ^' ^: _5 ~& {7 ?5 {" X  H: R邊距對(duì)齊效果：; D; z6 J7 h: b' O5 s; O8 ~. ~

    ( ]9 l/ J7 g) j3 ? ) J, w4 N9 t; q3 s3 G

    ) x4 P0 Q. e$ F, i" F& }1 c將TableLayout的對(duì)齊方式修改為邊界對(duì)齊。
    6 R, ?! B% l+ g+ B4 e/ B- q2 x: z4 S8 q( e. n2 N
  • ...    ohos:alignment_type="align_edges">    ...
    5 X5 ~9 W5 o1 f邊界對(duì)齊效果：' O3 w9 u+ T" A0 ]4 A1 E

    & i' G* O% d# z* j
    # i. f& i" {  g5 [+ [4 N- ^' l
    ) F. L1 ^& a2 }% b引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：
    / R' j5 h$ \( L0 U6 T5 I  I6 ?
    ( t& i6 e; _- B2 x+ ?8 e# _7 j
  • "http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
    * [* v6 i/ G" r$ `1 e, s. M8 y5 U/ f+ o- e9 @
    TableLayout合并單元格的效果可以通過設(shè)置子組件的行列屬性來實(shí)現(xiàn)。& i* J, O7 q; O: o
    1 q6 `9 e2 A8 P2 _
    設(shè)置子組件的行列屬性均為2的效果展示：( q9 s  v6 g) _' p& f5 T
    * ^& I3 g* `+ o
    + n* x' j4 y) M

    : U/ ?0 R5 f1 D9 ?$ {在XML中創(chuàng)建TableLayout，并添加子組件，代碼如下：* \3 w+ N' W' L% l1 y' X* F
    ' l( M+ \5 W& k, q4 A
  • 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">
      r# Z9 Y, S$ @9 k* z8 D    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"/>$ n$ \+ ?3 A2 p  \% m; \
        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 M; _8 O% V+ y
        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"/>- }8 O0 Z4 E" O) @+ W, v
        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"/>7 G) K+ [+ a/ f' k1 a" I
        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"/>
    " Q& `: L- ?) w7 b$ ?$ Y    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"/>$ I' H+ a8 D/ {  c% B" @
    在Java代碼中設(shè)置子組件的行列屬性，代碼如下：
    8 C( k. N) F2 r) d2 [, B) u& w6 H7 T; \4 x2 E0 I- f
  • @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);    }
    , {  U: ~2 ^3 v6 i$ O    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }) o( d/ @, p/ M) J6 c. j7 o
    在設(shè)置子組件的行列屬性時(shí)，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。
    2 q* z  b1 T* i* u1 e6 Q9 l
    # i5 r  G; @: `3 m+ J0 t# W9 I8 G* w目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。' z7 L: F5 @  {, D
    在創(chuàng)建子組件的行列屬性時(shí)，還可設(shè)置子組件的對(duì)齊方式，修改上述Java代碼如下：- \8 j" j* A4 \$ Q* C0 W( `8 }: G
    ( Q/ }8 l* }( \, n' h
  • @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);        ...    }& W0 P$ f8 T. U* g* o' Z
    子組件的對(duì)齊方式設(shè)置為ALIGNMENT_FILL的效果：% m, p+ _: b/ s& h
    # G, S+ y/ k1 W( N0 r
    9 @; O/ h3 J' K- M
    6 F" _! q7 u1 m' F0 \! N
    設(shè)置子組件的權(quán)重，代碼如下：6 D4 W- |5 {5 g4 D. U
    - q) }' S6 T/ V: l# i1 |& 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);
    : s) M2 J) e" d6 |        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);    }# b' i7 I/ T! F4 M3 `. D
    上述代碼將子組件的寬度權(quán)重設(shè)置為1.0，每行子組件會(huì)均分TableLayout的寬度，所以需要設(shè)置TableLayout為固定寬度或match_parent。
    6 l" }+ k. U8 p5 U+ I: c9 C% ?
    0 B( v# K1 B5 E: Q, H
  • ohos:width="match_parent"    ...>
      F; G9 g! C) a% L2 R8 n! s    ohos:id="$+id:text_one"        .../>2 o/ e& j4 s0 {3 _5 {% O
        ohos:id="$+id:text_two"        .../>
    7 J6 b# g) y9 I: B$ ?    ohos:id="$+id:text_three"        .../>
    5 L+ \  S5 Q3 Q( {8 h5 a    ohos:id="$+id:text_four"        .../>
    ( |$ w9 t, P+ p* Q( G. i    ohos:id="$+id:text_five"        .../>
    8 ?" Z, I) W) r0 A    ohos:id="$+id:text_six"        .../>[table]
    , ^0 }/ [4 a  `: e& Q$ s0 e將子組件的寬度權(quán)重設(shè)置為1.0的效果展示：0 y" Y$ I. D& a  _( e
    . d1 F  a$ e* G: f# L5 v# Z" t; Y# I

    : c$ d: S( p  x4 d
    . q' K- b! R: N
    % I- F- E. y1 Q# s' D
    # Q, K$ ?- T9 v' s# ~往期推薦基于Mobile SDK V5版固件開發(fā)大疆無人機(jī)手機(jī)端遙控器（5）
    - x7 E9 G# d/ Y一種高速ADC和DAC轉(zhuǎn)換電路分享. D" Y, p2 `* `2 G2 A* l  m6 Y
    一文搞懂CAN和CAN FD總線協(xié)議, [& B  K. O8 Q  o4 ?; b4 R
    LabVIEW和Arduino的巧妙結(jié)合（基礎(chǔ)篇—1）
    1 h/ Z  P0 }$ E, {! bLabVIEW設(shè)計(jì)自定義滾動(dòng)條
    ' K$ B$ [% R% z! L6 S5 M( P
      L3 A! f9 a9 J0 y3 O+ {
    ! l$ V/ A& L( Q3 J. o* z2 x
    ) g$ r3 i; X2 b4 v5 Q" v4 R& P
      q* F  ]0 w- V點(diǎn)擊閱讀原文，更精彩~

    • 發(fā)表回復(fù)

    本版積分規(guī)則


    聯(lián)系客服 關(guān)注微信 下載APP 返回頂部 返回列表