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

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

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

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

[復(fù)制鏈接]

394

主題

394

帖子

2197

積分

三級會員

Rank: 3Rank: 3

積分
2197
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2023-8-9 12:00:00 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
8 B7 S* E, s  l8 d# [3 I0 O; a
點擊上方藍色字體，關(guān)注我們
. L" T. y8 I: J+ B% `/ ZTablelayout使用表格的方式劃分子組件。1 H. v: |0 n' c9 i8 Y1 p* M
( p4 b% T$ n% b, T3 z3 J0 Y0 {
7 [, k; t7 X# T$ C! s

8 A4 [# i; s5 L& m6 Y: ATableLayout的共有XML屬性繼承自：Component。0 @- z8 S* R0 G& \% ~2 y: T0 x
' |& d7 c* F. K$ T. }1 l
TableLayout的自有XML屬性見下表：& I3 X; s- j. Z% G9 _5 h

$ D4 `7 b( N5 E4 G# `/ T0 {; }0 O0 T
                       
) B' x9 W9 U  r4 E, u                        屬性名稱
: u$ x) l& L" |4 o* K0 j) g* O- j# u                       
( J. A2 B0 a0 Z: s, S, E                       
/ C+ h- k( i* {& L8 m4 Z                        中文描述
2 F" G) h2 n# T6 F" i$ J$ q4 w) O                       
8 W2 U7 j* W- j8 O                       
7 n# \- m# C6 S2 D* I                        取值. M- ?0 X) N9 O! p0 Z
                        0 A' Z/ ^8 o: q2 `  ?' A+ i7 Z
                       
( R& f! U" w' d& S4 b* V! W0 M                        取值說明2 m0 r+ S: i7 n0 E5 s, m
                       
& R, }9 [- s, b  V                       
. j6 D$ U0 @7 g7 ^% H7 d; h! {7 x                        使用案例
0 u+ x( K; H) \                       
7 {$ s3 \7 N4 {% O& W+ M$ E                & L; O' W+ T" h9 C* l7 ?
        8 I, |) [: z+ k* j/ L8 [" H- p9 K3 [
       
  j# R! u; |# u, q% b% G0 G                : A" J( U% j* X  q" K- h
                       
% X3 P7 o1 X( G                        alignment_type
3 M* P( u7 l  b" w& t& e5 ]0 t                        " A6 V+ B& x" k
                       
5 K' ^- C3 u. ?1 G1 p                        對齊方式
- s# ^' I1 v* |& k6 a. _% c                        & ^/ Y6 }. r+ |# ?
                        2 [, P0 n# Q) n: ^+ l+ [4 }
                        align_edges
- V" O3 J3 v9 v+ b                       
" N% w- H& p. l6 L: z( P                        + h' d. y; A: l4 V
                        表示TableLayout內(nèi)的組件按邊界對齊。
  n& e  P7 z. h$ s2 {                        & l2 }% N. k- g4 d/ Y2 n
                        0 p9 j7 }) Z, ]# \: x: L  g% `
                        ohos:alignment_type="align_edges"
! O2 r- ~1 I4 G9 j4 s                       
4 }4 ?3 Q  E7 ^- u- X3 H0 q7 Y/ {               
% Q- h/ g: D3 K! Z0 W; C                1 G0 I. a3 [  Q( ^( n5 `
                        ( x% `# W, K! O$ `) r
                        align_contents
4 B1 O" K$ [% `# _$ @7 D, Z8 H/ @                        4 Z/ B8 M/ D4 j0 P# K$ f9 n, x
                       
& h* \3 a, x8 W( l! T0 B                        表示TableLayout內(nèi)的組件按邊距對齊。4 F# L9 h4 M1 _) w0 [! i, Q+ R  R
                       
. K( s* _: s; o( o$ K; |4 s                       
: D7 P9 z6 T, t1 [, P4 |1 M9 L: Q                        ohos:alignment_type="align_contents"9 P# n) V5 B+ J) ?
                        . g4 D/ N# N/ L! S
               
7 ~$ y* O% T! z6 c+ `1 Z               
3 @. B) r) `$ W9 i; H                        9 U$ k8 X" |' U+ h8 W
                        column_count- D: {, h6 g( Y' }
                        # C8 {3 c' R9 u4 l1 n* w
                        % J( \. ?  g* J' Z3 t4 G
                        列數(shù)* g# l- ~: Q* X# I+ e
                       
- g% O; t3 Y8 _- Y                       
8 ~3 I" L4 f1 I4 {  h& d' U; m& u5 f: n                        integer類型7 M) x/ C& T9 ?2 }7 q: h8 [
                       
3 f! d: A/ n0 k& ?                       
: H! J% l: C: }( M                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。2 D2 v, l) r, t. \% {$ G
                       
+ g. _$ H* ^. ~# ~                          M) R( i5 |9 x% N" k: D
                        ohos:column_count="3"' W/ a! i/ d7 j+ @( }
) G: E/ V+ `3 ]4 m: D
                        ohos:column_count="$integer:count"
" Y5 o0 Q4 B8 x2 s# W4 E3 M6 `                       
1 a  R2 e" E4 w: n* ^7 y" T/ ?  `7 k                / K9 I$ t) T' l) O, i( F; A
               
! D+ J6 q0 C# q4 }2 v$ }) J  r& G& j* U                        ) @6 e% u4 s* A
                        row_count2 o% T/ k5 ]4 V4 L/ C5 t4 E
                       
" C) l( @4 g5 l! c4 y) Y9 S5 K                        2 w  h& L' S$ p
                        行數(shù)
' b9 w, ]5 W; Z                        # G% j( q+ W! j. ~5 P
                        0 n+ _* _3 c2 G7 p, E
                        integer類型4 y! `6 ~3 \- S
                       
9 R" z* {2 [6 t7 F5 F                       
" z4 k% q$ E: J9 p                        可以直接設(shè)置整型數(shù)值，也可以引用integer資源。
+ p8 M# A. X4 {                       
( [- @) L4 U1 y' [8 C1 D                       
: i+ n6 C: ?$ g7 }1 U5 X! r1 L5 {                        ohos:row_count="2". P# N5 B1 ~' W$ P6 C" v7 [

" b5 {* q6 a% R7 F                        ohos:row_count="$integer:count"  S0 s' F) p1 t1 u4 ?
                        ' U) T/ d4 z  J
               
! S) f5 ?$ q8 b5 h8 p6 w                * m# y1 W7 R& I$ S4 k7 b
                        , B0 y$ q& E3 _7 l7 [  _  j
                        orientation" {7 A9 U* b. ?: }
                       
7 s# }- _! W* |                        5 r& q2 C; P& a- d% p
                        排列方向2 U" B& K3 l; z; X5 N( g$ P0 n
                        % Y+ H  U+ v6 ]0 t" F  r. g
                       
' @/ d; T4 B7 Z) @2 `                        horizontal
: Y: P* ?; w3 v! f! E                       
- J  Z+ o1 a( O4 c$ a% c. ~                        9 b3 Z4 ], Q! ?" J% D
                        表示水平方向布局。
. H7 Y0 L, N8 ~0 _                        7 Z: V8 L9 t* A9 m! i; \- e
                        & q( }/ V) W0 d# }/ _( |
                        ohos:orientation="horizontal"
8 s# _# u! `6 W0 `- Z                        " v/ Y' j5 }$ b. H5 m4 G7 |
               
# y7 n6 R; {0 {7 |, X5 b% B; Y1 T               
: C+ p2 e& l, q/ B0 ]* c                        7 N0 o6 a% @& [8 ~
                        vertical
. M8 _7 v& p0 n! s. E                        ! d  A! E' t( f& I4 I; ]0 g; \% _
                        9 s5 m7 Q2 B; k7 A) P3 s
                        表示垂直方向布局。" z( _+ P# k' b" [# {3 Z; l: y# F
                       
! W1 o" @7 D5 c. e                       
5 h  N  [0 M& p) w3 M# x; C                        ohos:orientation="vertical"0 X. e" m! M  }
                       
# z7 p7 E, J4 m; h( G" E0 v% G. a                8 d" i8 t8 @. ?3 p; `5 `. o7 x- |/ U
在XML中創(chuàng)建TableLayout，示例代碼如下：
- H6 p# j  O) u7 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
    + I7 l2 t5 N8 e" F1 U9 l在graphic文件夾下創(chuàng)建Text的背景table_text_bg_element.xml，示例代碼如下：
    * x4 q, n" o' K
  • "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" ' S: g6 s2 i. }0 A2 _: X0 E" n
    在TableLayout布局中添加子組件。
    5 D) K+ w/ m. k+ v: w7 M9 d3 s/ s$ z, z, i! _8 h8 `6 O+ M# i- 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"/>$ g) V; k8 l) s3 w! z
        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"/>: L$ R7 Z5 q7 q8 M6 ?5 p' [# h3 m3 c# q
        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"/>
    2 u# u9 J/ O" o1 I    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]
    0 v6 ~  E! j: g& b: V; @TableLayout默認一列多行。" H) {, k3 {1 Q% e4 c2 l

    9 ?9 W: t. c$ c 8 C+ P( j+ C- |# H: G2 L9 ?0 |, u0 v$ B

    1 i6 x$ A0 M* r' G  _設(shè)置行列數(shù)：- O- X; `# U# a" ]. x/ `3 Q8 m
    $ M. E# l  O5 H
  • ...    ohos:row_count="2"    ohos:column_count="2">
    ( B0 e% l# n1 s9 G8 x設(shè)置TableLayout的行為2，列為2效果。
    ( o, u% Z. z+ d7 _4 l
    ) P/ y" Y0 s  U $ w8 ^0 Q3 r. Y0 S8 S* Q
    ) {% C% F7 _; K
    在XML中設(shè)置布局排列方向，以“vertical”為例：
    2 Q; K; G4 `. g8 X/ j! Z! H* }) T( ~* \  q' g% ~& a
  • ...    ohos:orientation="vertical">    ...
    + |0 p! v, z0 ^# \設(shè)置布局排列方向為“vertical”的效果。1 n0 V6 m/ p1 j4 K! w. [: x

    3 y1 g  u& s9 q+ C3 _ 9 U* @) D" N! n% r1 a4 D
    ( H+ S3 ^, ^& `& D) ~
    TableLayout提供兩種對齊方式，邊距對齊“align_contents”、邊界對齊“align_edges”，默認為邊距對齊“align_contents”。代碼如下：
    + A9 X' [: U' J# h9 Z1 z5 i
    " ?7 a- u* |# {/ E$ f( O' X" Y& I. 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">
    / ~6 A1 K  _8 h% y/ [( x& t# w    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"/>
    ( V4 N: Q2 y* m: Q( X: k    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"/>9 v" X+ k" a, s+ c4 o6 \
        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"/>% E' P% |* r/ S* v, 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 d2 X5 ?3 U7 V( r( P    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"/>& T! |' y' R3 ]5 S# ~, ?8 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"/>, H" R; \+ H( ^; ?) `2 @% [
    邊距對齊效果：; C4 K, X4 v+ {# l/ s+ A) Q/ T

    # v( ?* E  Z# }" m
    $ e# Y2 [* u; w6 J
    * ]5 v6 [# H& H- f9 ]$ F9 A- p將TableLayout的對齊方式修改為邊界對齊。& h$ o* t* h5 G! T& o; f# s: D
    - E6 ?1 O9 K+ S/ Y. F/ R1 i4 o
  • ...    ohos:alignment_type="align_edges">    ...
    : n) Q! \" b! E. d邊界對齊效果：  R5 s$ x; _* `3 }* ~  R

    7 W3 k7 n8 t" m: w9 a. D  V
    ( u9 ~& m0 \; W9 j# G5 c# \4 P
    1 w! E) T" K+ ^, N引用graphic文件夾下的背景資源文件為layout_borderline.xml，示例代碼如下：
    ! x; B) ~5 H% T/ Z4 k$ I! H3 W7 N  O% w; f" W. G, q, B% I
  • "http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>$ x8 x9 q0 Y, h% Y7 t# j
    * J" P7 q& C" o4 O7 t7 C) z
    TableLayout合并單元格的效果可以通過設(shè)置子組件的行列屬性來實現(xiàn)。2 O+ d8 f- s) _
    8 o) S% ?8 U% c) Q
    設(shè)置子組件的行列屬性均為2的效果展示：, }: R  o' {1 l# W4 K' }3 G) W) X

    / m4 Q+ Z: f0 D3 P5 P* S# n' x
    7 ]. a0 L& Q$ b1 O5 n- c3 ~! b8 u! D6 q- u$ c
    在XML中創(chuàng)建TableLayout，并添加子組件，代碼如下：
    ( O8 I' E% x. \2 ^' @* U" y- k& s
  • 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">8 c4 y1 ?1 f5 G' ?
        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"/>7 T9 K! u' D7 v) `5 E
        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"/>
    9 P8 A% t5 E; }: l; N  ^    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"/>2 N* L( E4 C+ G9 l: o8 @# K
        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"/>( v% p& |0 O9 l. ^$ O+ H1 l
        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"/>
    ; t4 X* e5 M% h7 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"/>
    0 E2 b$ V: s/ v; O在Java代碼中設(shè)置子組件的行列屬性，代碼如下：
    9 g3 E, q( U2 w& J7 B% _1 g
    5 A3 i$ M0 z' B: s8 M* y: g
  • @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);    }
    8 {+ Z6 U8 W/ s1 M) j5 ]5 k    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }+ _# @# a7 `& S$ q: L
    在設(shè)置子組件的行列屬性時，TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。% O  ?5 Z. k  D, `& g5 v
    9 F  q. q" h+ T) [  \6 C! z* ~
    目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。
    6 T3 n2 k- n( ?* J* x1 \在創(chuàng)建子組件的行列屬性時，還可設(shè)置子組件的對齊方式，修改上述Java代碼如下：/ p6 m9 Y- J( {  N# R
    * @6 f$ U/ b9 P$ A* i3 n; s
  • @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);        ...    }
    0 O5 o. s) G6 U( ?子組件的對齊方式設(shè)置為ALIGNMENT_FILL的效果：
    . [8 Q& x$ C. N2 _
    % c9 r& R( r- v# M0 k7 ]
    0 b/ _. y) j1 O' n
    7 _4 [* v3 c$ f+ ]4 C3 _設(shè)置子組件的權(quán)重，代碼如下：4 }$ w) i6 S# \, M, u8 g

    6 p; A6 C& `* O* v
  • @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);
      _; A1 ~; v) ^% t7 J: Z/ G+ \        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);    }" K- F5 _- e! P7 `6 n% V
    上述代碼將子組件的寬度權(quán)重設(shè)置為1.0，每行子組件會均分TableLayout的寬度，所以需要設(shè)置TableLayout為固定寬度或match_parent。5 k3 h# n) F  u+ I7 v  d

    $ S* A* e4 A  g
  • ohos:width="match_parent"    ...>
    0 g4 e8 R1 R7 ~  X  O    ohos:id="$+id:text_one"        .../>
    $ Y+ u3 T3 |" T3 q5 _8 q4 O* t1 ?& m    ohos:id="$+id:text_two"        .../>
    , X7 ?3 P4 k! A/ I0 F$ o    ohos:id="$+id:text_three"        .../>
    1 R- Q! k, e) [    ohos:id="$+id:text_four"        .../>3 n# ]# v- N" N  G2 f
        ohos:id="$+id:text_five"        .../>
    * \, z& W, l1 X7 ^+ \) r    ohos:id="$+id:text_six"        .../>[table]+ L/ \+ Q0 s+ x; Y  ~
    將子組件的寬度權(quán)重設(shè)置為1.0的效果展示：
    2 Q- ~4 P, ]* S9 S3 i$ S5 c, K0 q. I  W  Y. H! H# ^
    / @5 l! c5 y+ N0 f' }9 D- o: s
    2 R* x# t4 @  u
    % l5 p# y' v7 {& T
    4 W6 t7 x+ D, H1 V
    往期推薦基于Mobile SDK V5版固件開發(fā)大疆無人機手機端遙控器（5）- _& x5 ?/ g& G( [% M; K8 A
    一種高速ADC和DAC轉(zhuǎn)換電路分享
    * _/ c. I. U) W, ~一文搞懂CAN和CAN FD總線協(xié)議
    ' v; w  ^0 n  \4 x' E! tLabVIEW和Arduino的巧妙結(jié)合（基礎(chǔ)篇—1）) C$ Z, ?( Q  ?1 U! b/ @
    LabVIEW設(shè)計自定義滾動條
    & q/ q& J) k; r& \  P$ ?+ J& c8 ?
    3 A' u( E; w5 _/ m 2 d! o: X+ I0 K3 N" V

    ! w7 m  E: a# g1 z1 |) J6 F
    7 o1 u0 B9 ]! x9 w$ z5 ^' K點擊閱讀原文，更精彩~
    • 回復(fù)

    使用道具 舉報

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

    您需要登錄后才可以回帖 登錄 | 立即注冊

    本版積分規(guī)則


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