鸿蒙开发（16）---PageSliderIndicator组件

Posted 2021-07-06 一天一篇Python库

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鸿蒙开发（16）---PageSliderIndicator组件相关的知识，希望对你有一定的参考价值。

PageSliderIndicator组件

看到这个组件，哪怕学过其他开发，估计也会有点陌生。因为它与前面的PageSlider组件很像。没错，你可以把它想象成一个页面的切换。

swiper效果
同时，也可以把前端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;
    }
}