Harmony OS — PageSliderIndicator滑动页面指示器

Posted 2021-07-16 王睿丶

文章目录

• • 1、PageSliderIndicator 是什么？
  • 2、简单使用
  • 3、常用方法
  • 4、更多

1、PageSliderIndicator 是什么？

简单：滑动页面指示器
官方：PageSliderIndicator，需配合PageSlider使用，指示在PageSlider中展示哪个界面。

2、简单使用

🔺这里是在之前的 PageSlider组件上新增代码进行实现，学习或源码可参考：
Harmony OS — PageSlider滑动页面

<PageSliderIndicator
    ohos:id="$+id:indicator"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:padding="8vp"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="16vp"
    ohos:background_element="#55FFC0CB"/>

        PageSliderIndicator indicator = (PageSliderIndicator)findComponentById(ResourceTable.Id_indicator);
        ShapeElement normalElement = new ShapeElement();
        normalElement.setRgbColor(RgbColor.fromArgbInt(0xADD8E6));
        normalElement.setAlpha(168);
        normalElement.setShape(ShapeElement.OVAL);
        normalElement.setBounds(0, 0, 32, 32);
        ShapeElement selectedElement = new ShapeElement();
        selectedElement.setRgbColor(RgbColor.fromArgbInt(0x00BFFF));
        selectedElement.setAlpha(168);
        selectedElement.setShape(ShapeElement.OVAL);
        selectedElement.setBounds(0, 0, 48, 48);
        indicator.setItemElement(normalElement, selectedElement);
        indicator.setItemOffset(60);
        indicator.setPageSlider(pageSlider);

3、常用方法

（1）关联PageSlider

indicator.setPageSlider(pageSlider);

（2）响应页面更改事件

indicator.addOnSelectionChangedListener(new PageSlider.PageChangedListener() {
            @Override
            public void onPageSliding(int i, float v, int i1) {
            }
            @Override
            public void onPageSlideStateChanged(int i) {
            }
            @Override
            public void onPageChosen(int i) {
            }
 });

（3）设置所选指导航点的位置

indicator.setSelected(2);

此方法也会改变关联的PageSlider对象中的页面。

（4）自定义导航点的背景
除了上述使用Java创建背景外，也可以使用XML方式创建。

• a.在graphic文件夹下创建selected_page_bg_element.xml。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="16px"/>
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="64px"
        ohos:bottom="32px"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>

• b.在graphic文件夹下创建unselected_page_bg_element.xml。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="32px"
        ohos:bottom="32px"/>
    <solid
        ohos:color="#ADD8E6"/>
</shape>

• c.在Java代码中调用，设置导航点背景。

    ShapeElement normalElement = new ShapeElement(this, ResourceTable.Graphic_unselected_page_bg_element);
        ShapeElement selectedElement = new ShapeElement(this, ResourceTable.Graphic_selected_page_bg_element);
        indicator.setItemElement(normalElement, selectedElement);

（5）设置导航点之间的偏移量

indicator.setItemOffset(60);

4、更多

PageSliderIndicator 更多