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

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

搜索
查看： 55|回復(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覽 |閱讀模式

9 w2 L7 m  M3 q2 v4 x點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
/ L1 g% X5 v/ h8 cTablelayout使用表格的方式劃分子組件。8 w2 v. H  ~" D$ F, I4 z
- O% e4 V7 V, O% J+ U% Q* B6 P- ?- l% m

/ t# L( |+ l" u+ N7 s  |9 o. O  \, [- z2 S& u/ A# R" {' t1 j: v
TableLayout的共有XML屬性繼承自：Component。
* Y" o4 }  @" m& I0 T3 d1 p  j# [# }+ y' Q! \( D
TableLayout的自有XML屬性見(jiàn)下表：0 k+ `& |: @. |

: J% }. }. ~- f* B) l1 n) N" @" ?* {
                       
6 K, y( T8 W: A, S* t5 n                        屬性名稱9 b  N9 o/ W  ~
                        ! U( ^) m; i3 h! D; M
                       
3 L' l, l# V6 P- g5 P  V                        中文描述
6 v$ [+ g! C& f0 f" y1 g$ E                        6 k6 C6 N  E) N$ ]+ X0 e
                        6 `8 i9 ?2 Y2 w9 q$ N4 W0 @' N
                        取值0 w9 ?" |$ i! S* a) T+ t
                        / o& y' W- p; |) e2 ]  h" d: e
                        # ^' t' @+ f9 @# t3 }
                        取值說(shuō)明) F6 X5 o8 A; d- C; s
                       
# a+ Z6 O: I6 l4 m                        9 D) j+ k7 ]0 ~+ o  H+ }. f" ]! W
                        使用案例7 e$ B+ K, u  ]# Y, t0 ?! _; x" K
                       
9 f5 Q, ?( P+ |$ B' R3 F               
* Y3 s" K1 \4 J; E9 i        " h! P0 z- f4 D* O4 }& g
       
7 L2 v( L/ t% p6 n. G0 e& k; A# V                ; n. @5 i% F' ]* ^* b0 X
                       
- _  G* M: B5 D+ r0 j) y! j/ y                        alignment_type0 f+ g6 _; H2 x0 N
                       
  j* w7 X5 J; g. V                       
: g: M' L# b' c$ b* {7 l/ v$ h                        對(duì)齊方式7 P& ?  c) b+ n9 }# ?: d( t
                        3 G4 H3 R* }; x0 \1 k
                        ; k+ V& b/ p5 v3 y
                        align_edges, {* e) ?1 r6 H$ p& u5 ?
                       
