鴻蒙HarmonyOS三方件開發指南(1)-PrecentPositionLayout
https://harmonyos.51cto.com/#zz
1. PrecentPositionLayout功能介紹
1.1. 組件介紹：
SDK提供了不同布局規范的組件容器，例如以單一方向排列的DirectionalLayout、以相對位置排列的DependentLayout、以確切位置排列的PositionLayout等。
其中PositionLayout中組件的位置是以絕對像素點定義的，無法實現根據屏幕的大小自適應。因此，引入一種以百分比方式定義的PrecentPositionLayout布局容器，通過它可以很方便的實現屏幕自適應。
1.2. 手機模擬器上運行效果：
2. PrecentPositionLayout使用方法
2.1. 新建工程，增加組件Har包依賴
在應用模塊中調用HAR，只需要將precentpositionlayout.har復制到entry\libs目錄下即可(由于build.gradle中已經依賴libs目錄下的*.har，因此不需要再做修改)。
2.2. 修改主頁面的布局文件
修改主頁面的布局文件ability_main.xml，將跟組件容器修改為com.isoftstone.precentpositionlayout.PrecentPositionLayout，然后再增加5個Text組件，分別位于屏幕的左上，左下，右上，右下和中間，每個組件的長度和寬度都占屏幕的25%。修改后代碼如下：
- <?xml version="1.0" encoding="utf-8"?>
- <com.isoftstone.precentpositionlayout.PrecentPositionLayout
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent">
- <Text
- ohos:id="$+id:text_helloworld"
- ohos:height="250"
- ohos:width="250"
- ohos:left_margin="0"
- ohos:top_margin="0"
- ohos:background_element="$graphic:background_text"
- ohos:text="左上25%"
- ohos:text_size="50"
- />
- <Text
- ohos:id="$+id:text_helloworld"
- ohos:height="250"
- ohos:width="250"
- ohos:left_margin="750"
- ohos:top_margin="0"
- ohos:background_element="$graphic:background_text"
- ohos:text="右上25%"
- ohos:text_size="50"
- />
- <Text
- ohos:id="$+id:text_helloworld"
- ohos:height="250"
- ohos:width="250"
- ohos:left_margin="0"
- ohos:top_margin="750"
- ohos:background_element="$graphic:background_text"
- ohos:text="左下25%"
- ohos:text_size="50"
- />
- <Text
- ohos:id="$+id:text_helloworld"
- ohos:height="250"
- ohos:width="250"
- ohos:left_margin="750"
- ohos:top_margin="750"
- ohos:background_element="$graphic:background_text"
- ohos:text="右下25%"
- ohos:text_size="50"
- />
- <Text
- ohos:id="$+id:text_helloworld"
- ohos:height="250"
- ohos:width="250"
- ohos:left_margin="375"
- ohos:top_margin="375"
- ohos:background_element="$graphic:background_text"
- ohos:text="中心25%"
- ohos:text_size="50"
- />
- </com.isoftstone.precentpositionlayout.PrecentPositionLayout>
2.3. 增加Text組件的背景資源文件
為方便觀察，上一步我們將Text組件設置了一個繪制背景graphic:background_text。
這里需要在resources/base/grahic目錄下新增一個可繪制資源文件。
右鍵點擊graphic，選擇New-File,文件名輸入background_text.xml。
文件內容如下：(可復制background_ability_main.xml的內容，修改color值即可)
- <?xml version="1.0" encoding="UTF-8" ?>
- <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:shape="rectangle">
- <solid
- ohos:color="#00FFFF"/>
- </shape>
2.4. 修改MainAbilitySlince的UI加載代碼
在MainAbilitySlince類的onStart函數中，增加如下代碼。
- public void onStart(Intent intent) {
- super.onStart(intent);
- // 解析xml獲得PrecentPositionLayout對象
- PrecentPositionLayout precentPositionLayout = (PrecentPositionLayout) LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_ability_main, null, false);
- // 自動調整組件的百分比
- precentPositionLayout.AutoSize();
- // 設置到UI
- super.setUIContent(precentPositionLayout);
- //super.setUIContent(ResourceTable.Layout_ability_main);
- }
3. PrecentPositionLayout開發實現
3.1. 新建一個Module
新建一個Module，類型選擇HarmonyOS Library，模塊名為precentpositionlayout，如圖：
3.2. 新建一個PrecentPositionLayout類
新建一個PrecentPositionLayout類，繼承自PositionLayout類，并增加AutoSize()方法。
- /* 調整各組件的大小，按照百分比調整
- * 將原來組件的起始位置，寬度和高度都視作相對于整個屏幕的百分比值，然后根據屏幕的分辨率轉換為實際的像素值。
- * 注：考慮到使用0-100配置百分比的話，范圍太小不夠精確，因此配置范圍設置為0-1000，
- * 比如當前屏幕是1920 * 1060, 某個組件的寬度和高度配置的是200，則表示改組件的寬和高都占整個屏幕的20%。
- * 因此，調整后改組件的實際大小為384 * 212.
- */
- public void AutoSize() {
- // 獲取屏幕分辨率
- Optional<Display> display = DisplayManager.getInstance().getDefaultDisplay(this.getContext());
- Point pt = new Point();
- display.get().getSize(pt);
- // 去除上面標題欄和下面導航欄的高度
- pt.modify(pt.getPointX(), pt.getPointY() - 160);
- // 調增各組件的大小
- int childCount = getChildCount();
- for (int i = 0; i < childCount; i++) {
- Component component = getComponentAt(i);
- ComponentContainer.LayoutConfig config = component.getLayoutConfig();
- component.setLeft(config.getMarginLeft() * pt.getPointXToInt() / 1000);
- component.setTop(config.getMarginTop() * pt.getPointYToInt() / 1000);
- component.setWidth(config.width * pt.getPointXToInt() / 1000);
- component.setHeight(config.height * pt.getPointYToInt() / 1000);
- }
- }
3.3. 編譯HAR包
利用Gradle可以將HarmonyOS Library庫模塊構建為HAR包，構建HAR包的方法如下：
在Gradle構建任務中，雙擊PackageDebugHar或PackageReleaseHar任務，構建Debug類型或Release類型的HAR。
待構建任務完成后，可以在PrecentPositionLayout> bulid > outputs > har目錄中，獲取生成的HAR包。
項目源代碼地址：https://github.com/isoftstone-dev/PersentPositionLayout_HarmonOS
©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任
https://harmonyos.51cto.com/#zz
