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);