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

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

2 Z1 i2 l  F& G1 `點擊上方藍(lán)色字體，關(guān)注我們
1 C( M, p, Z8 l, v0 K' E+ n) q1
Position layout
* R7 ~; |7 S: A/ u, x  `( D在PositionLayout中，子組件通過指定準(zhǔn)確的x/y坐標(biāo)值在屏幕上顯示。(0, 0)為左上角，當(dāng)向下或向右移動時，坐標(biāo)值變大；允許組件之間互相重疊。
; e0 a* S7 s) w# e* C- y
5 I2 ~. a$ O: g( X* v- `PositionLayout示意圖：
& q/ L3 Z$ _! o# c2 I

: l! G4 @# E+ f$ H3 G
" P( D- J3 X' GPositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。
在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個組件，并通過position_x和position_y屬性設(shè)置子組件的坐標(biāo)。
1 w# u$ }- ~- o* t- U: [使用PositionLayout的布局效果：
/ d7 X5 ~' _/ ]. F6 ~$ `
- E/ X5 W0 I1 h7 G+ x
0 a# \/ T9 s. b: C. [$ O
) M$ o0 O6 T* Q: f! D8 |1 l示例代碼：

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"/>
9 `- c) `8 Z  q- G' \  e; u8 x    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"/>
; X" n+ W3 K8 f) h. O0 w% ?% S8 R; C$ T
設(shè)置子組件的坐標(biāo)時（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對應(yīng)的AbilitySlice中通過setPosition(int x, int y)接口設(shè)置，Java示例代碼如下：
7 d8 O/ R1 i) O5 [. \$ g

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+ u& a$ F; y2 C        title.setPosition(vp2px(50), vp2px(8));        content1.setPosition(vp2px(8), vp2px(64));        content2.setPosition(vp2px(92), vp2px(188));
  m4 Z7 y, s% G! V0 M7 \5 f" |, T' ^單位轉(zhuǎn)換的方法如下：

* |. N& L# a5 b/ f; r  U

private int vp2px(float vp){        return AttrHelper.vp2px(vp,this);    }
) I* p7 I; e1 z3 D  A+ ^  n& S對于超過布局本身大小的組件，超出部分將不顯示。
Right組件右側(cè)超出部分將不顯示：

# t- h3 N- m9 }) N6 |* r
8 p- Y4 k4 Q' @2 j% ?) _; t
示例代碼：

- G# ^6 Z- W6 ]6 h, P0 R, p7 w: o0 W

...>
    ...
    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"/>
: Q0 u$ d& p! W0 A% t2
$ d, V0 p0 Q+ s2 p- aAdaptiveBox Layout
AdaptiveBox Layout是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設(shè)備上自動調(diào)整列數(shù)的場景。
; G! ]" ^( x  l5 N
該布局中的每個子組件都用一個單獨的“盒子”裝起來，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效，不以整個自適應(yīng)布局為生效范圍。
6 h% z* E  F8 F! v9 [* _+ d: s該布局中每個盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進(jìn)行對齊。
該布局水平方向是自動分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。
! a! R3 m, Q% s3 e: d# L  `自適應(yīng)僅在水平方向進(jìn)行了自動分塊，縱向沒有做限制，因此如果某個子組件的高設(shè)置為match_parent類型，可能導(dǎo)致后續(xù)行無法顯示。
7 _5 j6 O. R: s# L! }4 G9 FAdaptiveBox Layout示意圖：


' a' A% o8 i6 Q5 v, A
2 u! @# K, f. d% Y4 rAdaptiveBox Layout布局常用方法如下：
+ k$ [$ c! q2 C8 e3 C7 D
0 U1 ]! u) t' Y0 `( Q

3 F: @, [! ?* a0 T2 |6 R& \9 g4 z* i                        方法 1 W9 d# F$ m$ v9 u8 q9 ~( ^	功能
* K) D  a, V" t9 h' z* W4 z! C( a                        addAdaptiveRule(int minWidth, int maxWidth, int columns)	- N5 S. x- i; [4 R* r/ K: P! o                        添加一個自適應(yīng)盒子布局規(guī)則。 % ^& m9 P$ o6 _7 F
( y2 n# R) p& J( y& K: b4 R4 d* E                        removeAdaptiveRule(int minWidth, int maxWidth, int columns)	移除一個自適應(yīng)盒子布局規(guī)則。 # L- j7 e9 {" x1 q8 x4 G
clearAdaptiveRules()	移除所有自適應(yīng)盒子布局規(guī)則。 5 k6 \3 m/ v: a! L6 c

9 X( P- g6 z6 U& R, O3 G( @在AdaptiveBox Layout中添加和刪除自適應(yīng)盒子布局規(guī)則的效果對比如下。

0 d' d: W0 ~9 Z1 U9 g. k

XML布局示例代碼：

- c& q: w# z# Z, a- A( D% F! M. P

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">
, q2 J4 N4 U5 _  G7 [) |4 z/ N  k    xmlns:ohos="http://schemas.huawei.com/res/ohos"        ohos:height="0vp"        ohos:width="match_parent"        ohos:weight="1"        ohos:id="$+id:adaptive_box_layout">
; c  g' ]: o! x  D        
) r9 l# C& u/ zJava關(guān)鍵代碼：

+ y0 W! \6 I. w8 g

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
; d0 j" x1 @2 ]+ p2 |findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {    // 添加規(guī)則    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));
( Y/ F, s% {2 v; R9 W' i3 ^findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {    // 移除規(guī)則    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));

) I; B+ E. N0 R
往期推薦HarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架（六大布局開發(fā)）
. Z' d& Y/ X' _0 _! }1 {; W鴻蒙OS制作小游戲：數(shù)字華容道（自定義組件踩坑記錄）
, g( @  u" ?4 o0 BHarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架（組件與布局說明）
HarmonyOS實戰(zhàn)—服務(wù)卡片初體驗



. b$ T" v" B" r$ s) l, p: `點擊閱讀原文，更精彩~