鴻蒙HarmonyOS三方件開發指南(1)-PrecentPositionLayout

作者：軟通動力乾 2021-01-13 09:40:31

開發 OpenHarmony

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com/#zz

[[375329]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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); 
 
    } 
 
}