自學(xué)鴻蒙應(yīng)用開發(fā)（37）- PageSlider組件
PageSlider是用于頁面之間切換的組件，它通過響應(yīng)滑動事件完成頁面間的切換。
效果展示
首先是本文所示代碼的動作視頻：
準(zhǔn)備布局文件
一共用到三個(gè)布局，第一布局是控制畫面全體的page_slider_owner.xml，其內(nèi)部定義了一個(gè)PageSlider組件：
<PageSliderxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:id="$+id:page_slider"ohos:height="match_parent"ohos:width="match_parent"ohos:layout_alignment="center"/>
接下來是用于控制第1頁，第3頁的布局文件1：
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"ohos:layout_alignment="center"ohos:background_element="#7FFF7F"><Textohos:id="$+id:text_helloworld"ohos:height="match_parent"ohos:width="match_content"ohos:layout_alignment="center"ohos:text_color="#0000FF"ohos:text_size="80"/></DirectionalLayout>
用于控制第2頁，第4頁的布局文件2：
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"ohos:background_element="#FFFF7F"><Textohos:id="$+id:text_helloworld"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:text_color="#FF0000"ohos:text_size="200"/></DirectionalLayout>
布局結(jié)構(gòu)基本相同，區(qū)別僅僅在于背景顏色，字體大小和字體顏色。
定制PageSliderProvider
PageSliderProvider繼承了PageSliderProcer類，為PageSlider定義了頁面生成/銷毀功能。
public class TestPagerProvider extends PageSliderProvider {private List<DataItem> list;private AbilitySlice slice;public TestPagerProvider(List<DataItem> list, AbilitySlice slice){this.list = list;this.slice = slice;}public int getCount() {return list.size();}public Object createPageInContainer(ComponentContainer componentContainer, int i) {final DataItem data = list.get(i);Component cpt = LayoutScatter.getInstance(slice).parse(data.mLayout, null, true);Text label = (Text)cpt.findComponentById(ResourceTable.Id_text_helloworld);label.setText(data.mText);componentContainer.addComponent(cpt);return cpt;}public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {componentContainer.removeComponent((Component) o);}public boolean isPageMatchToObject(Component component, Object o) {return true;}//數(shù)據(jù)實(shí)體類public static class DataItem{String mText;int mLayout;public DataItem(String txt, int id) {mText = txt;mLayout = id;}}}
內(nèi)嵌的數(shù)據(jù)類DataItem，為頁面提供布局id和文字信息。實(shí)際開發(fā)時(shí)PageSliderProvider 的派生類和DataItem應(yīng)該是設(shè)計(jì)重點(diǎn)。
導(dǎo)入PageSlider
public class MainAbilitySlice extends AbilitySlice {public void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_page_slider_owner);initPageSlider();}private void initPageSlider() {PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);pageSlider.setProvider(new TestPagerProvider(getData(), this));}private ArrayList<TestPagerProvider.DataItem> getData() {ArrayList<TestPagerProvider.DataItem> dataItems = new ArrayList<>();dataItems.add(new TestPagerProvider.DataItem("Page A", ResourceTable.Layout_ability_main1));dataItems.add(new TestPagerProvider.DataItem("Page B", ResourceTable.Layout_ability_main2));dataItems.add(new TestPagerProvider.DataItem("Page C", ResourceTable.Layout_ability_main1));dataItems.add(new TestPagerProvider.DataItem("Page D", ResourceTable.Layout_ability_main2));return dataItems;}}
initPageSlider用于導(dǎo)入自定義的TestPagerProvier類，getData用于生成每個(gè)頁面的DataItem數(shù)據(jù)。
參考代碼
完整代碼可以從以下鏈接下載：
https://github.com/xueweiguo/Harmony/tree/master/PageSlider
作者著作介紹
《實(shí)戰(zhàn)Python設(shè)計(jì)模式》是作者去年3月份出版的技術(shù)書籍，該書利用Python 的標(biāo)準(zhǔn)GUI 工具包tkinter，通過可執(zhí)行的示例對23 個(gè)設(shè)計(jì)模式逐個(gè)進(jìn)行說明。這樣一方面可以使讀者了解真實(shí)的軟件開發(fā)工作中每個(gè)設(shè)計(jì)模式的運(yùn)用場景和想要解決的問題；另一方面通過對這些問題的解決過程進(jìn)行說明，讓讀者明白在編寫代碼時(shí)如何判斷使用設(shè)計(jì)模式的利弊，并合理運(yùn)用設(shè)計(jì)模式。
對設(shè)計(jì)模式感興趣而且希望隨學(xué)隨用的讀者通過本書可以快速跨越從理解到運(yùn)用的門檻；希望學(xué)習(xí)Python GUI 編程的讀者可以將本書中的示例作為設(shè)計(jì)和開發(fā)的參考；使用Python 語言進(jìn)行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎(chǔ)，迅速構(gòu)建自己的系統(tǒng)架構(gòu)。
覺得本文有幫助？請分享給更多人。
關(guān)注微信公眾號【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天！
面向?qū)ο箝_發(fā)，面向?qū)ο笏伎迹?/span>