PageSliderIndicator

PageSliderIndicator，需配合PageSlider使用，指示在PageSlider中展示哪个界面。

PageSliderIndicator的用法

1. 在布局文件中创建PageSliderIndicator。

   <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"/>
   

2. 在Java代码中配置导航点。

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

   图1 搭配PageSlider效果

常用方法

• 关联PageSlider

  indicator.setPageSlider(pageSlider);
  

• 响应页面更改事件

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

• 设置所选指导航点的位置

  indicator.setSelected(2);
  

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

• 设置导航点的背景

  除了上述使用Java创建背景外，也可以使用XML方式创建。

  1. 在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>
     

  2. 在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>
     

  3. 在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);
     

  图2 导航点背景设置效果

• 设置导航点之间的偏移量

  indicator.setItemOffset(60);