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

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

, B0 T" \2 G8 b4 u" ]) h& z點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
1
) ]5 z: C9 U% D# Z) D4 \) yPosition layout
在PositionLayout中，子組件通過(guò)指定準(zhǔn)確的x/y坐標(biāo)值在屏幕上顯示。(0, 0)為左上角，當(dāng)向下或向右移動(dòng)時(shí)，坐標(biāo)值變大；允許組件之間互相重疊。
- D3 s! p6 O; m0 A2 ], I* A7 i2 w
PositionLayout示意圖：



1 ~- s0 s/ }5 V/ TPositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。
: h. y! c9 \1 X. Y4 ^在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個(gè)組件，并通過(guò)position_x和position_y屬性設(shè)置子組件的坐標(biāo)。
使用PositionLayout的布局效果：

2 o) w4 q$ n' D9 Z
4 a$ e5 J0 `# ?* I% [7 V  a7 B
示例代碼：
. R, ?9 Z1 }0 J+ }% g

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:id="$+id:position"    ohos:height="match_parent"    ohos:width="300vp"    ohos:background_element="#3387CEFA">
0 J. m; U6 v- h' o" G4 V5 X    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"/>
    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"/>
6 K& N4 Z# x5 x) X$ Y% F
* t8 ]1 H. A6 C) O; H1 h& c設(shè)置子組件的坐標(biāo)時(shí)（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對(duì)應(yīng)的AbilitySlice中通過(guò)setPosition(int x, int y)接口設(shè)置，Java示例代碼如下：

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);
0 v$ G5 n' c. k  f        title.setPosition(vp2px(50), vp2px(8));        content1.setPosition(vp2px(8), vp2px(64));        content2.setPosition(vp2px(92), vp2px(188));
( n( \$ i; R) I) ~& b單位轉(zhuǎn)換的方法如下：

8 c, {( L# Y! f( j$ [

private int vp2px(float vp){        return AttrHelper.vp2px(vp,this);    }
+ s6 `4 |, r- p2 A對(duì)于超過(guò)布局本身大小的組件，超出部分將不顯示。
Right組件右側(cè)超出部分將不顯示：

) \* {; o5 ^5 D; r! X

示例代碼：

% z0 j* I* g8 ~$ X% w

...>
    ...
, H; m- t( p' w/ ^/ n& D' n/ t, l    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
. J; }- K& j2 ~; _, @) DAdaptiveBox Layout
AdaptiveBox Layout是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力，主要用于相同級(jí)別的多個(gè)組件需要在不同屏幕尺寸設(shè)備上自動(dòng)調(diào)整列數(shù)的場(chǎng)景。

8 {  |" H# Y4 l該布局中的每個(gè)子組件都用一個(gè)單獨(dú)的“盒子”裝起來(lái)，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效，不以整個(gè)自適應(yīng)布局為生效范圍。
: \% u( z& k) w' R該布局中每個(gè)盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進(jìn)行對(duì)齊。
該布局水平方向是自動(dòng)分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。
自適應(yīng)僅在水平方向進(jìn)行了自動(dòng)分塊，縱向沒(méi)有做限制，因此如果某個(gè)子組件的高設(shè)置為match_parent類型，可能導(dǎo)致后續(xù)行無(wú)法顯示。
AdaptiveBox Layout示意圖：
! m1 ]3 V* v& O

5 R1 A4 a3 w1 K4 c
AdaptiveBox Layout布局常用方法如下：
. M. m' M5 e2 [' e$ k

方法	功能 4 q5 H' X4 n- f. r; Y
addAdaptiveRule(int minWidth, int maxWidth, int columns) " `# @) w+ h+ v& x( Q, [+ n1 L( C	添加一個(gè)自適應(yīng)盒子布局規(guī)則。
0 Z6 f, n9 Q. E1 O1 n# d                        removeAdaptiveRule(int minWidth, int maxWidth, int columns) ( w3 n9 n: M3 ]# F# l	移除一個(gè)自適應(yīng)盒子布局規(guī)則。 / w/ F8 S' N/ p7 {6 m7 N% g: u, r
* V0 _, v3 d: w9 N: j                        clearAdaptiveRules()	3 \/ b  m; ?; X$ R                        移除所有自適應(yīng)盒子布局規(guī)則。 $ `0 C9 G: D* r

$ ]( Y& r8 ?  Y9 {5 s在AdaptiveBox Layout中添加和刪除自適應(yīng)盒子布局規(guī)則的效果對(duì)比如下。


0 b% F% \* W0 C, c7 u$ ?
XML布局示例代碼：

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">
    xmlns:ohos="http://schemas.huawei.com/res/ohos"        ohos:height="0vp"        ohos:width="match_parent"        ohos:weight="1"        ohos:id="$+id:adaptive_box_layout">
        
9 U# T# m' d8 W4 J# ]& o- X! OJava關(guān)鍵代碼：
# f7 v  L# m1 K% \" c& G- [

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();}));
1 R- N  H. n  H# _5 \+ @2 L

往期推薦HarmonyOS學(xué)習(xí)路之開(kāi)發(fā)篇—Java UI框架（六大布局開(kāi)發(fā)）
6 c: f  p; S, n鴻蒙OS制作小游戲：數(shù)字華容道（自定義組件踩坑記錄）
HarmonyOS學(xué)習(xí)路之開(kāi)發(fā)篇—Java UI框架（組件與布局說(shuō)明）
3 R( R( x! `6 X& THarmonyOS實(shí)戰(zhàn)—服務(wù)卡片初體驗(yàn)
9 o4 ^; n! {) f$ i
$ w9 l& d; `, r% ], |
6 @+ o1 |  r8 h4 a% P5 Q' z
點(diǎn)擊閱讀原文，更精彩~