輕松玩轉(zhuǎn)平行視界（下）

作者：木棉花HOS 2021-11-10 16:08:45

平行視界是多窗口交互服務(wù)的其中一種，平行視界是以界面為基本單位實(shí)現(xiàn)應(yīng)用內(nèi)雙窗口顯示的系統(tǒng)側(cè)解決方案。

[[434410]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

先來回顧一下上一篇文章的easygo.json配置文件的相關(guān)元素的描述：【木棉花】輕松玩轉(zhuǎn)平行視界(上)

{ 
  "easyGoVersion": 必選,固定值為"1.0", 
  "client": 必選,該程序的應(yīng)用包名, 
  "logicEntities": [ 
    { 
      "head": { 
        "function": 必選,調(diào)用組件名,固定值為"magicwindow", 
        "required": 必選,預(yù)留字段,固定值為"true" 
      }, 
      "body": { 
        "mode": 必選,基礎(chǔ)分屏模式."0":購(gòu)物模式,abilityPairs節(jié)點(diǎn)不生效;"1":自定義模式(包含導(dǎo)航模式), 
        "abilityPairs": [自定義模式下必選,配置從from頁(yè)面到to頁(yè)面的分屏顯示 
          { 
            "from": 自定義模式下必選,AbilityA的包名, 
            "to": 自定義模式下必選,AbilityB的包名, 
          }表示A上啟動(dòng)B,觸發(fā)分屏(A左B右) 
        ], 
        "Abilities": [可選,應(yīng)用Page Ability屬性列表, 
          { 
            "name": 可選,Page Ability包名, 
            "defaultFullScreen": 可選,Page Ability是否支持默認(rèn)以全屏啟動(dòng)."true": 支持;,"false": 不支持 
          }, 
          { 
            "name": 可選,Page Ability包名, 
            "defaultFullScreen": 可選,Page Ability是否支持默認(rèn)以全屏啟動(dòng)."true": 支持;,"false": 不支持 
          } 
        ], 
        "UX": {可選,頁(yè)面UX控制配置 
          "isDraggable": 可選,是否支持分屏窗口拖動(dòng)(僅針對(duì)平板產(chǎn)品生效)."true": 支持;,"false": 不支持(缺省值為false) 
        } 
      } 
    } 
  ] 
}

導(dǎo)航模式

代碼文件

代碼文件結(jié)構(gòu)如下：

【木棉花】輕松玩轉(zhuǎn)平行視界（下）-鴻蒙HarmonyOS技術(shù)社區(qū)

下面只給出部分重點(diǎn)代碼

FirstAbilitySlice.java：

public class FirstAbilitySlice extends AbilitySlice { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_first); 
 
        findComponentById(ResourceTable.Id_btn_yes).setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                getContext().setDisplayOrientation(AbilityInfo.DisplayOrientation.LANDSCAPE);//申請(qǐng)橫屏方向可進(jìn)入全屏顯示狀態(tài) 
            } 
        }); 
 
        findComponentById(ResourceTable.Id_btn_no).setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                getContext().setDisplayOrientation(AbilityInfo.DisplayOrientation. PORTRAIT);//調(diào)用申請(qǐng)豎屏方向即可退出全屏狀態(tài) 
            } 
        }); 
 
        findComponentById(ResourceTable.Id_btn2).setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                Operation operation = new Intent.OperationBuilder() 
                        .withDeviceId("") 
                        .withBundleName(getBundleName()) 
                        .withAbilityName(SecondAbility.class.getName()) 
                        .build(); 
                intent.setOperation(operation); 
                startAbility(intent); 
            } 
        }); 
 
        findComponentById(ResourceTable.Id_btn3).setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                Operation operation = new Intent.OperationBuilder() 
                        .withDeviceId("") 
                        .withBundleName(getBundleName()) 
                        .withAbilityName(ThridAbility.class.getName()) 
                        .build(); 
                intent.setOperation(operation); 
                startAbility(intent); 
            } 
        }); 
 
        findComponentById(ResourceTable.Id_btn_back).setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                terminateAbility(); 
            } 
        }); 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
}

config.json配置文件的module對(duì)象中新增metaData：

"metaData": { 
      "customizeData": [ 
        { 
        "name": "EasyGoClient", 
        "value": "true" 
        } 
      ] 
    }

在src -> main -> resources -> rawfile目錄下增加easygo.json配置文件：

