# 前言
對(duì)于教育類(lèi)應(yīng)用程序來(lái)說(shuō),一般都有課程分類(lèi),包括我們程序員學(xué)習(xí)技術(shù),也簡(jiǎn)單。簡(jiǎn)單的說(shuō),一個(gè)程序員社區(qū),必然有后期技術(shù)分類(lèi),比如有的學(xué)習(xí)Python,有的學(xué)習(xí)Java鴻蒙技術(shù),有的對(duì)OpenCV動(dòng)物。+
而教育類(lèi)應(yīng)用程序,如果能夠通過(guò)鴻蒙的非標(biāo)準(zhǔn)功能,將課程選擇選擇顯眼的地方,那么用戶(hù)就可以很容易地獲取自己的知識(shí)社區(qū)進(jìn)行學(xué)習(xí),非常的方便。
所以,掌握好鴻蒙卡片功能,能夠在細(xì)微的體驗(yàn)上,讓用戶(hù)感到貼心。下面,來(lái)我們講解這款教育類(lèi)專(zhuān)欄分類(lèi)照片,如何通過(guò)卡片進(jìn)行直達(dá)。
# 創(chuàng)建一個(gè)Java項(xiàng)目與卡片
首先,我們需要?jiǎng)?chuàng)建一個(gè)純Java項(xiàng)目。
接著,在生成的Java鴻蒙項(xiàng)目中,點(diǎn)擊entry-src右鍵創(chuàng)建Service Widget一個(gè)2*4的卡片布局:
創(chuàng)建完成之后,項(xiàng)目下面會(huì)生成一個(gè)java-widget文件,以及js卡片布局文件。
這樣你運(yùn)行項(xiàng)目,默認(rèn)會(huì)顯示鴻蒙開(kāi)發(fā)工具提供給你的2*4布局卡片。但是我們需要將卡片的功能換成技術(shù)社區(qū)的直接跳轉(zhuǎn),接下來(lái),我們來(lái)構(gòu)建卡片。
# 完成卡片布局
我們的整體布局并沒(méi)有變,但是后面的圖片以及前面的文字都發(fā)生了變化,而js文件下,有一個(gè)hml文件,這是一個(gè)類(lèi)html語(yǔ)法的文件,我們只需要改變字符串字符串以及圖片即可,代碼如下(index.hml):
《div class=“div_basic_container”》
《stack class=“main_sub_container” onclick=“routerEvent”》 《image class=“item_image” src=“/common/homepage.png”》 《/image》
《div class=“div_text_container”》 《text class=“title”》主頁(yè) 《/text》 《/div》 《/stack》
《div class=“first_sub_container”》
《div class=“item_first_container” onclick=“routerEvent1”》 《text class=“text_item1”》Python 《/text》 《/div》
《div class=“item_second_container” onclick=“routerEvent2”》 《text class=“text_item2”》OpenCV 《/text》 《/div》 《/div》
《div class=“second_sub_container”》
《div class=“item_first_container” onclick=“routerEvent3”》 《text class=“text_item3”》鴻蒙開(kāi)發(fā) 《/text》 《/div》
《div class=“item_second_container” onclick=“routerEvent4”》 《text class=“text_item4”》量化交易 《/text》 《/div》 《/div》《/div》
接下來(lái),我們需要弄清楚,js卡片布局是如何跳轉(zhuǎn)到Java界面的,我們從上面的js文件發(fā)現(xiàn),還有一個(gè)index.json。沒(méi)錯(cuò),樣式由index.css產(chǎn)生,但跳轉(zhuǎn)以及與用戶(hù)的交互全在index.json文件中,代碼如下(index.json):
{ “data”: { “title”: “HomePage”, “textContent1”: “Python”, “textContent2”: “OpenCV”, “textContent3”: “Harmony”, “textContent4”: “Search” }, “actions”: { “routerEvent”: { “action”: “router”, “abilityName”: “com.liyuanjinglyj.javacarddemo.widget.WidgetAbility”, “params”: { “message”: “{{title}}” } }, “routerEvent1”: { “action”: “router”, “abilityName”: “com.liyuanjinglyj.javacarddemo.widget.WidgetAbility”, “params”: { “message”: “{{textContent1}}” } }, “routerEvent2”: { “action”: “router”, “abilityName”: “com.liyuanjinglyj.javacarddemo.widget.WidgetAbility”, “params”: { “message”: “{{textContent2}}” } }, “routerEvent3”: { “action”: “router”, “abilityName”: “com.liyuanjinglyj.javacarddemo.widget.WidgetAbility”, “params”: { “message”: “{{textContent3}}” } }, “routerEvent4”: { “action”: “router”, “abilityName”: “com.liyuanjinglyj.javacarddemo.widget.WidgetAbility”, “params”: { “message”: “{{textContent4}}” } } }}
如上面代碼所示,action表示這是路由跳轉(zhuǎn),其中,abilityName表示關(guān)聯(lián)的Java卡片生成類(lèi),而params表示傳遞的參數(shù)。當(dāng)然,params并不是界面的跳轉(zhuǎn)參數(shù),而是告訴Java你需要跳轉(zhuǎn)到哪個(gè)界面。
我們來(lái)看看WidgetImpl類(lèi)的實(shí)現(xiàn)代碼:
public class WidgetImpl extends FormController {
@Override public Class《? extends AbilitySlice》 getRoutePageSlice(Intent intent) { HiLog.info(TAG, “set route page slice.”); String param = intent.getStringParam(“params”); ZSONObject zsonObject = ZSONObject.stringToZSON(param); switch (zsonObject.getString(“message”)) { case “HomePage”: return MainAbilitySlice.class; case “Python”: return FunctionPythonSlice.class; case “OpenCV”: return FunctionOpenCVSlice.class; case “Harmony”: return FunctionHarmonySlice.class; case “Search”: return FunctionSearchSlice.class; default: return null; } }}
這里大部分代碼我們都可以忽略,只需要關(guān)心getRoutePageSlice方法即可,可以看到,我們?cè)趇ndex.json中params指定的參數(shù),就是我們需要跳轉(zhuǎn)的Java界面,這里通過(guò)switch尋找我們卡片傳遞的參數(shù),然后跳轉(zhuǎn)到指定的界面。
比如,這里用戶(hù)如果需要學(xué)習(xí)python,那么就會(huì)傳遞python參數(shù),然后選擇FunctionPythonSlice界面進(jìn)行跳轉(zhuǎn)。其他的類(lèi)同。
#實(shí)現(xiàn)卡片跳轉(zhuǎn)界面
對(duì)于App來(lái)說(shuō),不同的界面的社區(qū)往往會(huì)有不同的數(shù)據(jù),而每個(gè)數(shù)據(jù)又是通過(guò)json返回的,那么就會(huì)有不同的json接口提供給我們。
這里,我們來(lái)實(shí)現(xiàn)FunctionPythonSlice,代碼如下:
public class FunctionPythonSlice extends AbilitySlice {
private String url=“https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/python_item.json”; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent((ComponentContainer) LYJUtils.getListContainer(url,this)); }}
這里通過(guò)博主自定義的工具類(lèi)返回一個(gè)ListContainer界面,因?yàn)槊總€(gè)卡片上的功能只是跳轉(zhuǎn)的知識(shí)不同,但數(shù)據(jù)樣式基本一樣。而ListContainer界面的生成代碼如下(LYJUtils):
public class LYJUtils { public static ListContainer getListContainer(String url, AbilitySlice abilitySlice){ ListContainer listContainer=new ListContainer(null); listContainer.setLayoutConfig( new StackLayout.LayoutConfig( ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT )); ZZRHttp.get(url, new ZZRCallBack.CallBackString() { @Override public void onFailure(int code, String errorMessage) {//錯(cuò)誤處理 } @Override public void onResponse(String response) { //http訪問(wèn)成功,此部分內(nèi)容在主線程中工作; HiJson hiJson = new HiJson(response); int counts=hiJson.get(“news_item”).count(); List《InfoItem》 infoItemList=new ArrayList《》(); for(int i=0;i《counts;i++){ InfoItem infoItem=new InfoItem(); infoItem.setTitle(hiJson.get(“news_item”).get(i).value(“title”)); infoItem.setDigest(hiJson.get(“news_item”).get(i).value(“digest”)); infoItem.setUrl(hiJson.get(“news_item”).get(i).value(“url”)); infoItem.setThumb_url(hiJson.get(“news_item”).get(i).value(“thumb_url”)); infoItemList.add(infoItem); } InfoItemListProvider infoItemListProvider=new InfoItemListProvider(infoItemList, abilitySlice); listContainer.setItemProvider(infoItemListProvider); listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() { @Override public void onItemClicked(ListContainer listContainer, Component component, int i, long l) { Intent intent=new Intent(); intent.setParam(“url”,infoItemList.get(i).getUrl()); abilitySlice.present(new WebViewAbilitySlice(),intent); } }); } }); return listContainer; }}
其他卡片功能的界面基本一致,唯有url提供的json接口不一樣。當(dāng)然,這里還涉及ListContainer適配器,代碼如下(InfoItemListProvider):
public class InfoItemListProvider extends BaseItemProvider { private List《InfoItem》 infoItemList=new ArrayList《》(); private AbilitySlice abilitySlice; HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, “TAG”); public InfoItemListProvider(List《InfoItem》 infoItemList,AbilitySlice abilitySlice) { this.infoItemList=infoItemList; this.abilitySlice=abilitySlice; HiLog.error(label,String.valueOf(infoItemList.size())+“11111”); }
@Override public int getCount() { return infoItemList == null ? 0 : infoItemList.size(); }
@Override public Object getItem(int i) { if (infoItemList != null && i 》= 0 && i 《 infoItemList.size()){ return infoItemList.get(i); } return null; }
@Override public long getItemId(int i) { return i; }
@Override public Component getComponent(int i, Component component, ComponentContainer componentContainer) { final Component cpt; if (component == null) { cpt = LayoutScatter.getInstance(this.abilitySlice).parse(ResourceTable.Layout_infoitem_listitem, null, false); } else { cpt = component; } InfoItem infoItem = this.infoItemList.get(i); HiLog.error(label,String.valueOf(i)+“11111”); Text title=(Text)cpt.findComponentById(ResourceTable.Id_infoitem_listitem_title); title.setText(infoItem.getTitle()); Image image=(Image)cpt.findComponentById(ResourceTable.Id_infoitem_listitem_image); new ImageNetWork(this.abilitySlice,image,infoItem.getThumb_url()).start(); return cpt; }}
獲取ListContainer列表的實(shí)體類(lèi)(InfoItem.java)如下所示:
public class InfoItem { String title;//標(biāo)題 String digest;//描述 String url;//文章鏈接 String thumb_url;//文章頭圖鏈接
public InfoItem(String title,String digest,String url,String thumb_url) { this.title=title; this.digest=digest; this.url=url; this.thumb_url=thumb_url; }
public InfoItem() { super(); }
public String getTitle() { return title; }
public void setTitle(String title) { this.title = title; }
public String getDigest() { return digest; }
public void setDigest(String digest) { this.digest = digest; }
public String getUrl() { return url; }
public void setUrl(String url) { this.url = url; }
public String getThumb_url() { return thumb_url; }
public void setThumb_url(String thumb_url) { this.thumb_url = thumb_url; }}
當(dāng)然,這里還涉及列表的樣式(infoitem_listitem.xml):
《DirectionalLayout xmlns:ohos=“http://schemas.huawei.com/res/ohos” ohos:height=“match_content” ohos:width=“match_parent” ohos:margin=“10vp” ohos:alpha=“0.5” ohos:background_element=“$graphic:listitem_backgroud” ohos:orientation=“vertical”》
《Image ohos:id=“$+id:infoitem_listitem_image” ohos:height=“150vp” ohos:width=“match_parent” ohos:scale_mode=“stretch”/》
《Text ohos:id=“$+id:infoitem_listitem_title” ohos:height=“match_content” ohos:width=“match_parent” ohos:text_size=“18vp” ohos:multiple_lines=“true” ohos:text_alignment=“l(fā)eft” ohos:bottom_margin=“5vp” ohos:left_margin=“2vp” ohos:right_margin=“2vp” ohos:top_margin=“5vp” ohos:text_color=“#0000FF”/》
《/DirectionalLayout》
#WebView文章詳情界面
除此之外,我們還要實(shí)現(xiàn)ListContainer的跳轉(zhuǎn)界面。因?yàn)檫@是網(wǎng)站的內(nèi)容,我們只需要通過(guò)WebView進(jìn)行加載即可。(WebViewAbilitySlice)代碼如下:
public class WebViewAbilitySlice extends AbilitySlice { HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x00201, “TAG”); private WebView webView; private static String EXAMPLE_URL; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_web_view); this.webView=(WebView)this.findComponentById(ResourceTable.Id_ability_web_view_webview); this.webView.getWebConfig().setJavaScriptPermit(true); if(intent != null) { EXAMPLE_URL = intent.getStringParam(“url”); this.webView.setWebAgent(new ExampleWebAgent()); this.webView.load(EXAMPLE_URL); } }
private class ExampleWebAgent extends WebAgent { @Override public boolean isNeedLoadUrl(WebView webview, ResourceRequest request) { Uri uri = request.getRequestUrl(); if (EXAMPLE_URL.equals(uri.getDecodedHost())) { // 由WebView通過(guò)默認(rèn)方式處理 return false; }
// 增加開(kāi)發(fā)者自定義邏輯 return super.isNeedLoadUrl(webview, request); } }
@Override public void onActive() { super.onActive(); }
@Override public void onForeground(Intent intent) { super.onForeground(intent); }}
鴻蒙提供給我們的Java WebView組件默認(rèn)是直接跳轉(zhuǎn)到瀏覽器的,為了讓其在App內(nèi)部顯示,我們需要通過(guò)setWebAgent()方法進(jìn)行設(shè)置。
而樣式文件這里就不展示了,就只有一個(gè)WebView組件。
#主頁(yè)TabList與PageSlider聯(lián)動(dòng)
在眾多的App中,我們能看到頂部標(biāo)題欄可以進(jìn)行滑動(dòng)的切換頁(yè)面,而這里我們也來(lái)認(rèn)真實(shí)現(xiàn)卡片跳轉(zhuǎn)的主頁(yè)界面。
(MainAbilitySlice)代碼如下:
public class MainAbilitySlice extends AbilitySlice { HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x00201, “TAG”); private PageSlider pageSlider; private TabList tabList; private String[] tab_str_list = {“推薦”, “Python”, “OpenCV”, “鴻蒙開(kāi)發(fā)”}; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); this.pageSlider = (PageSlider) findComponentById(ResourceTable.Id_ability_main_pageslider); this.pageSlider.setProvider(new MyPageProvider(getData(), this)); this.tabList = (TabList) findComponentById(ResourceTable.Id_ability_main_tablist); for (int i = 0; i 《 tab_str_list.length; i++) { TabList.Tab tab = tabList.new Tab(getContext()); tab.setText(tab_str_list[i]); tab.setLayoutConfig( new StackLayout.LayoutConfig( ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_PARENT )); this.tabList.addTab(tab); if (i == 0) { tab.select(); } } this.tabList.addTabSelectedListener(new TabList.TabSelectedListener() { @Override public void onSelected(TabList.Tab tab) { //當(dāng)某個(gè)Tab從未選中狀態(tài)變?yōu)檫x中狀態(tài)時(shí)的回調(diào) pageSlider.setCurrentPage(tab.getPosition()); }
@Override public void onUnselected(TabList.Tab tab) { //當(dāng)某個(gè)Tab從選中狀態(tài)變?yōu)槲催x中狀態(tài)時(shí)的回調(diào) }
@Override public void onReselected(TabList.Tab tab) { //當(dāng)某個(gè)Tab已處于選中狀態(tài),再次被點(diǎn)擊時(shí)的狀態(tài)回調(diào) } }); pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() { @Override public void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) {
}
@Override public void onPageSlideStateChanged(int state) { }
@Override public void onPageChosen(int itemPos) { tabList.selectTabAt(itemPos); } }); }
private List《String》 getData(){ List《String》 stringList=new ArrayList《》(); stringList.add(“https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/swiper_item.json”); stringList.add(“https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/python_item.json”); stringList.add(“https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/opencv_item.json”); stringList.add(“https://harmony-1300376177.cos.ap-shanghai.myqcloud.com/harmony_item.json”); return stringList; }
主頁(yè)的布局文件(ability_main.xml)代碼如下所示:
《?xml version=“1.0” encoding=“utf-8”?》《DirectionalLayout xmlns:ohos=“http://schemas.huawei.com/res/ohos” ohos:height=“match_parent” ohos:width=“match_parent” ohos:alignment=“center” ohos:orientation=“vertical”》
《TabList ohos:id=“$+id:ability_main_tablist” ohos:height=“match_content” ohos:width=“match_parent” ohos:tab_margin=“12vp” ohos:text_alignment=“center” ohos:orientation=“horizontal” ohos:fixed_mode=“true” ohos:text_size=“20vp” ohos:normal_text_color=“#808080” ohos:selected_text_color=“#000000” ohos:selected_tab_indicator_color=“#FF0000” ohos:selected_tab_indicator_height=“3vp”/》
《PageSlider ohos:id=“$+id:ability_main_pageslider” ohos:height=“match_parent” ohos:width=“match_parent” ohos:layout_alignment=“center”/》
《/DirectionalLayout》
ListContainer需要適配器進(jìn)行適配,PageSlider同樣也是需要,我們需要給PageSlider提供不同的鏈接,然后PageSlider單個(gè)頁(yè)面的ListContainer根據(jù)這些鏈接接口獲取不同的知識(shí)列表。(MyPageProvider)代碼如下:
public class MyPageProvider extends PageSliderProvider { HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x00201, “TAG”); private AbilitySlice abilitySlice; private List《String》 stringList;
public MyPageProvider(List《String》 list,AbilitySlice abilitySlice){ this.stringList=list; this.abilitySlice=abilitySlice; }
@Override public int getCount() { return this.stringList.size(); }
@Override public Object createPageInContainer(ComponentContainer componentContainer, int i) { final String url = this.stringList.get(i); ListContainer listContainer=new ListContainer(null); listContainer.setLayoutConfig( new StackLayout.LayoutConfig( ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT )); ZZRHttp.get(url, new ZZRCallBack.CallBackString() { @Override public void onFailure(int code, String errorMessage) { //錯(cuò)誤處理 } @Override public void onResponse(String response) { //http訪問(wèn)成功,此部分內(nèi)容在主線程中工作; //可以更新UI等操作,但請(qǐng)不要執(zhí)行阻塞操作。 HiJson hiJson = new HiJson(response); int counts=hiJson.get(“news_item”).count(); List《InfoItem》 infoItemList=new ArrayList《》(); for(int i=0;i《counts;i++){ InfoItem infoItem=new InfoItem(); infoItem.setTitle(hiJson.get(“news_item”).get(i).value(“title”)); infoItem.setDigest(hiJson.get(“news_item”).get(i).value(“digest”)); infoItem.setUrl(hiJson.get(“news_item”).get(i).value(“url”)); infoItem.setThumb_url(hiJson.get(“news_item”).get(i).value(“thumb_url”)); infoItemList.add(infoItem); } InfoItemListProvider infoItemListProvider=new InfoItemListProvider(infoItemList, abilitySlice); listContainer.setItemProvider(infoItemListProvider); listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() { @Override public void onItemClicked(ListContainer listContainer, Component component, int i, long l) { Intent intent=new Intent(); intent.setParam(“url”,infoItemList.get(i).getUrl()); abilitySlice.present(new WebViewAbilitySlice(),intent); } }); } }); componentContainer.addComponent(listContainer); return listContainer; }
@Override public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) { componentContainer.removeComponent((Component) o); }
@Override public boolean isPageMatchToObject(Component component, Object o) { return true; }}
到這里,我們的教育類(lèi)App卡片分類(lèi)功能就全部完成了,實(shí)現(xiàn)的效果如頂部視頻所示。
#其他權(quán)限設(shè)置
當(dāng)然,這款A(yù)pp卡片功能要能完美的運(yùn)行,還不能少了部分權(quán)限具體配置文件config.json修改如下所示:
“module”: { “reqPermissions”: [ { “name”: “ohos.permission.INTERNET” }, { “name”: “ohos.permission.GET_NETWORK_INFO” }, { “name”: “ohos.permission.SET_NETWORK_INFO” } ], “metaData”: { “customizeData”: [ { “name”: “hwc-theme”, “value”: “androidhwext:style/Theme.Emui.Light.NoTitleBar” } ] },
其中,reqPermissions是權(quán)限,這里因?yàn)楂@取了網(wǎng)絡(luò)的json數(shù)據(jù),所以必須給與網(wǎng)絡(luò)權(quán)限。而metaData是樣式,這里我們?nèi)コ四J(rèn)的標(biāo)題欄。
編輯:jq
-
JAVA
+關(guān)注
關(guān)注
19文章
2946瀏覽量
104370 -
卡片
+關(guān)注
關(guān)注
0文章
8瀏覽量
9195 -
代碼
+關(guān)注
關(guān)注
30文章
4697瀏覽量
68085 -
鴻蒙系統(tǒng)
+關(guān)注
關(guān)注
183文章
2632瀏覽量
66048
原文標(biāo)題:#HarmonyOS征文#教育類(lèi)社區(qū)卡片實(shí)戰(zhàn)
文章出處:【微信號(hào):HarmonyOS_Community,微信公眾號(hào):電子發(fā)燒友開(kāi)源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論