HarmonyOS 分布式新聞分享
1. 介紹
HarmonyOS支持應用以Ability為單位進行部署，Ability可以分為FA(Feature Ability)和PA(Particle Ability)兩種類型，本篇Codelab將會使用到Page Ability以及Service Ability來進行開發，其中Page Ability是FA唯一支持的模板，用于提供與用戶交互的能力，Service Ability是PA(Particle Ability)的一種，用于提供后臺運行任務的能力。除此之外，您還將使用到HarmonyOS中的常用控件如：ListContainer，Image等，以及跨設備拉起FA的能力來共同實現一個基于分布式的HarmonyOS簡易新聞客戶端。
最終效果預覽
我們最終會構建一個簡易的HarmonyOS新聞客戶端。應用包含兩級頁面，分別是主頁面和詳情頁面，兩個頁面都展示了豐富的HarmonyOS組件，其中詳情頁的實現邏輯中還展示了如何通過調用相應接口，實現跨設備拉起FA。本篇Codelab我們將會一起完成這個客戶端，其中包括：
1.頂部ListContainer以及新聞列表ListContainer
2.每條新聞的文本框以及圖像
3.布局及頁面跳轉
4.設備發現以及跨設備拉起FA
2. 搭建HarmonyOS環境
安裝DevEco Studio，詳情請參考DevEco Studio下載。
設置DevEco Studio開發環境，DevEco Studio開發環境需要依賴于網絡環境，需要連接上網絡才能確保工具的正常使用，可以根據如下兩種情況來配置開發環境：
如果可以直接訪問Internet，只需進行下載HarmonyOS SDK操作。
如果網絡不能直接訪問Internet，需要通過代理服務器才可以訪問，請參考配置開發環境。
說明：
如需要在手機中運行程序，則需要提前申請證書，如使用模擬器可忽略。
你可以通過如下設備完成Codelab：
開啟開發者模式的HarmonyOS真機
DevEco Studio中的手機模擬器(模擬器暫不支持分布式調試)
3. 代碼結構解讀
本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在參考中提供下載方式，接下來我們會用一小節來講解整個工程的代碼結構：
- INewsDemoIDL.idl：存放在entry\src\main\idl\com\huawei\newsdemo目錄下，接口中定義了tranShare方法用來實現不同設備之間的通信。
- bean：NewsInfo封裝了新聞信息，NewsType封裝了新聞類型。
- provider：DevicesListProvider，NewsListProvider，NewsTypeProvider，分別為設備列表，主頁新聞列表以及新聞類型的provider，主要作用為高效傳遞和使用相關數據。
- slice：NewsListAbilitySlice，NewsDetailAbilitySlice分別為進入應用的主頁面和詳情頁面，同時里面也展現了我們大部分的邏輯實現。
- utils：存放所有封裝好的公共方法，如CommonUtils，DialogUtils等。
- NewsAbility：動態權限的申請以及頁面路由信息處理。
- SharedService：供遠端連接的Service Ability。
- manager：該目錄下的文件為INewsDemoIDL.idl在編譯時自行生成，初始生成位置為entry\build\generated\source\idl\com\huawei\newsdemo。
- resources：存放工程使用到的資源文件，其中resources\base\layout下存放xml布局文件;resources\base\media下存放圖片資源;resources\rawfile下存放應用使用的新聞數據json文件。
- config.json：配置文件
4. 添加主頁頂部新聞類型
首先為我們的應用添加頂部新聞類型，用于切換不同類別的新聞，我們會使用到ListContainer控件，有關ListContainer的更多知識，可以參考HarmonyOS JAVA通用組件。
首先需要在布局文件中對控件進行聲明，在resources\base\layout\news_list_layout.xml布局文件中有如下代碼：
- <ListContainer
- ohos:id="$+id:selector_list"
- ohos:width="match_parent"
- ohos:height="40vp"
- ohos:orientation="horizontal"
- />
此外我們還定義了selectorListContainer變量進行關聯，在NewsListAbilitySlice.java的initView()方法中有如下代碼：
- selectorListContainer = (ListContainer) findComponentById(ResourceTable.Id_selector_list);
添加監聽
在切換不同類別新聞的時候，下面展示的新聞列表項會跟隨切換，所以我們需要為這個ListContainer設置一個監聽，在NewsListAbilitySlice.java的initListener()方法中添加：
- selectorListContainer.setItemClickedListener(
- (listContainer, component, position, id) -> {
- // 設置選中后的放大效果
- setCategorizationFocus(false);
- selectText = (Text) component.findComponentById(ResourceTable.Id_news_type_text);
- setCategorizationFocus(true);
- newsDataList.clear();
- for (NewsInfo mTotalNewsData : totalNewsDataList) {
- if (selectText.getText().equals(mTotalNewsData.getType()) || id == 0) {
- newsDataList.add(mTotalNewsData);
- }
- }
- updateListView();
- });
聲明NewsTypeProvider
為了方便我們的應用更加高效和便捷的使用數據，我們將應用中用到的新聞數據事先預置在resources/rawfile目錄下的兩個json文件中，此外我們還聲明了一些Provider，便于數據的獲取和傳遞，其中獲取新聞類別的NewsTypeProvider如下：
- @Override
- public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
- ViewHolder viewHolder;
- Component temp = component;
- if (temp == null) {
- temp = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_type_layout, null, false);
- // 將所有子組件通過ViewHolder綁定到列表項實例
- viewHolder = new ViewHolder();
- viewHolder.title = (Text) temp.findComponentById(ResourceTable.Id_news_type_text);
- component.setTag(viewHolder);
- } else {
- viewHolder = (ViewHolder) temp.getTag();
- }
- viewHolder.title.setText(mNewsTypeList.get(position).getName());
- return temp;
- }
我們定義了initData方法來解析json文件中的新聞數據，并將這些數據傳遞給provider，在NewsListAbilitySlice.java的initData()添加如下代碼：
- private void initData() {
- Gson gson = new Gson();
- List<NewsType> newsTypeList =
- gson.fromJson(
- CommonUtils.getStringFromJsonPath(this, "entry/resources/rawfile/news_type_datas.json"),
- new TypeToken<List<NewsType>>(){ }.getType());
- newsTypeProvider = new NewsTypeProvider(newsTypeList, this);
- }
添加切換效果
在切換不同類別新聞的時候，增加了一個放大效果，在setCategorizationFocus()中添加如下代碼：
- private void setCategorizationFocus(boolean isFocus) {
- if (selectText == null) {
- return;
- }
- if (isFocus) {
- selectText.setTextColor(
- new Color(CommonUtils.getColor(NewsListAbilitySlice.this, ResourceTable.Color_news_type_text_on)));
- selectText.setScaleX(FOCUS_TEXT_SIZE);
- selectText.setScaleY(FRCUS_TEXT_SIZE);
- } else {
- selectText.setTextColor(
- new Color(CommonUtils.getColor(NewsListAbilitySlice.this, ResourceTable.Color_news_type_text_off)));
- selectText.setScaleX(UNFOCUS_TEXT_SIZE);
- selectText.setScaleY(UNFOCUS_TEXT_SIZE);
- }
所以在進行類別切換的時候，將會得到如下效果：
5. 添加主頁新聞列表項
新聞列表項布局
主頁面的布局除了有上方的頂部欄，還由下方的新聞列表項構成，整個新聞列表項是一個ListContainer，同樣我們先來看看在new_list_layout.xml中是如何定義的：
- <ListContainer
- ohos:id="$+id:news_container"
- ohos:width="match_parent"
- ohos:height="match_parent"/>
整個新聞列表項由多個新聞item構成，每個item又由標題和圖片構成，每個item在item_news_layout.xml布局中是這樣定義的：
- <DirectionalLayout
- ohos:height="109.5vp"
- ohos:width="match_parent"
- ohos:orientation="horizontal"
- ohos:padding="10vp">
- <Text
- ohos:id="$+id:item_news_title"
- ohos:height="match_content"
- ohos:width="0vp"
- ohos:max_text_lines="3"
- ohos:multiple_lines="true"
- ohos:right_padding="20vp"
- ohos:text_size="18vp"
- ohos:weight="3"/>
- <Image
- ohos:id="$+id:item_news_image"
- ohos:height="match_parent"
- ohos:width="0vp"
- ohos:scale_mode="stretch"
- ohos:weight="2"/>
- </DirectionalLayout>
聲明NewsListProvider
和頂部新聞類型一樣，每個新聞item中的title和image也是利用provider傳遞的，在NewsListProvider.java中有如下代碼：
- @Override
- public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
- ViewHolder viewHolder;
- Component temp = component;
- if (temp == null) {
- component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_layout, null, false);
- // 將所有子組件通過ViewHolder綁定到列表項實例
- viewHolder = new ViewHolder();
- viewHolder.title = (Text) temp.findComponentById(ResourceTable.Id_item_news_title);
- viewHolder.image = (Image) temp.findComponentById(ResourceTable.Id_item_news_image);
- temp.setTag(viewHolder);
- } else {
- viewHolder = (ViewHolder) temp.getTag();
- }
- viewHolder.title.setText(newsInfoList.get(i).getTitle());
- viewHolder.image.setPixelMap(CommonUtils.getPixelMapFromPath(context, newsInfoList.get(i).getImgUrl()));
- return temp;
- }
同樣，newsListProvider的數據也是在initData的時候進行賦值的，所以需要在NewsListAbilitySlice的initData()中添加：
- totalNewsDataList =
- gson.fromJson(
- CommonUtils.getStringFromJsonPath(this, "entry/resources/rawfile/news_datas.json"),
- new TypeToken<List<NewsInfo>>(){ }.getType());
- newsDataList = new ArrayList<>();
- newsDataList.addAll(totalNewsDataList);
- newsListProvider = new NewsListProvider(newsDataList, this);
到此我們完成了數據的加載和解析，接下來是為item添加點擊事件。
添加監聽
我們點擊某個具體新聞item的時，應用會跳轉到全局詳情頁面，這時要為新聞item添加一個監聽，在NewsListAbilitySlice.java的initListener()中添加：
- newsListContainer.setItemClickedListener(
- (listContainer, component, position, id) -> {
- Intent intent = new Intent();
- Operation operation =
- new Intent.OperationBuilder()
- .withBundleName(getBundleName())
- .withAbilityName(NewsAbility.class.getName())
- .withAction("action.detail")
- .build();
- intent.setOperation(operation);
- intent.setParam(NewsDetailAbilitySlice.INTENT_TITLE, newsDataList.get(position).getTitle());
- intent.setParam(NewsDetailAbilitySlice.INTENT_READ, newsDataList.get(position).getReads());
- intent.setParam(NewsDetailAbilitySlice.INTENT_LIKE, newsDataList.get(position).getLikes());
- intent.setParam(NewsDetailAbilitySlice.INTENT_CONTENT, newsDataList.get(position).getContent());
- intent.setParam(NewsDetailAbilitySlice.INTENT_IMAGE, newsDataList.get(position).getImgUrl());
- startAbility(intent);
- });
這里的startAbility()是我們頁面跳轉的關鍵方法，參數intent里面存放了要跳轉的bundle name，ability name，詳情頁面的title，imgurl等重要參數。
6. 詳情頁頁面布局
新聞詳情頁的布局相比于新聞主頁稍微有些復雜，整體由DependentLayout布局嵌套DirectionalLayout布局、ScrollView和其他控件構成，我們把整體頁面分為頂部，底部，和中部。并在resources\base\layout\new_detail_laylout.xml中實現詳情頁的布局。
頂部
頂部是由DirectionalLayout加上Text組件構成，分別對應了左側的圖標和NewsDemo以及右側的reads和likes，實現效果及布局部分代碼如下：
- <DirectionalLayout
- ohos:width="match_parent"
- ohos:height="match_content"
- ohos:alignment="vertical_center"
- ohos:orientation="horizontal">
- <Text
- ohos:id="$+id:title_icon"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:weight="1"
- ohos:text="NewsDemo"
- ohos:text_size="20fp"/>
- <Text
- ohos:id="$+id:read_num"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="10fp"
- ohos:right_margin="10vp"/>
- <Text
- ohos:id="$+id:like_num"
- ohos:width="match_content"
- ohos:height="match_content"
- ohos:text_size="10fp"/>
- </DirectionalLayout>
中部
頁面的中間部分由新聞標題Text，縮略圖Image，新聞內容Text構成，實現效果及布局部分代碼如下：
- <Text
- ohos:id="$+id:title_text"
- ohos:width="match_parent"
- ohos:height="match_content"
- ohos:text_size="18fp"
- ohos:max_text_lines="4"
- ohos:multiple_lines="true"
- ohos:text_color="#000000"
- ohos:top_margin="10vp"/>
- <Image
- ohos:id="$+id:image_content"
- ohos:width="match_parent"
- ohos:scale_mode="stretch"
- ohos:height="300vp"
- ohos:top_margin="10vp"/>
- <Text
- ohos:id="$+id:title_content"
- ohos:width="match_parent"
- ohos:height="match_content"
- ohos:multiple_lines="true"
- ohos:text_color="#708090"
- ohos:text_size="16vp"
- ohos:text_alignment="center_horizontal"
- ohos:top_margin="5vp"/>
底部
頁面的底部由DirectionalLayout加上TextField和Image控件構成，對應輸入評論和幾個按鈕，具體效果和部分布局代碼如下：
- <DirectionalLayout
- ohos:id="$+id:bottom_layout"
- ohos:align_parent_bottom="true"
- ohos:width="match_parent"
- ohos:height="50vp"
- ohos:orientation="horizontal"
- ohos:background_element="#ffffff"
- ohos:alignment="vertical_center"
- ohos:left_padding="20vp"
- ohos:right_padding="20vp"
- >
- <TextField
- ohos:id="$+id:text_file"
- ohos:width="160vp"
- ohos:height="30vp"
- ohos:left_padding="5vp"
- ohos:right_padding="10vp"
- ohos:text_alignment="vertical_center"
- ohos:text_size="15vp"
- ohos:hint="Enter a comment."
- ohos:background_element="$graphic:corner_bg_comment"/>
- <Image
- ohos:id="$+id:button1"
- ohos:width="20vp"
- ohos:height="20vp"
- ohos:image_src="$media:message_icon"
- ohos:scale_mode="stretch"
- ohos:left_margin="20vp"/>
- <Image
- ohos:id="$+id:button2"
- ohos:width="20vp"
- ohos:height="20vp"
- ohos:image_src="$media:collect_icon"
- ohos:scale_mode="stretch"
- ohos:left_margin="20vp"/>
- <Image
- ohos:id="$+id:button3"
- ohos:width="20vp"
- ohos:height="20vp"
- ohos:image_src="$media:like_icon"
- ohos:scale_mode="stretch"
- ohos:left_margin="20vp"/>
- <Image
- ohos:id="$+id:button4"
- ohos:width="20vp"
- ohos:height="20vp"
- ohos:image_src="$media:share_icon"
- ohos:scale_mode="stretch"
- ohos:left_margin="20vp"/>
- </DirectionalLayout>
7. 詳情頁數據初始化
接受來自NewsListAbilitySlice頁面的數據
我們在添加新聞列表項那一節中說明了新聞頁面的title，imgurl等重要參數是如何存放的，現在我們一起看下在詳情頁是如何獲取的。在NewsDetailAbilitySlice.java的onStart()中有如下代碼：
- public void onStart(Intent intent) {
- super.onStart(intent);
- super.setUIContent(ResourceTable.Layout_news_detail_layout);
- reads = intent.getStringParam(INTENT_READ);
- likes = intent.getStringParam(INTENT_LIKE);
- title = intent.getStringParam(INTENT_TITLE);
- content = intent.getStringParam(INTENT_CONTENT);
- image = intent.getStringParam(INTENT_IMAGE);
- }
之前存放在intent中的參數，現在在onStart()中逐一進行取出。
布局和控件的初始化
除了需要聲明xml來實現布局以外，還需要在NewsDetailAbilitySlice.java的onStart()中添加initView()方法進行初始化：
- private void initView() {
- parentLayout = (DependentLayout) findComponentById(ResourceTable.Id_parent_layout);
- commentFocus = (TextField) findComponentById(ResourceTable.Id_text_file);
- iconShared = (Image) findComponentById(ResourceTable.Id_button4);
- Text newsRead = (Text) findComponentById(ResourceTable.Id_read_num);
- Text newsLike = (Text) findComponentById(ResourceTable.Id_like_num);
- Text newsTitle = (Text) findComponentById(ResourceTable.Id_title_text);
- Text newsContent = (Text) findComponentById(ResourceTable.Id_title_content);
- Image newsImage = (Image) findComponentById(ResourceTable.Id_image_content);
- newsRead.setText("reads: " + reads);
- newsLike.setText("likes: " + likes);
- newsTitle.setText("Original title: " + title);
- newsContent.setText(content);
- newsImage.setPixelMap(CommonUtils.getPixelMapFromPath(this, image));
- }
添加監聽
我們在點擊頁面底部右下角的分享按鈕的時候，會進行設備發現操作，并將發現的設備列表進行展示，此處我們設置了兩個監聽，在NewsDetailAbilitySlice.java的onStart()中添加initListener()：
- private void initListener() {
- parentLayout.setTouchEventListener(
- (component, touchEvent) -> {
- if (commentFocus.hasFocus()) {
- commentFocus.clearFocus();
- }
- return true;
- });
- iconShared.setClickedListener(
- v -> {
- initDevices();
- showDeviceList();
- });
- }
parentLayout的監聽事件用來監聽觸控焦點是否在設備列表Dialog上，iconShared的監聽事件用來監聽分享按鈕被是否被點擊。
8. 設備發現
上一節我們了解到當分享按鈕被點擊的時候會觸發監聽，進行設備發現，那么觸發監聽后，是如何進行設備發現的?
在initListener()中有兩個有關設備發現的方法：initDevices()和showDeviceList()。initDevices()方法調用接口實現設備發現，并將發現到的設備存儲到List中，需要如下代碼實現：
- private void initDevices() {
- if (devices.size() > 0) {
- devices.clear();
- }
- List<DeviceInfo> deviceInfos =
- DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);
- devices.addAll(deviceInfos);
- }
發現到的設備，通過Dialog進行顯示，您可以選擇一個目標設備進行跨設備流轉，需要在NewsDetailAbilitySlice.java的showDeviceList()中添加如下代碼：
- private void showDeviceList() {
- // 設備列表dialog
- dialog = new CommonDialog(NewsDetailAbilitySlice.this);
- dialog.setAutoClosable(true);
- dialog.setTitleText("HarmonyOS devices");
- dialog.setSize(DIALOG_SIZE_WIDTH, DIALOG_SIZE_HEIGHT);
- ListContainer devicesListContainer = new ListContainer(getContext());
- DevicesListAdapter devicesListProvider = new DevicesListProvider(devices, this);
- devicesListContainer.setItemProvider(devicesListAdapter);
- devicesListContainer.setItemClickedListener(
- (listContainer, component, position, id) -> {
- dialog.destroy()
- // 跨設備拉起FA
- startAbilityFA(devices.get(position).getDeviceId());
- });
- devicesListAdapter.notifyDataChanged();
- dialog.setContentCustomComponent(devicesListContainer);
- dialog.show();
- }
當我們選擇某個設備的時候，被選擇的設備會拉起指定的FA頁面，被拉起的FA頁面會和發起請求的那一端保持一致。
9. 跨設備協同
連接Service Ability
那么跨設備協同又是如何實現的?發現的設備列表也是通過一個ListContainer來展示的，設備列表也有對應的xml和變量聲明，這里不再贅述。對于每一個設備item，我們添加了監聽用來進行跨設備拉起FA，需要在NewsDetailAbilitySlice的showDeviceList()中添加startAlibityFA()方法，具體代碼如下：
- private void startAbilityFA(StringdevicesId) {
- Intent intent = new Intent();
- Operation operation =
- new Intent.OperationBuilder()
- .withDeviceId(devicesId)
- .withBundleName(getBundleName())
- .withAbilityName(SharedService.class.getName())
- // 該FLAG用于分布式跨設備場景
- .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE)
- .build();
- intent.setOperation(operation);
- boolean connectFlag =
- // 連接遠端 Service Ability
- connectAbility(
- intent,
- new IAbilityConnection() {
- @Override
- public void onAbilityConnectDone(
- ElementName elementName, IRemoteObject iRemoteObject, int i) {
- INewsDemoIDL sharedManager = NewsDemoIDLStub.asInterface(iRemoteObject);
- try {
- sharedManager.tranShare(title, reads, likes, content, image);
- } catch (RemoteException e) {
- LogUtil.i(TAG, "connect successful,but have remote exception");
- }
- }
- @Override
- public void onAbilityDisconnectDone(ElementName elementName, int i) {
- disconnectAbility(this);
- }
- });
- DialogUtil.toast(
- this, connectFlag ? "Sharing succeeded!" : "Sharing failed. Please try again later.", WAIT_TIME);
- }
方法中我們為intent設置了bundlename，abilityname，devicesId等參數，通過connectAbility方法實現與遠端Service Ability進行連接，連接成功后，會在onAbilityConnectDone中調用tranShare方法將對端需要的數據傳遞過去。
遠端Service Ability的定義
本端通過connectAbility連接遠端的Service Ability，那么遠端的Service Ability又是如何定義的?需要在SharedService.java中添加tranShare()方法，代碼如下：
- public void tranShare(String title, String reads, String likes, String content, String image) {
- Intent intent = new Intent();
- Operation operation =
- new Intent.OperationBuilder()
- .withBundleName(getBundleName())
- .withAbilityName(NewsAbility.class.getName())
- .withAction("action.detail")
- .build();
- intent.setOperation(operation);
- intent.setParam(NewsDetailAbilitySlice.INTENT_TITLE, title);
- intent.setParam(NewsDetailAbilitySlice.INTENT_READ, reads);
- intent.setParam(NewsDetailAbilitySlice.INTENT_LIKE, likes);
- intent.setParam(NewsDetailAbilitySlice.INTENT_CONTENT, content);
- intent.setParam(NewsDetailAbilitySlice.INTENT_IMAGE, image);
- startAbility(intent);
說明：
以上代碼僅demo演示參考使用
這樣便通過startAbility方法拉起了指定的FA，并將intent攜帶的參數一并傳遞過去。
—-結束
當前實現遠程啟動FA，需要至少兩個設備處于同一個分布式網絡中，可以通過操作如下配置實現：
所有設備接入同一網絡，
所有設備登陸相同華為賬號，
所有設備上開啟"設置->更多連接->多設備協同 "
10. 回顧和總結
在本篇Codelab中我們介紹了應用的主頁面和詳情頁，在主頁面可以通過頂部的新聞類型切換不同類別的新聞，同時下面整個新聞列表項也會跟隨切換。點擊下方某個具體新聞item的時候，會進行跳轉到新聞詳情頁面;在新聞詳情頁可以上下滑動查看新聞，并且點擊下方分享按鈕可以實現FA的跨設備協同，整體效果如下圖1和圖2：
11. 恭喜你
目前你已經成功完成了Codelab并且學到了：
如何使用ListContainer等常用控件
如何進行布局編寫及頁面跳轉
如何進行設備發現以及FA的跨設備協同
12. 參考