{ 
  "easyGoVersion": "1.0", 
  "client": "com.test.mydemo2", 
  "logicEntities": [ 
    { 
      "head": { 
        "function": "magicwindow", 
        "required": "true" 
      }, 
      "body": { 
        "mode": "1", 
        "abilityPairs": [ 
          { 
            "from": "com.test.mydemo2.NavigationAbility", 
            "to": "*" 
          } 
        ], 
        "Abilities": [ 
          { 
            "name": "com.test.mydemo2.MainAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo2.NavigationAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo2.FirstAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo2.SecondAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo2.ThridAbility", 
            "defaultFullScreen": "false" 
          } 
        ], 
        "UX": { 
          "isDraggable": "true" 
        } 
      } 
    } 
  ] 
}

上述代碼easygo.json配置文件的相關(guān)元素的描述如下：

{ 
  "easyGoVersion":  
  "client":  
  "logicEntities": [ 
    { 
      "head": { 
        "function":  
        "required":  
      }, 
      "body": { 
        "mode":  
        "abilityPairs": [ 
          { 
            "from": 自定義模式下必選,AbilityA的包名, 
            "to": "*"表示任意Page Ability, 
          }表示A上啟動(dòng)任意Page Ability,觸發(fā)分屏(A左任意右) 
        ], 
        "Abilities": [ 
          { 
            "name":  
            "defaultFullScreen":  
          } 
        ], 
        "UX": { 
          "isDraggable":  
        } 
      } 
    } 
  ] 
}

運(yùn)行效果

平板橫屏的運(yùn)行效果如下：

小結(jié)

導(dǎo)航模式是一種系統(tǒng)提供的“分欄”，能幫助用戶在應(yīng)用內(nèi)高效地來回切換。

從上述運(yùn)行效果可以發(fā)現(xiàn)導(dǎo)航模式有三個(gè)特點(diǎn)：

1. 右半屏總是最后一個(gè)窗口。

2. 左邊固定導(dǎo)航主頁(yè)，左點(diǎn)右出，右點(diǎn)右出。

3. 左邊觸發(fā)的返回，左右分屏中的所有界面都將退出;右邊觸發(fā)的返回，右邊回到上一層級(jí)，左邊保持不變。

全屏顯示Page Ability

另外關(guān)于平行視界狀態(tài)下，部分Page Ability希望以全屏來顯示，分別有動(dòng)態(tài)方法和靜態(tài)方法：

動(dòng)態(tài)方法：

全屏顯示：調(diào)用如下接口申請(qǐng)橫屏方向可進(jìn)入全屏顯示狀態(tài)：

getContext().setDisplayOrientation(AbilityInfo.DisplayOrientation.LANDSCAPE);

退出全屏：調(diào)用申請(qǐng)豎屏方向即可退出全屏狀態(tài)：

getContext().setDisplayOrientation(AbilityInfo.DisplayOrientation. PORTRAIT);

靜態(tài)方法：

在easygo.json文件的Abilities屬性中，將Page Ability的defaultFullScreen配置為true，即可實(shí)現(xiàn)Page Ability默認(rèn)以全屏顯示：

{ 
       "name": "com.test.mydemo2.MainAbility", 
       "defaultFullScreen": "true" 
     }

在config.json文件的Abilities屬性中，將Page Ability的orientation配置為landscape(橫屏)，Page Ability會(huì)一直以全屏狀態(tài)顯示：

{ 
        "orientation": "landscape", 
        "visible": true, 
        "name": "com.test.mydemo2.MainAbility", 
        "icon": "$media:icon", 
        "description": "$string:mainability_description", 
        "label": "$string:entry_MainAbility", 
        "type": "page", 
        "launchType": "standard" 
      }

購(gòu)物模式

代碼文件

代碼文件結(jié)構(gòu)如下：

下面只給出部分重點(diǎn)代碼

config.json配置文件的module對(duì)象中新增metaData：

"metaData": { 
      "customizeData": [ 
        { 
        "name": "EasyGoClient", 
        "value": "true" 
        } 
      ] 
    }

在src -> main -> resources -> rawfile目錄下增加easygo.json配置文件：

{ 
  "easyGoVersion": "1.0", 
  "client": "com.test.mydemo3", 
  "logicEntities": [ 
    { 
      "head": { 
        "function": "magicwindow", 
        "required": "true" 
      }, 
      "body": { 
        "mode": "0", 
        "transActivities": [ 
          "com.test.mydemo3.NavigationAbility", 
          "com.test.mydemo3.FirstAbility", 
          "com.test.mydemo3.SecondAbility" 
        ], 
        "Abilities": [ 
          { 
            "name": "com.test.mydemo3.MainAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo3.NavigationAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo3.FirstAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo3.SecondAbility", 
            "defaultFullScreen": "false" 
          }, 
          { 
            "name": "com.test.mydemo3.ThridAbility", 
            "defaultFullScreen": "false" 
          } 
        ], 
        "UX": { 
          "isDraggable": "true", 
          "supportLock": "true" 
        } 
      } 
    } 
  ] 
}

