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

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

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

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

[復(fù)制鏈接]

601

主題

601

帖子

4762

積分

四級會員

Rank: 4

積分
4762
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2023-7-31 12:01:00 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
% {+ Y* {& a. w' Y% h
點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
3 U- ?. u3 ^7 e/ J; Y/ h- B1
9 [% y' L5 O, v6 A6 o8 X' o' GPosition layout
4 L+ `! s$ W9 N" W# z% J# r1 Z" n在PositionLayout中，子組件通過指定準(zhǔn)確的x/y坐標(biāo)值在屏幕上顯示。(0, 0)為左上角，當(dāng)向下或向右移動時，坐標(biāo)值變大；允許組件之間互相重疊。
# h: |* n" Q$ u# D5 Q. N2 n
$ P& B; u! H/ m. R" h8 n8 m8 m3 ?PositionLayout示意圖：
" q6 k3 @5 d8 o1 j$ ~3 d2 c1 [: D, g: V6 O4 Z2 t
2 c9 V. I/ f' V2 k: a
8 J" Z) I( J1 d6 g9 m* F
PositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。
, s. Z0 }, n  _5 X- K在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個組件，并通過position_x和position_y屬性設(shè)置子組件的坐標(biāo)。
9 k' C2 P6 X' o9 E% W% C使用PositionLayout的布局效果：, K2 S0 M+ I  f' g8 ^; }
1 M# O7 v% z  j: U7 W

6 T6 ^$ F# G3 ]# Z! Y5 t( L% S4 y/ A0 S8 e; f6 c& R( \8 x1 j" y. q
示例代碼：" p( Y$ a& o' J* c

+ x1 _! Y. W! {- V8 w. z- ]2 ^9 U$ X5 e4 [
  • xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:id="$+id:position"    ohos:height="match_parent"    ohos:width="300vp"    ohos:background_element="#3387CEFA">+ U4 R" h3 R* K
        ohos:id="$+id:position_text_1"        ohos:height="50vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:position_x="50vp"        ohos:position_y="8vp"        ohos:text="Title"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    - f9 H# V) l! U) p    ohos:id="$+id:position_text_2"        ohos:height="200vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:position_x="8vp"        ohos:position_y="64vp"        ohos:text="Content"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    ; f* K6 {2 F% |7 a( b; Y) }( f    ohos:id="$+id:position_text_3"        ohos:height="200vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:position_x="92vp"        ohos:position_y="188vp"        ohos:text="Content"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    8 _! P+ ]; n+ l* d4 T' G: w2 }# G* ^, q
    設(shè)置子組件的坐標(biāo)時（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對應(yīng)的AbilitySlice中通過setPosition(int x, int y)接口設(shè)置，Java示例代碼如下：$ W2 K) Q5 q: G) ~0 z
    : h% H/ u; @. L
  • Text title = (Text)findComponentById(ResourceTable.Id_position_text_1);        Text content1 = (Text)findComponentById(ResourceTable.Id_position_text_2);        Text content2 = (Text)findComponentById(ResourceTable.Id_position_text_3);
    " J' ~' i2 v2 s2 n0 I8 U+ c        title.setPosition(vp2px(50), vp2px(8));        content1.setPosition(vp2px(8), vp2px(64));        content2.setPosition(vp2px(92), vp2px(188));+ x) o2 s1 F! [; K+ z' m0 x
    單位轉(zhuǎn)換的方法如下：
    0 I4 b  ^0 H  t( a  B; U. `7 Z  V7 H  |) L) w: M) C* x% o6 C
  • private int vp2px(float vp){        return AttrHelper.vp2px(vp,this);    }3 X" Q, w6 f* E& s0 Z( {* f/ e/ n
    對于超過布局本身大小的組件，超出部分將不顯示。
    - ]% q2 [% o8 q' |4 I2 PRight組件右側(cè)超出部分將不顯示：
    , f- n( h% B) J9 F! m4 O( s
    5 ~8 b; T" Y2 k- F( g , w) P# H) ]3 }4 \; ]# ?
    1 F5 u1 g/ N) V9 h- H
    示例代碼：
    0 H9 c' s+ |% q
    8 l6 }' Q" Y' U, k" e) @& v- q2 V9 ~
  • ...>
    # b/ r5 i& I" e! o8 k* K    ...% s  t1 }' Y. u. R9 r, ~
        ohos:id="$+id:position_text_4"        ohos:height="120vp"        ohos:width="120vp"        ohos:background_element="#9987CEFA"        ohos:position_x="212vp"        ohos:position_y="64vp"        ohos:text="Right"        ohos:text_alignment="center"        ohos:text_size="20fp"/>; i1 s) o5 ~! ?6 \
    2
    ' n! w1 V4 D4 ?0 k. R! bAdaptiveBox Layout  D+ j8 m) b, p' T) z
    AdaptiveBox Layout是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設(shè)備上自動調(diào)整列數(shù)的場景。
    8 i' T$ C+ b7 \5 h. B7 X* r4 j# z. e
    該布局中的每個子組件都用一個單獨(dú)的“盒子”裝起來，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效，不以整個自適應(yīng)布局為生效范圍。
    5 K1 o" c5 P/ S( [, v6 p9 }/ x該布局中每個盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進(jìn)行對齊。8 g8 o6 m2 F) X* r) `7 F: Y3 `
    該布局水平方向是自動分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。! j- X8 ]# s- w6 H6 z" w6 W# v3 S8 ^
    自適應(yīng)僅在水平方向進(jìn)行了自動分塊，縱向沒有做限制，因此如果某個子組件的高設(shè)置為match_parent類型，可能導(dǎo)致后續(xù)行無法顯示。" u" S6 r) ^% E8 y0 c
    AdaptiveBox Layout示意圖：
    * g$ X' v0 V* c; d( Q& [; a$ |0 u- a' I- s0 D& S# C7 F  @

    ; [- x, S/ r1 k- X# w) \" P5 x+ K& Q- D
    AdaptiveBox Layout布局常用方法如下：
    * z3 `, X7 z- Z' o2 y3 _3 Q
    ! ~- ~( B- J/ R

    8 |5 k, H8 F$ w                        方法, S8 l5 |$ N  D# h( |) x/ {
                                		6 F- ^7 D7 p/ \1 E/ j$ X
                            功能1 N7 Y, o: \4 w  u
                           
    + n; _0 I* ]9 ^7 C, ^1 `1 C2 S
                            addAdaptiveRule(int minWidth, int maxWidth, int columns)
    0 E$ L* |' O* F+ C# V                       
    & J9 r" R9 d. b  h7 L6 S" v2 |                        添加一個自適應(yīng)盒子布局規(guī)則。
    ) f& [, T  G& x6 E" M                       
    # Z) [) }  a( D" [6 r
                            removeAdaptiveRule(int minWidth, int maxWidth, int columns)
    3 h1 y: C' S- }: h                            		' m. ]7 Z9 p' R$ T+ X: D8 N0 l1 _6 P5 o
                            移除一個自適應(yīng)盒子布局規(guī)則。
    * U. n" s6 e' k                       
    & T0 z" [4 h, B$ z5 E1 }
                            clearAdaptiveRules()& Q: ~1 @; P) `0 H5 x
                                		1 ^" m3 x, O1 Y) M5 L
                            移除所有自適應(yīng)盒子布局規(guī)則。
    3 y) C' C& ~1 n                       

    7 a7 x* e; D( L2 B1 G, `, f) U在AdaptiveBox Layout中添加和刪除自適應(yīng)盒子布局規(guī)則的效果對比如下。$ l) Z; H+ G. v
    ; p1 h  }/ D4 f; v* @; W8 s

    + q+ M. k4 W9 p) k% g& d5 V& T+ T) F- G, }. n3 d4 h/ F
    XML布局示例代碼：
    * s( A2 s" X/ b, q; m) |% F7 b1 b
  • xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">
    6 r6 V. Q% m6 q' W    xmlns:ohos="http://schemas.huawei.com/res/ohos"        ohos:height="0vp"        ohos:width="match_parent"        ohos:weight="1"        ohos:id="$+id:adaptive_box_layout">
    5 C, M. l0 P  o        
    2 n, u3 L* |* u, H1 i- ^Java關(guān)鍵代碼：
    0 Q2 ~0 G  M! [8 G
    # t% Y9 d9 s" v- @
  • AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);# P- ^! \5 o/ v
    findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {    // 添加規(guī)則    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));8 ]% b. h3 j- Q, Y0 W
    findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {    // 移除規(guī)則    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));
    / l2 _& G: J4 ~4 R  e( T$ P$ O; O8 _4 m
    7 k% x2 L4 d$ G4 E
    往期推薦HarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架（六大布局開發(fā)）
    * ?0 b8 l3 T; `4 j" T9 _鴻蒙OS制作小游戲：數(shù)字華容道（自定義組件踩坑記錄）$ e% ^' j+ i2 B  n
    HarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架（組件與布局說明）/ X! i# ^/ P. L7 K* a4 T
    HarmonyOS實(shí)戰(zhàn)—服務(wù)卡片初體驗. l- _% ]/ e, s7 L$ t# u4 ]8 G1 J% j
      _7 }6 y, W6 V! i5 ?3 M  R- i
    4 K  G5 V5 }0 n$ J( X  Z4 T
    ( a: R. W. s" M: s
    點(diǎn)擊閱讀原文，更精彩~
    • 回復(fù)

    使用道具 舉報

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

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

    本版積分規(guī)則


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