' L* @! [& z# X' }: ]# a$ f                       
% f2 f( O* i$ ?4 ?- b1 W                        表示TableLayout內(nèi)的組件按邊界對(duì)齊。2 W, v8 e( B! E: d' C
                       
- K! p4 p0 r$ R0 k                       
3 |# b% c# i/ g                        ohos:alignment_type="align_edges"
" V1 C# P; k* Q% Z% s; J                       
6 S. G1 K# m! l               
2 E  `; s$ x% L& i) }0 @5 I5 A                3 p- b9 ]! ]% d' k1 d
                       
* E% R4 i0 m5 \                        align_contents1 ?4 E5 C  o" ^; ?, q& |
                       
, m0 W- J% @# D0 }                        $ t' x3 G* ^4 y( Y
                        表示TableLayout內(nèi)的組件按邊距對(duì)齊。
7 J# `# M) M  f( N* D# q+ Z* W% L2 d! Z                        / A' n" J  P0 O4 k  ?
                       
  {# _1 Q  L$ M- R  J  s                        ohos:alignment_type="align_contents"
5 L! i4 @( E9 n2 D9 H' E7 G) h                       
4 `% u. K4 k! g               
$ q3 s2 n* [, B* q7 Q               
; {5 |  D; a' F6 ~  r! f7 O0 [& c1 X                        8 E2 O, N5 P& @  G( K$ o6 W9 o
                        column_count
5 b$ e  D- t3 K7 [9 v* v                       
5 V1 ?1 @  |- r4 X! ~$ w% M                       
7 p$ r- [3 p$ U% y" U' S' |                        列數(shù)
) ~4 ?7 Q$ ~0 ?! Y) {' H                       
4 v6 q8 |+ ?9 u7 e9 _, C7 M3 L' ~                        * f# W; x% s7 c4 K$ x  h
                        integer類型
+ Q- a9 m2 y" R7 l# r                        / p, k0 J4 q4 J
                       
" Z3 r' w% T7 w7 X, q) H6 Z                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
$ N& v7 n& R  `, f3 ~$ D3 l! s                       
0 D5 Q; w4 l& ?& J- A8 m* C8 r                       
' W9 z* \. v' n1 R- c8 X' l* z                        ohos:column_count="3"
; i" q. m5 R% ]% l0 D. H# x
9 v) ^7 B& r: l( @# g+ ^                        ohos:column_count="$integer:count"0 i4 S$ m0 H. g" [: c
                        & X2 Q$ A/ r6 ?# _
                % c6 a) m- x! w; P5 m/ N: \2 o
               
( ?, {- S# L; r7 g  q, }                        " N5 _2 N8 Y# }+ w7 K( }
                        row_count
6 r- X8 J  `8 O8 w$ U3 h+ |1 J                        4 P, n0 ?( `  H1 X+ I7 h- a
                       
7 P" i: ~3 `5 b! @& g% t                        行數(shù)& g% Q5 m; z) \, T
                        3 N; T: _0 W" _8 U
                       
6 X% J' E+ J" s6 S; S" b6 }, t0 N                        integer類型1 t  {& G# X0 _9 T8 m
                       
/ Q$ m- ^% u8 w# m. a                       
' I) j$ j8 ^! r& @- B1 U* J7 v! f                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
3 {$ h8 g  }/ i6 F; U                        3 {8 R9 C7 l1 L$ m% x7 a
                       
( q9 P6 X  l( _3 D# \                        ohos:row_count="2"0 ~" p& s' ]: U& z7 I

% q( e. C" D  e* O. o. v                        ohos:row_count="$integer:count"
7 A  F7 G6 U' U' b2 L) \1 _, N4 n                       
. v( @3 N4 [4 R8 ]6 G& ]                1 A2 G  k8 E+ S. K: ^0 m
                4 B9 }3 B% G, g: T/ r
                        " E# L% G" X  G* h+ r  s% Y( A  P, x
                        orientation& j4 G. y( R/ s1 [  L
                       
2 L8 r5 S/ J5 D                        ( f: v6 r) |9 o3 D9 U6 Y
                        排列方向; v/ i, m% [! h  K, _" Z; i6 `
                        4 t8 x  D9 {7 o
                        ; W3 _5 @5 n$ I% }* O5 d! q
                        horizontal( q) Q+ L( f7 C4 y# `
                       
: e; p5 n, F8 J# x  y6 j                       
  g& h1 R4 I- P0 [8 l' Z3 t( U                        表示水平方向布局。& L9 y7 j/ I+ G2 @+ S
                        1 l) y0 ~( n; M1 F/ m
                       
8 w# X# w' _' s0 R0 N                        ohos:orientation="horizontal"
  Q4 G5 I* {+ I/ D/ v# t' T                        ) d% j/ p8 F7 V& S' h* y
               
  J! O% I8 F" U! y* E! i                + P+ j3 R9 }2 z9 ^
                        3 m( O3 `8 p$ G6 i  V: D
                        vertical
7 r! M1 w, O! ^5 d8 O                        ! }8 A5 r5 p! z+ [! T) w
                        $ O7 w% r9 t2 c
                        表示垂直方向布局。) A5 ?! m% K7 J) D- G" E+ I
                        % s7 f  \9 W7 c! e' R3 ~- C
                       
  P8 u; W8 f5 V0 P) I; R  t  M                        ohos:orientation="vertical"
! Q7 g% k0 C& ?! c                        7 `; _# J* D1 j/ w9 i
               
: X$ v7 t) v+ H4 I在XML中創(chuàng)建TableLayout，示例代碼如下：
5 N# w9 q# s/ H* R+ H. q8 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
    + a/ y5 p3 \4 ^  V+ f8 ^在graphic文件夾下創(chuàng)建Text的背景table_text_bg_element.xml，示例代碼如下：
    4 Y7 ]: v( o0 c8 d% R% f: ~
  • "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"
    ) J! r6 i5 |# o# U; H+ I) {在TableLayout布局中添加子組件。) I+ N$ K$ [$ X
    2 K7 Z1 E2 A  Z  m
  • 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"/>, d$ d8 r0 m* g- K$ ]2 h
        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"/>
    ) A! n0 S: t$ h+ @* r' k0 u$ r    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"/># a! f  E' G/ P! _, H6 N% D
        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]$ Q% d3 k8 E5 u+ t1 e# v7 W) A
    TableLayout默認(rèn)一列多行。
    2 K% \- y0 E6 O+ c) Y
    1 s: I* v+ v/ T& d. r
    / ^$ m7 G5 q% {: a' o" O! `
    8 x- i8 B: }& a3 g* ~/ K+ U5 g設(shè)置行列數(shù)：( _, ]0 L/ P- g, Z6 n
    % @$ u6 X! _2 Z# ~3 A% j5 \5 m% _
  • ...    ohos:row_count="2"    ohos:column_count="2">+ i& ]6 u% `8 }
    設(shè)置TableLayout的行為2，列為2效果。
    ' o; [3 W( \/ Y, X4 G
    , M( ]' G5 n( \7 x* Q" o# z- ] 4 D4 D$ ?5 S- y9 M% G

    , J, c. K: B! p) i6 q  ?7 J: f在XML中設(shè)置布局排列方向，以“vertical”為例：- w( a0 Z3 E  b; ~7 I! Z/ {
    : n' I0 x/ e( o+ R3 e! x  P
  • ...    ohos:orientation="vertical">    ...
    4 m8 Q( o0 E0 t* L設(shè)置布局排列方向?yàn)椤皏ertical”的效果。5 ~% D0 t4 ~- i' q% N+ y

    . N" M2 e+ ]! R) i' t" w2 w , ]  Y2 v1 `5 t+ C1 s3 g/ F
    5 p% u8 ]1 O9 F  |7 J( x
    TableLayout提供兩種對(duì)齊方式，邊距對(duì)齊“align_contents”、邊界對(duì)齊“align_edges”，默認(rèn)為邊距對(duì)齊“align_contents”。代碼如下：
    2 C9 {. c% Q* X- P6 `8 \+ d& g" g7 c. l' m4 C! O  ~- [4 \+ y  _
  • 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">
    & f) `; i* w! @9 J4 h    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"/>
    % K2 @: b% Q  a4 D2 b/ k; F3 N    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"/>1 d# z) s: u/ n$ ]6 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"/>
    " L# e: ]  F' Y! N    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"/>3 U5 v, l4 a, w, L7 |
        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"/># E% A' Q' U- w! f$ s
        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"/>7 ?% G! }. ^# [/ o2 a
    邊距對(duì)齊效果：0 }; Y$ X% C& E# ~* s

    ; S3 I+ V/ j; r% s1 ] ) y/ Y# r( @- ]. W  E: N. @% D
      b# i: S- \. r% m3 X
    將TableLayout的對(duì)齊方式修改為邊界對(duì)齊。/ l; C) s) P5 O0 j" j- @- q/ j7 R

    # y- [, _7 d: V9 w6 l
  • ...    ohos:alignment_type="align_edges">    ...
    4 n- [3 @& Y6 C- o% x+ h/ ~9 A邊界對(duì)齊效果：8 \0 q9 R( c0 b( k! G
    & J; u+ u; L0 u
    , k/ N/ T9 y0 R7 g0 X- r8 x6 p6 [
    ' p: o9 N$ T: {( T$ b
    引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：
    ; p2 p  Z2 q0 I* }7 F+ E: z0 K; g  S9 ]0 I4 Y9 X- h
  • "http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
    . S7 R7 ~& T" G% r) G1 p  C! m/ ?' H$ E
    TableLayout合并單元格的效果可以通過(guò)設(shè)置子組件的行列屬性來(lái)實(shí)現(xiàn)。) l% }: g  a  \+ d
    4 Q9 Z& ~) @7 G: O* k+ V; D5 K
    設(shè)置子組件的行列屬性均為2的效果展示：+ N1 A' Z0 ~' p" f0 Q! `" I

    8 P5 t, e7 w* \" ?+ c. `
    1 w  ]* w- n' C4 P% |9 {
    : {7 l0 q2 d4 g6 ^9 ^在XML中創(chuàng)建TableLayout，并添加子組件，代碼如下：
    + x/ D# L# o. [3 ?  |
    ( p( q& S- i- K3 y  r
  • 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">
    : l& ]4 w8 N, {! R6 c' l    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"/>
    & g% L9 e0 C' o. L! U    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"/>
      [# `* P4 T7 }& s3 H0 c# l    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"/>
    / F! Z" @$ ?( n+ ?: F8 g    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 x: E. w8 a; G0 e0 L2 O    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 f+ M8 u& P9 n% W& R) n
        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"/>* e  ~& Q( c$ S: `
    在Java代碼中設(shè)置子組件的行列屬性，代碼如下：9 T9 D/ h$ a6 R/ d

    ( }& d5 r# a. M5 z) P; B- i
  • @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);    }
    & M" Q# ?( F& j2 g/ [. K  {    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }
    : v2 _  s3 ~: P  [+ B在設(shè)置子組件的行列屬性時(shí)，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。# L* {1 f2 L6 R2 |, p

    8 K7 p2 X" B( [7 H3 o' B目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。
    0 Z" `2 B- Z0 i. j在創(chuàng)建子組件的行列屬性時(shí)，還可設(shè)置子組件的對(duì)齊方式，修改上述Java代碼如下：
    ; h0 E, \$ Y. @0 q! h, N
    * `4 F8 t% V3 [7 ?
  • @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);        ...    }
    , l7 E2 g$ A& O- i子組件的對(duì)齊方式設(shè)置為ALIGNMENT_FILL的效果：
    4 `! g2 z' y( R! H/ a; s9 k" K4 M3 `8 p+ [. n5 H9 k- E7 w' g9 u
    ' j7 {/ z, F5 J4 y! L
    $ Y9 n' ?5 \; A7 Q' }0 U& S: }
    設(shè)置子組件的權(quán)重，代碼如下：
    . Q2 x# N( V  s, P# ]0 |; E) c5 V; Q( D2 D. p) ^: P  F
  • @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);0 ^. G: \6 |2 }/ I
            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);    }2 m( k; t, B+ [) x8 y& K: I! p
    上述代碼將子組件的寬度權(quán)重設(shè)置為1.0，每行子組件會(huì)均分TableLayout的寬度，所以需要設(shè)置TableLayout為固定寬度或match_parent。
    & P! z' `& _( a! j/ n6 ~& k
    2 e- P1 r$ M2 Z' C& w0 F
  • ohos:width="match_parent"    ...>
    2 |; w& b- b& D4 e' ^    ohos:id="$+id:text_one"        .../>
    3 Y, ?, N9 f' v. s# v2 V, o    ohos:id="$+id:text_two"        .../>/ y- Z  |0 R2 O5 E% R
        ohos:id="$+id:text_three"        .../>; V$ P* N6 L% E
        ohos:id="$+id:text_four"        .../>5 S+ x6 e* f& u
        ohos:id="$+id:text_five"        .../>9 ~) @& E2 }1 B7 \8 o2 E
        ohos:id="$+id:text_six"        .../>[table]
    4 h: D7 M. n% e0 N將子組件的寬度權(quán)重設(shè)置為1.0的效果展示：- u1 k! s  R3 {
    ; m5 q8 s+ d( u- r* m% S
    ! @! E; T# K0 @2 S( _3 v$ O
    * l" T) w7 F) d3 ?0 @4 q- y

    - K% W4 Z6 R8 ]* m/ `+ q
    2 \- s9 Z7 z0 N6 Y+ q% D0 D往期推薦基于Mobile SDK V5版固件開發(fā)大疆無(wú)人機(jī)手機(jī)端遙控器（5）
    / p) k2 n! j% ^% P: }& v一種高速ADC和DAC轉(zhuǎn)換電路分享
    5 N0 C9 h' T( |8 V一文搞懂CAN和CAN FD總線協(xié)議' |3 ]7 O5 \; |" M4 T, }
    LabVIEW和Arduino的巧妙結(jié)合（基礎(chǔ)篇—1）9 Z/ v; n7 Q, K
    LabVIEW設(shè)計(jì)自定義滾動(dòng)條7 v" U+ Q4 x7 M
    5 }- k3 g1 O" J; l; n% H

    : ]+ O) [+ n# s* `& v" q' {& v% ]# ]3 V  R

    % \( f0 S% V3 u" E. Q6 W點(diǎn)擊閱讀原文，更精彩~

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

    本版積分規(guī)則


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