上述代碼easygo.json配置文件的相關(guān)元素的描述如下：

{ 
  "easyGoVersion": 
  "client": 
  "logicEntities": [ 
    { 
      "head": { 
        "function": 
        "required": 
      }, 
      "body": { 
        "mode": 0":購(gòu)物模式, 
        "transActivities": [ 
          過渡頁(yè)面列表 
        ], 
        "Abilities": [ 
          { 
            "name": 
            "defaultFullScreen": 
          } 
        ], 
        "UX": { 
          "isDraggable": 
          "supportLock":, 可選,是否支持應(yīng)用內(nèi)用戶鎖定功能."true": 支持鎖定,;,"false": 不支持(缺省值為false) 
        } 
      } 
    } 
  ] 
}

運(yùn)行效果

平板橫屏的運(yùn)行效果如下：

小結(jié)

購(gòu)物模式能有效解決寬屏設(shè)備上的顯示適配問題，適用于購(gòu)物類的場(chǎng)景和應(yīng)用。

從上述運(yùn)行效果可以發(fā)現(xiàn)購(gòu)物模式有三個(gè)特點(diǎn)：

1. 左點(diǎn)右出。

2. 右邊點(diǎn)擊啟動(dòng)新的窗口，把當(dāng)前內(nèi)容往左推，新的內(nèi)容在右邊展示。

3. 左邊觸發(fā)的返回，左右側(cè)窗口內(nèi)的界面都將退出上一層級(jí)或首頁(yè);右邊觸發(fā)的返回，右側(cè)窗口回到上一層級(jí)，不影響左邊的頁(yè)面。

后臺(tái)鎖定

應(yīng)用啟用平行視界后，特定的適合多任務(wù)并行/有多任務(wù)并行需求的場(chǎng)景，可使用后臺(tái)鎖定。

可通過以下進(jìn)行配置：

"UX": { 
        "supportLock": "true" 
      }

雙窗口顯示狀態(tài)會(huì)顯示鎖定按鈕，用戶點(diǎn)擊后可以進(jìn)行鎖定和解鎖操作;鎖定后，左右窗口不再關(guān)聯(lián)，即左側(cè)打開新窗口在左側(cè)顯示，右側(cè)打開新窗口在右側(cè)顯示。例如普通購(gòu)物模式下，點(diǎn)擊右側(cè)屏幕的內(nèi)容，會(huì)把右側(cè)內(nèi)容向左推;直播場(chǎng)景鎖定后，直播固定在左側(cè)顯示，點(diǎn)擊右側(cè)內(nèi)容，更換右側(cè)的顯示內(nèi)容。

其它

{ 
  "easyGoVersion": , 
  "client": , 
  "logicEntities": [ 
    { 
      "head": { 
        "function": , 
        "required": 
      }, 
      "body": { 
        "mode": "0", 
        "abilityPairs": [ 
          { 
            "from": , 
            "to": 
          } 
        ], 
        "defaultDualAbilities": {可選,應(yīng)用冷啟動(dòng)默認(rèn)打開首頁(yè)雙屏配置 
          "mainPages": Page Ability包名,冷啟動(dòng)應(yīng)用打開此頁(yè)面時(shí),系統(tǒng)在左屏自動(dòng)啟動(dòng)的頁(yè)面, 
          "relatedPage": Page Ability包名,冷啟動(dòng)應(yīng)用打開此頁(yè)面時(shí),系統(tǒng)在右屏自動(dòng)啟動(dòng)的頁(yè)面 
        }, 
        "transActivities": [ 
 
        ], 
        "Abilities": [ 
          { 
            "name": , 
            "defaultFullScreen": 
          } 
        ], 
        "UX": { 
          "supportRotationUxCompat": 可選,是否開啟窗口縮放,用于提高轉(zhuǎn)屏應(yīng)用UX顯示兼容性(僅針對(duì)平板產(chǎn)品生效)."true": 支持;"false": 不支持(缺省值為false), 
          "isDraggable": , 
          "supportVideoFullscreen": 可選,是否支持視頻全屏(僅針對(duì)平板產(chǎn)品生效)."true": 支持;"false": 不支持(缺省值為false), 
          "supportDraggingToFullScreen": 可選,是否支持在分屏和全屏之間拖動(dòng)切換."ALL": 所有設(shè)備上支持此功能;"PAD": 僅平板產(chǎn)品上支持此功能;,"FOLD": 僅折疊屏上支持此功能, 
          "supportLock": 
        } 
      } 
    } 
  ] 
}