本文介紹在鴻蒙應用中TabList和TabList.Tab組件的基本用法。java
查看視頻編程
準備TabList頁面佈局設計模式
在layout目錄下建立TabList佈局，將其命名爲ability_tablist.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:orientation="vertical"> <TabList ohos:id="$+id:tab_list" ohos:background_element="#FFFF7F" ohos:top_margin="10vp" ohos:tab_margin="24vp" ohos:tab_length="140vp" ohos:text_size="20fp" ohos:height="36vp" ohos:width="match_parent" ohos:layout_alignment="center" ohos:orientation="horizontal" ohos:text_alignment="center" ohos:normal_text_color="#999999" ohos:selected_text_color="#000000" ohos:selected_tab_indicator_color="#000000" ohos:selected_tab_indicator_height="2vp"/> <DirectionalLayout ohos:id="$+id:tab_container" ohos:height="match_parent" ohos:width="match_parent"> </DirectionalLayout></DirectionalLayout>
佈局代碼中第7行~第22行的用於生成TabList組件，定義了TabList的基本屬性；第23行~第27行用於生成Tab頁面的容器，目前尚未具體內容，稍後有具體代碼生成。ide
準備Image頁面工具
Image頁面主要包含一個Image文件和簡單的文字表示：佈局
<?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:orientation="vertical"> <Component ohos:height="0vp" ohos:weight="3" ohos:width="match_parent" /> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="center" ohos:orientation="vertical"> <Image ohos:id="$+id:image" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="center" ohos:image_src="$media:DevEco" /> <Component ohos:height="20vp" ohos:width="match_parent" /> <Text ohos:id="$+id:text_helloworld" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="Image Tab" ohos:text_color="#007F00" ohos:text_size="100" /> </DirectionalLayout> <Component ohos:height="0vp" ohos:weight="5" ohos:width="match_parent" /></DirectionalLayout>
準備Video頁面學習
Video頁面包含一個動畫，稍微複雜一些。首先是頁面自己：動畫
<?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:orientation="vertical"> <Component ohos:height="0vp" ohos:weight="3" ohos:width="match_parent" /> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="center" ohos:orientation="vertical"> <Component ohos:id="$+id:video_area" ohos:height="300vp" ohos:width="300vp" /> <Component ohos:height="20vp" ohos:width="match_parent" /> <Text ohos:id="$+id:text_helloworld" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="Video Tab" ohos:text_color="#0000FF" ohos:text_size="100" /> </DirectionalLayout> <Component ohos:height="0vp" ohos:weight="5" ohos:width="match_parent" /></DirectionalLayout>
這個文件和Image頁面區別不大，只是在用Component組件代替了Image組件。而動畫的實際內容則是由graphic目錄中的animation_element.xml文件決定：ui
<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:oneshot="false"> <item ohos:element="$media:video01" ohos:duration="100"/> <item ohos:element="$media:video02" ohos:duration="100"/> <item ohos:element="$media:video03" ohos:duration="100"/> <item ohos:element="$media:video04" ohos:duration="100"/> <item ohos:element="$media:video05" ohos:duration="100"/> <item ohos:element="$media:video06" ohos:duration="100"/> <item ohos:element="$media:video07" ohos:duration="100"/> <item ohos:element="$media:video08" ohos:duration="100"/> <item ohos:element="$media:video09" ohos:duration="100"/> <item ohos:element="$media:video10" ohos:duration="100"/> <item ohos:element="$media:video11" ohos:duration="100"/></animation-list>
生成TabList畫面
TabList的每一個Tab頁面須要由代碼生成，具體參見下面的頁面類：
package com.example.helloharmony.slice; import com.example.helloharmony.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.*;import ohos.agp.components.element.FrameAnimationElement; import java.io.Console; public class TablistAbilitySlice extends AbilitySlice { private Component imageContent; private Component videoContent; private FrameAnimationElement frameAnimationElement; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_tablist); TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list); tabList.setTabLength(200); // 設置Tab的寬度 tabList.setTabMargin(26); // 設置兩個Tab之間的間距 TabList.Tab tab1 = tabList.new Tab(getContext()); tab1.setText("Image"); tabList.addTab(tab1); TabList.Tab tab2 = tabList.new Tab(getContext()); tab2.setText("Video"); tabList.addTab(tab2); AbilitySlice slice = this; tabList.addTabSelectedListener(new TabList.TabSelectedListener() { @Override public void onSelected(TabList.Tab tab) { ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container); if(tab.getText().equals("Image")) { imageContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_iamge_tab, null, false); container.addComponent(imageContent); } else { videoContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_video_tab, null, false); frameAnimationElement = new FrameAnimationElement(slice.getContext(), ResourceTable.Graphic_animation_element); Component videoArea = videoContent.findComponentById(ResourceTable.Id_video_area); videoArea.setBackground(frameAnimationElement); frameAnimationElement.start(); container.addComponent(videoContent); } } @Override public void onUnselected(TabList.Tab tab) { if(tab.getText().equals("Video")) { frameAnimationElement.start(); } ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container); container.removeAllComponents(); } @Override public void onReselected(TabList.Tab tab) { ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container); if(tab.getText().equals("Image")) { container.addComponent(imageContent); } else { frameAnimationElement.start(); container.addComponent(videoContent); } } }); //最開始選選擇tab1 tabList.selectTab(tab1); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}
代碼第22行~第27行分別生成了Image和Video兩個Tab頁。
第29行~第69行是爲TabList的各類事件提供響應。須要響應的處理主要有Tab頁選擇，Tab頁取消選擇和Tab從新選擇。代碼中根據當前選中的Tab頁面生成或選擇不一樣的組件。
參考文檔
TabList和Tab組件
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-tablist-tab-0000001062229749
TabList類
https://developer.harmonyos.com/cn/docs/documentation/doc-references/tablist-0000001054238721
Tab List.Tab類
https://developer.harmonyos.com/cn/docs/documentation/doc-references/tablist_tab-0000001054678691
動畫開發指導
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-animation-0000000000580278
新書介紹
《實戰Python設計模式》是做者最近出版的Python編程書籍，拜託多多關注！
本書利用Python 的標準GUI 工具包tkinter，經過可執行的示例對23 個設計模式逐個進行說明。這樣一方面能夠使讀者瞭解真實的軟件開發工做中每一個設計模式的運用場景和想要解決的問題；另外一方面經過對這些問題的解決過程進行說明，讓讀者明白在編寫代碼時如何判斷使用設計模式的利弊，併合理運用設計模式。
對設計模式感興趣並且但願隨學隨用的讀者經過本書能夠快速跨越從理解到運用的門檻；但願學習Python GUI 編程的讀者能夠將本書中的示例做爲設計和開發的參考；使用Python 語言進行圖像分析、數據處理工做的讀者能夠直接以本書中的示例爲基礎，迅速構建本身的系統架構。
原文連接：https://developer.huawei.com/consumer/cn/forum/topic/0201551132050440304?fid=0101303901040230869
原做者：面向對象思考