PageSliderIndicator组件
看到这个组件，哪怕学过其他开发，估计也会有点陌生。因为它与前面的PageSlider组件很像。没错，你可以把它想象成一个页面的切换。
同时，也可以把前端swiper组件当成页面的切换，只是其切换的是图或者文字，而PageSlider切换的是界面。PageSliderIndicator等价于前端的swiper组件。
今天，我们就来介绍该组件，并使用其实现一个图片浏览自动切换。
布局文件
首先，我们还是使用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"> <StackLayout ohos:height="match_content" ohos:width="match_parent"> <PageSlider ohos:id="$+id:ability_main_pageslider" ohos:height="match_content" ohos:width="match_parent"/> <PageSliderIndicator ohos:id="$+id:ability_main_pagesliderindicator" ohos:height="match_content" ohos:width="match_content" ohos:padding="8vp" ohos:layout_alignment="bottom"/> </StackLayout> </DirectionalLayout>
我们都知道swiper组件的按钮选项一般与图片重叠，所以这里我们需要用到堆叠布局StackLayout，直接卸载外面会导致一个在另一个下边。
PageSlider图片页面
接着，我们需要通过PageSlider组件的适配器，完成轮换图片的界面。示例代码如下：
public class SwiperPageSliderProvider extends PageSliderProvider { private List<ImageSwiper> pixelMapList=new ArrayList<>(); private AbilitySlice abilitySlice; public SwiperPageSliderProvider(List<ImageSwiper> pixelMapList,AbilitySlice abilitySlice) { this.pixelMapList=pixelMapList; this.abilitySlice=abilitySlice; } @Override public int getCount() { return this.pixelMapList == null ? 0 : this.pixelMapList.size(); } @Override public Object createPageInContainer(ComponentContainer componentContainer, int i) { final ImageSwiper data = this.pixelMapList.get(i); Image image = new Image(this.abilitySlice); image.setPixelMap(data.resImage); image.setLayoutConfig( new StackLayout.LayoutConfig( ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT )); image.setScaleMode(Image.ScaleMode.STRETCH); componentContainer.addComponent(image); return image; } @Override public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) { componentContainer.removeComponent((Component) o); } @Override public boolean isPageMatchToObject(Component component, Object o) { return true; } public static class ImageSwiper{ int resImage; public ImageSwiper(int imageRes) { resImage = imageRes; } } }
与前面的PageSlider组件差不多，不在赘述。不过，前面我们是添加布局，这里我们是直接添加Image组件。
PageSliderIndicator与PageSlider关联
最后，我们需要将PageSliderIndicator与PageSlider组件进行关联，这样才能达到滑动图片以及点击下面的按钮，双互动的效果。
与TabList与PageSlider组件类似。不过，这里只需要通过PageSliderIndicator组件绑定即可，不需要双向绑定，它自己会完成。示例如下：
public class MainAbilitySlice extends AbilitySlice { private PageSlider pageSlider; private PageSliderIndicator pageSliderIndicator; @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.pageSliderIndicator=(PageSliderIndicator)findComponentById(ResourceTable.Id_ability_main_pagesliderindicator); this.pageSlider.setProvider(new SwiperPageSliderProvider(getData(),this)); this.pageSliderIndicator.setItemOffset(60); this.pageSliderIndicator.setPageSlider(pageSlider); } private List<SwiperPageSliderProvider.ImageSwiper> getData() { List<SwiperPageSliderProvider.ImageSwiper> imageSwiperList = new ArrayList<>(); imageSwiperList.add(new SwiperPageSliderProvider.ImageSwiper(ResourceTable.Graphic_11)); imageSwiperList.add(new SwiperPageSliderProvider.ImageSwiper(ResourceTable.Graphic_12)); imageSwiperList.add(new SwiperPageSliderProvider.ImageSwiper(ResourceTable.Graphic_13)); imageSwiperList.add(new SwiperPageSliderProvider.ImageSwiper(ResourceTable.Graphic_14)); imageSwiperList.add(new SwiperPageSliderProvider.ImageSwiper(ResourceTable.Graphic_15)); return imageSwiperList; } }
运行之后，效果如首图所示。
需要注意的是，默认其不会轮回的切换。后面讲解线程知识的时候，会教大家用定时器实现轮播效果，还请不要太急。
