HarmonyOS學習路之開發(fā)篇—Java UI框架(Position和AdaptiveBox Layout)
1
Position Layout
在PositionLayout中，子組件通過指定準確的x/y坐標值在屏幕上顯示。(0, 0)為左上角，當向下或向右移動時，坐標值變大；允許組件之間互相重疊。
PositionLayout示意圖：
PositionLayout以坐標的形式控制組件的顯示位置，允許組件相互重疊。
使用PositionLayout的布局效果：
示例代碼：
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"/><textohos: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"/><textohos: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"/></text</text<positionlayout<text<text<text</text</text</text</positionlayout
設置子組件的坐標時（position_x和position_y屬性），除了上述示例中的XML方式，還可以在對應的AbilitySlice中通過setPosition(int x, int y)接口設置，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);vp2px(8));vp2px(64));vp2px(188));
單位轉(zhuǎn)換的方法如下：
private int vp2px(float vp){return AttrHelper.vp2px(vp,this);}
Right組件右側(cè)超出部分將不顯示：
示例代碼：
<positionlayout</positionlayout...>...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
AdaptiveBox Layout是自適應盒子布局，該布局提供了在不同屏幕尺寸設備上的自適應布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設備上自動調(diào)整列數(shù)的場景。
該布局中的每個子組件都用一個單獨的“盒子”裝起來，子組件設置的布局參數(shù)都是以盒子作為父布局生效，不以整個自適應布局為生效范圍。
AdaptiveBox Layout示意圖：
AdaptiveBox Layout布局常用方法如下：
| 方法 |
功能 |
|---|---|
| addAdaptiveRule(int minWidth, int maxWidth, int columns) |
添加一個自適應盒子布局規(guī)則。 |
| removeAdaptiveRule(int minWidth, int maxWidth, int columns) |
移除一個自適應盒子布局規(guī)則。 |
| clearAdaptiveRules() |
移除所有自適應盒子布局規(guī)則。 |
在AdaptiveBox Layout中添加和刪除自適應盒子布局規(guī)則的效果對比如下。
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"></button</button</text</text</text</text</text</text</text<directionallayout<adaptiveboxlayout<text<text<text<text<text<text<text<button<button</button</button</text</text</text</text</text</text</text</adaptiveboxlayout</directionallayout
Java關鍵代碼：
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();}));
往期推薦
