Harmony OS — PageSliderIndicator滑动页面指示器

王睿丶

已于 2023-03-03 17:31:07 修改

阅读量488

点赞数 1

分类专栏： HarmonyOS 文章标签：滑动页面指示器王睿丶 Harmony OS 移动开发 PageSliderIndic

于 2021-07-03 22:14:48 首次发布

本文链接：https://blog.csdn.net/qq_27494201/article/details/118445712

版权

HarmonyOS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文详细介绍了HarmonyOS中的PageSliderIndicator组件，它是一个用于指示PageSlider当前显示页面的控件。通过简单的Java代码示例展示了如何设置、响应页面变化及自定义导航点的背景。PageSliderIndicator提供了设置导航点位置、监听页面变化和设置导航点间距等方法，使得在HarmonyOS应用中创建滑动页面指示更加便捷。

摘要由CSDN通过智能技术生成

文章目录

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