HarmonyOS服務卡片—殘奧會卡片
引言
2021年7月23日，東京奧運會開幕，中國國歌響徹東京，最終拿下38枚金牌、88枚獎牌。
2021年8月24日，東京殘奧會開幕，中國殘疾運動員出征東京，精彩正在繼續…
需求分析
奧運會是國民最關注的體育賽事，無論是穩扎穩打的乒乓球，還是獨占鰲頭的跳水，我們對體育賽事和參賽選手都如數家珍，然而十幾天后的殘奧會卻鮮為人知。本APP旨在為用戶打造一款能夠快速了解殘奧會動態和相關知識的應用，讓更多人關注到殘奧會，關注這群同樣為國家爭取榮譽的運動員們。
主要功能介紹
長按殘奧會服務卡片應用，點擊服務卡片選項，即可顯示已開發的服務卡片。根據三種不同規格尺寸的服務卡片，可以分別查看殘奧會獎牌榜、殘奧會賽事、以及殘奧會的中國運動員信息。具體如下：
1、服務卡片(2×2)
2×2的卡片樣式為東京殘奧會會標，效果如下圖1所示：
圖1 2×2卡片樣式
點擊該卡片即可跳轉至獎牌榜頁面，查看各國獎牌數量。如圖2所示：
圖2 獎牌榜
2、服務卡片(2×4)
在2×4的卡片中，左邊對東京殘奧會吉祥物進行展示;右邊選取了四個東京殘奧會賽事圖片進行展示，效果如圖3所示：
圖3 2×4卡片樣式
點擊卡片即可進入應用的主界面查看具體項目，主界面如圖4所示：
圖4 主界面
點擊主界面中的任意一個賽事圖標即可進入賽事的詳情界面，如圖5所示：
圖5 賽事項目簡介
3、服務卡片(4×4)
在4×4的卡片中，上方展示的是東京殘奧會吉祥物，下方展示的是我們選取的參加本次殘奧會的中國運動員圖片。點擊卡片即可進入主界面查看各位中國運動員的詳細信息。
圖6 4×4卡片樣式
技術實現
一.創建工程
打開DevEco Studio，點擊File→New→New Project;選擇Empty Ability(Java);點擊”Next“按鈕;即可進入項目配置界面。在此界面中，Project Name項目名稱可自定義，此處命名為ParalympicGamesCard;Project Type項目類型選擇應用Application;Package Name包名會根據前面的信息自動生成;Save Location存儲路徑可自行設置;Compatible API Version可兼容的API版本此處選擇版本4;Device Type設備類型選擇Phone。在完成配置信息設置后，點擊”Finish“按鈕，即可成功創建項目。具體配置信息可參考圖7。
圖7 配置項目
二.殘奧會服務卡片實現
1.卡片生成
1)在項目包名上點擊右鍵，選擇New→Service Widget。
圖8 創建卡片
2)選擇服務卡片種類，用戶可以選擇Template下任意一種模板，選中后點擊Next。
圖9 選擇模板
3)配置服務卡片信息。其中Service Widget Name卡片名稱可以自定義;Description詳細信息用戶也可以自定義;Ability默認會使用MainAbility;Type類型可以根據實際開發情況選擇JAVA或者JS語言;Support Dimensions支持的樣式可以勾選后兩個，這樣就可以得到22、24、4*4三種尺寸的服務卡片。點擊”Finish“按鈕即可完成服務卡片的創建。
圖10 配置服務卡片
2.卡片布局
本APP中三種卡片的布局分別在下圖紅框的xml文件中進行配置，文件名的尾數如”2_2“表示的是2*2服務卡片的布局文件，其余兩個尾數分別為”2_4“和”4_4“的xml文件同理。
圖11 xml文件
下面以2*2服務卡片為例講解布局的實現。界面包含一張Image圖片和一個Text文本框，將Text的文字設置為“殘奧會獎牌榜”，并通過height、width、margin等設置兩個控件的高度、寬度、間隔等屬性。
- <DependentLayout
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:id="$+id:layout_2x2"
- ohos:background_element="#FFFFFF"
- ohos:remote="true">
- <Image//用于顯示殘奧會logo
- ohos:height="100vp"
- ohos:width="100vp"
- ohos:image_src="$media:aoyunhui"
- ohos:horizontal_center="true"
- ohos:scale_mode="zoom_start"
- ohos:start_margin="12vp"
- ohos:top_margin="25vp"/>
- <DirectionalLayout
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:align_parent_bottom="true"
- ohos:bottom_margin="15vp"
- ohos:end_margin="15vp"
- ohos:orientation="vertical"
- ohos:start_margin="12vp">
- <Text//用于顯示提示性文字
- ohos:id="$+id:title"
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:text="殘奧會獎牌榜"
- ohos:text_color="#130c0e"
- ohos:text_size="20fp"
- ohos:text_weight="500"
- ohos:top_margin="0vp"
- ohos:truncation_mode="ellipsis_at_end"/>
- </DirectionalLayout>
- </DependentLayout>
3.卡片信息創建、更新、刪除
對卡片進行操作時，需要對創建的卡片信息進行持久化操作，以便再次獲取或更新卡片實例時能夠直接使用，即需要存儲卡片信息。主要采用對象關系型數據庫來實現，需要重寫如下幾個函數：表示創建卡片的回調函數onCreateForm()、表示更新卡片信息的onUpdataForm()、以及表示銷毀卡片和刪除卡片信息onDeleteForm()。卡片需要的存儲信息包括：卡片ID、卡片名稱、卡片尺寸大小(22、24、4*4)，這些回調函數在創建服務卡片時即可自動生成。回調函數代碼如下：
- //創建卡片
- @Override
- protected ProviderFormInfo onCreateForm(Intent intent) {
- HiLog.info(TAG, "onCreateForm");
- long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);
- String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
- int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
- HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);
- FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
- FormController formController = formControllerManager.getController(formId);
- formController = (formController == null) ? formControllerManager.createFormController(formId,
- formName, dimension) : formController;
- if (formController == null) {
- HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName);
- return null;
- }
- return formController.bindFormData();
- }
- //更新卡片
- @Override
- protected void onUpdateForm(long formId) {
- HiLog.info(TAG, "onUpdateForm");
- super.onUpdateForm(formId);
- FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
- FormController formController = formControllerManager.getController(formId);
- formController.updateFormData(formId);
- }
- //刪除卡片
- @Override
- protected void onDeleteForm(long formId) {
- HiLog.info(TAG, "onDeleteForm: formId=" + formId);
- super.onDeleteForm(formId);
- FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
- formControllerManager.deleteFormController(formId);
- }
4.將卡片在桌面上創建快捷方式
下面我們講解如何在桌面上創建三種不同尺寸卡片的快捷方式。
第一步：長按APP圖標，點擊服務卡片。如圖12所示：
圖12 點擊服務卡片
第二步：用戶將喜愛的卡片選擇“添加到桌面”，如圖13所示：
圖13 添加到桌面
第三步：用戶選擇喜歡的卡片添加到桌面上，則桌面會出現對應的服務卡片。如圖14所示：
圖14 添加桌面效果
5.卡片的點擊跳轉
點擊 22服務卡片后默認跳轉至獎牌榜顯示頁面，24服務卡片默認跳轉至主界面，再點擊主界面的各賽事圖標按鈕進入賽事項目詳情頁面。下面詳細介紹一下如何實現上述提到的頁面跳轉功能。
1)AoyunhuiwidgetImpl文件設置
在widght文件下的AoyunhuiwidgetImpl卡片設置文件中，需要重寫bindFormData()方法。通過switch…case…方式控制跳轉的具體指向，當卡片尺寸為22時，跳轉指向的Ability名稱為MainAbility2;當卡片尺寸為24時，跳轉指向的Ability名稱為MainAbility。
圖15AoyunhuiwidgetImpl文件位置
- @Override
- public ProviderFormInfo bindFormData() {
- ......
- switch (dimension){//用于控制跳轉的具體指向
- case DEFAULT_DIMENSION_2X2:
- abilityName= "MainAbility2";//跳轉指向頁面的Ability名稱
- componentProvider=new ComponentProvider();//2*2尺寸
- componentProvider.setIntentAgent(ResourceTable.Id_layout_2x2,startAbilityIntentAgent(abilityName));
- break;
- case DIMENSION_2X4:
- abilityName="MainAbility";//跳轉指向頁面的Ability名稱
- componentProvider=new ComponentProvider();//2*4尺寸 componentProvider.setIntentAgent(ResourceTable.Id_layout_2x4,startAbilityIntentAgent(abilityName));
- break;
- }
2)MainAbility2Slice文件設置
在MainAbility2Slice文件中，調用webview()方法，將url地址作為入參傳入方法中，完成設置需要跳轉的獎牌榜網頁url地址，實現點擊2*2卡片后跳轉至獎牌榜顯示頁面的效果。
- public void onStart(Intent intent) {
- ...
- super.setUIContent(ResourceTable.Layout_ability_main2);
- String url="https://www.baidu.com/s?ie=utf-8&fr=bks0000&wd=%E5%A5%A5%E8%BF%90%E4%BC%9A%E5%A5%96%E7%89%8C%E6%A6%9C";//跳轉至獎牌榜
- ...
- webview(url);
- }
3)MainAbilitySlice文件設置
第一步：主界面布局
APP的主界面布局定義在ability_main.xml文件中，界面包含7個Image圖片和6個Text文本框。其中，7個Image圖片包括一個首頁裝飾圖和六個賽事項目圖標;6個Text文本框用于顯示賽事項目的名稱。在設置好各控件的相關屬性之后，通過setUIContent()方法將ability_main.xml文件設置為APP的主界面布局。代碼如下，布局效果可參考圖16。
- super.setUIContent(ResourceTable.Layout_ability_main);
圖16 主界面布局
第二步：主界面跳轉至賽事項目詳情界面
在MainAbilitySlice文件的onStart()方法中，通過findComponentById()的方法，實現上面1)AoyunhuiwidgetImpl文件設置小節中提到的賽事項目的定位。以舉重項目為例，在主界面中，獲取“舉重”項目的圖片控件，并為其設置onClick()點擊跳轉事件，將跳轉指向的Ability名稱withAbilityName()設置為舉重頁面的Ability，即WeightliftingAbility，實現點擊舉重圖片后跳轉至舉重項目詳情頁面的效果，具體代碼如下：
- public void onStart(Intent intent) {
- ...
- findComponentById(ResourceTable.Id_juzhong).setClickedListener(new Component.ClickedListener() {//獲取舉重項目的圖片控件
- @Override
- public void onClick(Component component) {//為舉重圖片設置點擊事件
- Intent secondIntent = new Intent();
- secondIntent.setOperation(new Intent.OperationBuilder()
- .withBundleName("com.huawei.ParalympicGamesCard")
- .withAbilityName("com.huawei.ParalympicGamesCard.WeightliftingAbility")//將跳轉指向的Ability名稱設置為舉重的Ability
- .build());
- startAbility(secondIntent);
- }
- });
第三步：舉重項目詳情界面WeightliftingAbilitySlice
WeightliftingAbilitySlice舉重項目詳情界面實現原理和第一步主界面實現原理相似。在ability_weightlifting.xml文件中界面包含Image圖片和Text文本框控件，其中圖片用來存放舉重比賽照片，Text文字用來存放舉重項目的文字介紹。在完成設置各控件屬性后，通過setUIContent()方法將ability_weightlifting.xml文件設置為舉重項目詳情界面布局。舉重項目詳情界面效果可參考圖17。
- super.setUIContent(ResourceTable.Layout_ability_weightlifting);
圖17 舉重項目詳情界面
