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

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

; p" k9 p- J5 v' X8 Y+ W( e) k( v4 p點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
1 A. i4 j% V9 X4 ~9 ]1
Position layout
+ X5 N8 N: ~3 j7 n, q; x  @% W在PositionLayout中，子組件通過(guò)指定準(zhǔn)確的x/y坐標(biāo)值在屏幕上顯示。(0, 0)為左上角，當(dāng)向下或向右移動(dòng)時(shí)，坐標(biāo)值變大；允許組件之間互相重疊。
7 [2 Y+ Z: V' d7 Z' `: B
PositionLayout示意圖：
! A3 c$ o+ |) ?$ G- N3 n
# s: i* M1 ^. t: m3 q

9 m6 `" [6 ^6 XPositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。
在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個(gè)組件，并通過(guò)position_x和position_y屬性設(shè)置子組件的坐標(biāo)。
; k# w& _4 \- n, P4 ]使用PositionLayout的布局效果：
; Y. ?6 ]% Q+ h3 x


示例代碼：

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:id="$+id:position"    ohos:height="match_parent"    ohos:width="300vp"    ohos:background_element="#3387CEFA">
    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"/>
    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"/>
# m' U0 h  P+ y+ }0 r  d    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"/>

& V$ x* B( o! p2 X6 r8 @" p7 v/ m設(shè)置子組件的坐標(biāo)時(shí)（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對(duì)應(yīng)的AbilitySlice中通過(guò)setPosition(int x, int y)接口設(shè)置，Java示例代碼如下：
7 J& r+ h/ p2 E+ M! P, N
. f9 h+ u) N/ ~

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);
, T; j+ y7 L# m0 Y        title.setPosition(vp2px(50), vp2px(8));        content1.setPosition(vp2px(8), vp2px(64));        content2.setPosition(vp2px(92), vp2px(188));
9 w& t6 }# P, m9 ?* G' B) B單位轉(zhuǎn)換的方法如下：

private int vp2px(float vp){        return AttrHelper.vp2px(vp,this);    }
, t0 K7 s* l, O% B& y. ?3 Z對(duì)于超過(guò)布局本身大小的組件，超出部分將不顯示。
! a0 V% c. {. l* [1 cRight組件右側(cè)超出部分將不顯示：
0 d% O0 ~. d* g0 q8 T: N

' E. s; A3 }1 N! T- n( z
示例代碼：

...>
9 J3 f- D  {( R( u' t    ...
    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"/>
2
% x( n- x! B8 ~( x( }2 V3 @& Q' VAdaptiveBox Layout
/ [4 ]* g. T+ ^  SAdaptiveBox Layout是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力，主要用于相同級(jí)別的多個(gè)組件需要在不同屏幕尺寸設(shè)備上自動(dòng)調(diào)整列數(shù)的場(chǎng)景。
, \: X- G! f% c( ~; l2 z
該布局中的每個(gè)子組件都用一個(gè)單獨(dú)的“盒子”裝起來(lái)，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效，不以整個(gè)自適應(yīng)布局為生效范圍。
該布局中每個(gè)盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進(jìn)行對(duì)齊。
該布局水平方向是自動(dòng)分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。
3 Y% t  ]5 M) t0 A自適應(yīng)僅在水平方向進(jìn)行了自動(dòng)分塊，縱向沒(méi)有做限制，因此如果某個(gè)子組件的高設(shè)置為match_parent類型，可能導(dǎo)致后續(xù)行無(wú)法顯示。
. {0 f) H8 j* S, N" C6 L. |AdaptiveBox Layout示意圖：
. @( t6 g- Y& b) p* H! p( O


7 P8 F/ i% A( o1 l3 e6 S% DAdaptiveBox Layout布局常用方法如下：
; W8 e$ `, `& E2 n: [$ l7 n1 W
2 b( @" x# ?3 w/ Y5 ]' D0 W1 ~

1 e* p8 h! Q5 H2 }, d. d$ a                        方法	; s% H. t) F2 y5 Q' U                        功能 ; D( Z7 {! H8 v+ W* z$ D1 j5 a
3 D$ A3 x3 l* h4 D5 a( z                        addAdaptiveRule(int minWidth, int maxWidth, int columns) . ?4 M, A: J6 @: O' m4 I7 b	添加一個(gè)自適應(yīng)盒子布局規(guī)則。
removeAdaptiveRule(int minWidth, int maxWidth, int columns) ' v6 O- q) m7 H; @7 c	3 a8 ]) Z  M. n1 S* t6 W6 `2 R                        移除一個(gè)自適應(yīng)盒子布局規(guī)則。
' ~/ |) J2 c' L# F$ N) G3 i                        clearAdaptiveRules()	$ z  ]7 j; C. W0 t# A6 u                        移除所有自適應(yīng)盒子布局規(guī)則。

. L0 m4 X' O% Q8 C1 E& i在AdaptiveBox Layout中添加和刪除自適應(yīng)盒子布局規(guī)則的效果對(duì)比如下。
6 B9 \8 Y, X, M5 g) u7 D
. \0 ^5 J$ u9 W8 r3 {* _; w
( o. [* J6 M  q, `( J% G! C9 {, A2 @
XML布局示例代碼：

7 x" J3 Y0 I- C5 o' c4 L  z

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">
! z8 ?- y5 P+ C    xmlns:ohos="http://schemas.huawei.com/res/ohos"        ohos:height="0vp"        ohos:width="match_parent"        ohos:weight="1"        ohos:id="$+id:adaptive_box_layout">
        
# b  a* U4 @) eJava關(guān)鍵代碼：
. O9 H+ c+ K+ C8 x
: x+ o6 m: C4 ^, {8 S, C# r

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {    // 添加規(guī)則    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));
findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {    // 移除規(guī)則    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));

: |' `6 Z. {* g% c
6 o" a8 w  Y* W; m7 U' g往期推薦HarmonyOS學(xué)習(xí)路之開(kāi)發(fā)篇—Java UI框架（六大布局開(kāi)發(fā)）
" D6 K( ?% t5 F8 {8 S/ r  X鴻蒙OS制作小游戲：數(shù)字華容道（自定義組件踩坑記錄）
# N1 {4 [( ]% L3 v8 j5 N' RHarmonyOS學(xué)習(xí)路之開(kāi)發(fā)篇—Java UI框架（組件與布局說(shuō)明）
HarmonyOS實(shí)戰(zhàn)—服務(wù)卡片初體驗(yàn)

7 D. c5 H! g. m% d6 |' |) P

點(diǎn)擊閱讀原文，更精彩~