目录

PageSlider组件

在前面介绍TabList组件之时，博主就提示过了，如果需要使用TabList进行页面的切换，必然用到PageSlider组件。

所以，今天我们将详细介绍PageSlider组件的使用规则。

基本用法

定义PageSlider组件

首先，我们使用XML布局文件进行PageSlider组件的定义。示例如下：

我们都知道，这种滑动切换页面的PageSlider组件，它每一页都基本是一个布局，所以我们需要为它创建一个布局。

但是它自己就是一个XML布局里面的一个组件，这如何操作呢？

PageSliderProvider

答案就是PageSliderProvider，这是一个类似前面讲解列表组件BaseItemProvider的适配器。不过它略微有些不同，我们先来看看如何使用它：

public class MyPageProvider extends PageSliderProvider {private AbilitySlice abilitySlice;private List list;public MyPageProvider(List list,AbilitySlice abilitySlice){this.list=list;this.abilitySlice=abilitySlice;}@Overridepublic int getCount() {return this.list.size();}@Overridepublic Object createPageInContainer(ComponentContainer componentContainer, int i) {final Component cpt;cpt = LayoutScatter.getInstance(this.abilitySlice).parse(ResourceTable.Layout_pageslider_layout, null, false);componentContainer.addComponent(cpt);cpt.setLayoutConfig(new StackLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,ComponentContainer.LayoutConfig.MATCH_PARENT));PageModel pageModel = this.list.get(i);Text name = (Text) cpt.findComponentById(ResourceTable.Id_pageslider_layout_name);name.setText(pageModel.getName());return cpt;}@Overridepublic void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {componentContainer.removeComponent((Component) o);}@Overridepublic boolean isPageMatchToObject(Component component, Object o) {return true;}
 }
 

重要的代码都在createPageInContainer()方法里面，本身PageSliderProvider就是一个布局，我们需要将该布局中添加组件，这里可以直接添加一个界面layout。

然后，我们在自定定义和配置该界面layout中的资源。

滑动页面

当然，我们这里主要是为了讲解PageSlider组件的使用，我们在这里放置一个不同的文本即可。布局文件代码如下（pageslider_layout.xml）：

这里，就只有一个文本组件，我们在MyPageProvider设置了该文本的内容。当然，是我们MainAbilitySlice类传递给它的实体类。

设置字符串

public class MainAbilitySlice extends AbilitySlice {HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");private PageSlider pageSlider;@Overridepublic 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));}private List getData(){List pageModelList=new ArrayList<>();for (int i = 0; i < 5; i++) {pageModelList.add(new PageModel("Page"+(i+1)));}return pageModelList;}
 }
 

如上面代码所示，我们为每个页面设置了“page+数字”组合的字符串。运行之后，实现的效果如下图所示：

TabList与PageSlider联动

前面介绍TabList博主就说过了，它可以结合PageSlider进行联动。尽然，到这里我们2个组件的功能都已经掌握，那么实战吧！

修改主布局

ability_main.xml文件刚开始只是一个PageSlider组件，因为需要与PageSlider联动，所以需要添加TabList组件，示例如下：

监听PageSlider与TabList

因为我们是需要PageSlider与TabList组件联动。

那么翻页操作时，要监听PageSlider组件的滑动，然后切换TabList组件的选中项，而PageSlider组件的滑动监听由addPageChangedListener负责。

而TabList组件切换，也应该变更PageSlider组件的页面选择，所以我们还需要监听TabList组件切换事件：addTabSelectedListener。

示例如下：

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 = {"关注", "推荐", "热榜", "问答", "社区", "Blink"};@Overridepublic 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]);this.tabList.addTab(tab);if (i == 0) {tab.select();}}this.tabList.addTabSelectedListener(new TabList.TabSelectedListener() {@Overridepublic void onSelected(TabList.Tab tab) {//当某个Tab从未选中状态变为选中状态时的回调pageSlider.setCurrentPage(tab.getPosition());}@Overridepublic void onUnselected(TabList.Tab tab) {//当某个Tab从选中状态变为未选中状态时的回调}@Overridepublic void onReselected(TabList.Tab tab) {//当某个Tab已处于选中状态，再次被点击时的状态回调}});pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {@Overridepublic void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) {}@Overridepublic void onPageSlideStateChanged(int state) {}@Overridepublic void onPageChosen(int itemPos) {tabList.selectTabAt(itemPos);}});}private List getData() {List pageModelList = new ArrayList<>();for (int i = 0; i < 6; i++) {pageModelList.add(new PageModel("Page" + (i + 1)));}return pageModelList;}
 }
 

这里的代码很简单，就是添加了2个方法，而TabList组件的使用，前面已经介绍过，这里就不在赘述。运行之后，效果如首图所示。

源代码下载：点击下载