// Добавить репозиторий Maven
repositories {
    maven {
        url 'https://s01.oss.sonatype.org/content/repositories/releases/'
    }
}

// Добавить зависимость библиотеки
dependencies {
    implementation 'com.gitee.chinasoft_ohos:viewpagerindicator:1.0.0'   
}

        <StackLayout
            ohos:height="200vp"
            ohos:width="match_parent">

            <PageSlider
                ohos:id="$+id:page_slide"
                ohos:height="match_parent"
                ohos:width="match_parent"/>

            <com.zhpan.indicator.IndicatorComponent
                ohos:id="$+id:ind"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:bottom_margin="15vp"
                ohos:layout_alignment="bottom|center"
                app:psi_slider_normal_color="$color:normal"/>
        </StackLayout>

        pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slide);
        pageSlider.setProvider(new PagerProvider());

        indicator = (IndicatorComponent) findComponentById(ResourceTable.Id_ind);
``` **Индикатор. СэтСлайдМод (Indicator.setSlideMode)**

indicator.setSlideMode(IndicatorSlideMode.SMOOTH);

**Устанавливает режим скольжения индикатора.**

* *SMOOTH* — плавный переход между слайдами.

**Индикатор. сэтИндикатоСтил (Indicator.setIndicatorStyle)**

indicator.setIndicatorStyle(IndicatorStyle.CIRCLE);

**Задаёт стиль отображения индикатора.**

* *CIRCLE* — индикатор в виде круга.

**Индикатор. сэтСлайдерХайт (Indicator.setSliderHeight)**

indicator.setSliderHeight(AttrHelper.vp2px(6, getContext()));

**Определяет высоту слайдера.**

AttrHelper.vp2px преобразует значение из виртуальных пикселей (VP) в пиксели экрана устройства (PX).

getContext() — метод получения контекста приложения.

**Индикатор. сэтСлайдерГэп (Indicator.setSliderGap)**

indicator.setSliderGap(AttrHelper.vp2px(4, getContext()));

**Указывает расстояние между слайдерами.**

**Индикатор. сэтСлайдерВидт (Indicator.setSliderWidth)**

indicator.setSliderWidth(normalWidth, checkedWidth);

**Задаёт ширину слайдеров.**

normalWidth и checkedWidth — значения ширины для нормального и проверенного состояний соответственно.

**Индикатор. сэтОриентатион (Indicator.setOrientation)**

indicator.setOrientation(IndicatorOrientation.INDICATOR_HORIZONTAL);

**Определяет ориентацию индикатора.**

* *INDICATOR_HORIZONTAL* — горизонтальная ориентация.

**Индикатор. саплайВитПаджСлайд (Indicator.setupWithPageSlide)**

indicator.setupWithPageSlide(pageSlider);

**Связывает индикатор со слайдером страниц.**

pageSlider — слайдер страниц.

Далее идёт текст о пользовательском индикаторе DrawableIndicator:

DrawableIndicator — это пользовательский индикатор, который находится в Sample. Он позволяет использовать растровые или векторные изображения, а также настраивать размер этих изображений.

Для использования DrawableIndicator нужно добавить IndicatorView в layout.xml:

    <StackLayout
        ohos:height="200vp"
        ohos:width="match_parent">

        <PageSlider
            ohos:id="$+id:page_slide"
            ohos:height="match_parent"
            ohos:width="match_parent"/>

            <com.zhpan.indicator.DrawableIndicator
                ohos:id="$+id:drawable_indicator"
                ohos:height="match_content"
                ohos:width="match_content"
                />
    </StackLayout>

Затем идёт информация о FigureIndicatorComponent — примере реализации пользовательского индикатора. Этот компонент будет иметь следующий вид:

| Custom IndicatorView Style|
|--|
| ![NORMAL](https://gitee.com/zhpanvip/images/raw/master/project/indicator/style_custum.gif) |

FigureIndicatorComponent наследуется от BaseIndicatorComponent и реализует интерфейс Component.DrawTask. В нём определяются различные методы и свойства для настройки индикатора.

В конце идёт информация о тестировании компонента и его версии.