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

電子設計聯(lián)盟

點擊上方藍色字體，關注我們
) H' |" X7 `3 n' U1
Position layout
  L: N6 r; d1 Y$ p/ v7 B' ~6 r- m在PositionLayout中，子組件通過指定準確的x/y坐標值在屏幕上顯示。(0, 0)為左上角，當向下或向右移動時，坐標值變大；允許組件之間互相重疊。
! ^4 x! {' J3 J% Y) s3 W0 w
PositionLayout示意圖：
8 R% y5 O$ Y. j; Q/ U) E


PositionLayout以坐標的形式控制組件的顯示位置，允許組件相互重疊。
在layout目錄下的XML文件中創(chuàng)建PositionLayout并添加多個組件，并通過position_x和position_y屬性設置子組件的坐標。
使用PositionLayout的布局效果：
% B' }6 X  |1 i+ j+ W# e: m9 O4 D


示例代碼：
- S& q8 m! r! v9 V' g- J5 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"/>
- B( z5 `( o& R# i7 v" m    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"/>
9 P# g. z! A- H6 T: ]9 `, O. }: }
設置子組件的坐標時（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對應的AbilitySlice中通過setPosition(int x, int y)接口設置，Java示例代碼如下：
8 L  p1 C* |; q  N$ z7 F0 O4 R0 i
4 J( n+ M- b. B) H. i1 D. P( v

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);
! |) K% Y5 `' g/ P2 I* p8 p5 R        title.setPosition(vp2px(50), vp2px(8));        content1.setPosition(vp2px(8), vp2px(64));        content2.setPosition(vp2px(92), vp2px(188));
單位轉換的方法如下：

private int vp2px(float vp){        return AttrHelper.vp2px(vp,this);    }
對于超過布局本身大小的組件，超出部分將不顯示。
( a6 x6 L4 z8 ]( wRight組件右側超出部分將不顯示：
6 x- G( n! I, N' o7 J
% f; |7 r' u, p7 O. G* X3 A
" ~2 M% F8 I9 q  V+ W
  A$ C6 Z4 D# f3 Z示例代碼：

...>
    ...
2 u  a5 a7 N+ }% f    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"/>
0 u3 v: j; {4 m2 |3 ^" N% {  d- Z% K2
: b5 a. h' `$ h: @7 c7 OAdaptiveBox Layout
AdaptiveBox Layout是自適應盒子布局，該布局提供了在不同屏幕尺寸設備上的自適應布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設備上自動調整列數(shù)的場景。

1 y3 ^, j$ [8 p6 j2 t該布局中的每個子組件都用一個單獨的“盒子”裝起來，子組件設置的布局參數(shù)都是以盒子作為父布局生效，不以整個自適應布局為生效范圍。
6 n! v8 S# K- x& |* b% P( I* _該布局中每個盒子的寬度固定為布局總寬度除以自適應得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進行對齊。
5 }$ m. r+ D4 r6 z2 v0 J該布局水平方向是自動分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。
3 n: {6 S' f# s自適應僅在水平方向進行了自動分塊，縱向沒有做限制，因此如果某個子組件的高設置為match_parent類型，可能導致后續(xù)行無法顯示。
! I% @$ C7 G4 V5 {AdaptiveBox Layout示意圖：
. X, l, w3 N, o. q  D- N4 h2 q
  ?6 H9 g5 M) N% g$ }9 m

5 A1 E# Q  y8 ~- F( S+ n, OAdaptiveBox Layout布局常用方法如下：
  R; ^' I, F$ D- K+ n
7 ?# j# f/ J" v  a- r: W# }% @

方法	5 a, P6 l3 P+ z( s2 o3 K                        功能
?! ~7 `) ^0 ~3 L1 w* g                        addAdaptiveRule(int minWidth, int maxWidth, int columns)	添加一個自適應盒子布局規(guī)則。
$ j; T- ?( X' K5 v9 n5 Z8 e  k                        removeAdaptiveRule(int minWidth, int maxWidth, int columns) # j2 h2 y/ p0 |& [' ]* M5 X	, Y$ S) k" N# y# j# [                        移除一個自適應盒子布局規(guī)則。
clearAdaptiveRules()	8 ]  k% |" g" W! Z2 y! w9 z                        移除所有自適應盒子布局規(guī)則。 7 _1 M3 D! W! P# q5 ?

在AdaptiveBox Layout中添加和刪除自適應盒子布局規(guī)則的效果對比如下。



$ U; N2 C1 T& M. l% J/ JXML布局示例代碼：
! p0 H0 x/ i$ \$ ?. J5 n

xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:orientation="vertical">
# s6 h/ {( ~6 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">
# o# Q' }; W! \2 S        
Java關鍵代碼：

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
: u1 e& Q+ R  m- j* \, ~" U) MfindComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {    // 添加規(guī)則    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));
8 Y$ {: h" Y2 G# @! Y/ g, B) |findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {    // 移除規(guī)則    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);    // 更新布局    adaptiveBoxLayout.postLayout();}));

9 o" K+ c! S4 r* i/ [
往期推薦HarmonyOS學習路之開發(fā)篇—Java UI框架（六大布局開發(fā)）
2 `. H5 U6 C$ B1 W% Y) I4 B鴻蒙OS制作小游戲：數(shù)字華容道（自定義組件踩坑記錄）
% c% H- W) K9 g1 NHarmonyOS學習路之開發(fā)篇—Java UI框架（組件與布局說明）
' U! |% r* L9 N9 a7 j0 THarmonyOS實戰(zhàn)—服務卡片初體驗
7 u( E0 n8 Z5 S: i3 p2 q% ^! K


; G, u% Y) w0 u% h( e. K9 O: m點擊閱讀原文，更精彩~