HarmonyOS —常用组件开发指导-PageSliderIndicator

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

PageSliderIndicator的创建和使用

在PageSlider布局文件的基础上创建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"/>

在已适配PageSlider的数据结构的Java代码中添加配置PageSliderIndicator导航点。

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使用的效果

PageSliderIndicator的常用方法

关联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方式创建。

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

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

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

0 0 投票数

文章评分