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

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

  n* V5 [( L& y點(diǎn)擊上方藍(lán)色字體，關(guān)注我們
- u2 u! {* v: H) l1
Position layout
/ Y) w. q1 Z/ x% P6 A在PositionLayout中，子組件通過指定準(zhǔn)確的x/y坐標(biāo)值在屏幕上顯示。(0, 0)為左上角，當(dāng)向下或向右移動時，坐標(biāo)值變大；允許組件之間互相重疊。

5 {- `' M7 {7 b) P: n, LPositionLayout示意圖：


1 d* a9 D6 h" c
: Y  [. S2 A9 v7 y# ?! WPositionLayout以坐標(biāo)的形式控制組件的顯示位置，允許組件相互重疊。
在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個組件，并通過position_x和position_y屬性設(shè)置子組件的坐標(biāo)。
5 u- K8 b8 a) w) n' m使用PositionLayout的布局效果：
$ L/ p! ]% `5 e; W; ^) `# v% u
( P$ _2 _2 n8 j3 k/ r
! {8 Y/ [$ T9 S
示例代碼：

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"/>
    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- ~) J8 G( y; K+ x設(shè)置子組件的坐標(biāo)時（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對應(yīng)的AbilitySlice中通過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);
        title.setPosition(vp2px(50), vp2px(8));        content1.setPosition(vp2px(8), vp2px(64));        content2.setPosition(vp2px(92), vp2px(188));
單位轉(zhuǎn)換的方法如下：

" ]9 a5 s/ g0 R! O/ ~, ?, y* {5 f/ N

private int vp2px(float vp){        return AttrHelper.vp2px(vp,this);    }
7 x" ]3 N; E( X9 j; _7 q對于超過布局本身大小的組件，超出部分將不顯示。
Right組件右側(cè)超出部分將不顯示：
  _, A: Y- c( [, @4 b0 w: l) Q- R
/ t5 i9 f) u: j- X2 c0 E. G  X

; Q' k3 J6 s! X! N8 Z! d, H+ l$ ?示例代碼：
4 P5 T1 d8 G# M% J/ e6 [$ w
! U) \2 p5 r7 g; P4 |

...>
0 @& R. Z6 @% A' E$ \; C; p    ...
    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
AdaptiveBox Layout
/ ^: q2 m8 g& L8 |9 cAdaptiveBox Layout是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設(shè)備上自動調(diào)整列數(shù)的場景。
/ e" S- `0 Z3 [8 Q
4 E1 [0 h+ R4 Q1 A% x該布局中的每個子組件都用一個單獨(dú)的“盒子”裝起來，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效，不以整個自適應(yīng)布局為生效范圍。
1 K$ u4 K7 B& y" t& `該布局中每個盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進(jìn)行對齊。
. M, G7 F* }7 L該布局水平方向是自動分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。
自適應(yīng)僅在水平方向進(jìn)行了自動分塊，縱向沒有做限制，因此如果某個子組件的高設(shè)置為match_parent類型，可能導(dǎo)致后續(xù)行無法顯示。
1 X3 D/ [( G; oAdaptiveBox Layout示意圖：

; c. F' e4 W* Y% v$ m
- Z  t5 C- w; X$ _/ n4 H
4 R8 v1 r+ y/ x  S( e& v( GAdaptiveBox Layout布局常用方法如下：

! W5 G! V3 Y0 P) k8 Y1 M7 x- \

6 j: l1 Y) X4 U* h4 l4 z, b/ D                        方法 ) W/ E4 H8 r# f8 Q, o' K3 o	功能
addAdaptiveRule(int minWidth, int maxWidth, int columns) ( B) K5 d( [# q9 r/ S/ Q- l+ b2 {' j1 `	1 E0 @8 b) Q& L9 [/ v                        添加一個自適應(yīng)盒子布局規(guī)則。
; J) Q1 s1 k: y$ q( R4 ^                        removeAdaptiveRule(int minWidth, int maxWidth, int columns) ) _6 P9 Y3 ?7 [+ @	移除一個自適應(yīng)盒子布局規(guī)則。 ! f# ]3 T, |# F4 ?
* d& q" H& W! i                        clearAdaptiveRules()	移除所有自適應(yīng)盒子布局規(guī)則。 4 n* @: t# q! _$ a  G

/ I0 q* A0 d' r在AdaptiveBox Layout中添加和刪除自適應(yīng)盒子布局規(guī)則的效果對比如下。

+ ?4 b7 @+ O. e+ w  M1 Q& r
: b. D: p9 ^$ E# m8 e( j9 |
2 O8 h7 a. y  F9 hXML布局示例代碼：

( V5 w* b; l/ F2 }, Q& [' H8 ]  i

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">
0 @" B% P9 }/ P    xmlns:ohos="http://schemas.huawei.com/res/ohos"        ohos:height="0vp"        ohos:width="match_parent"        ohos:weight="1"        ohos:id="$+id:adaptive_box_layout">
        
Java關(guān)鍵代碼：

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
2 w6 t  L0 d% ^5 n! vfindComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {    // 添加規(guī)則    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));
1 k4 d0 g" g  ?5 y# wfindComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {    // 移除規(guī)則    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));
- g2 p5 @* B2 p; a6 H
5 m5 b  J8 ~% \2 r* g/ v! {4 L7 k
. u& d: S, L$ w6 O往期推薦HarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架（六大布局開發(fā)）
鴻蒙OS制作小游戲：數(shù)字華容道（自定義組件踩坑記錄）
HarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架（組件與布局說明）
HarmonyOS實戰(zhàn)—服務(wù)卡片初體驗



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