ViewPagerIndicator

// 添加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(IndicatorSlideMode.SMOOTH);
        indicator.setIndicatorStyle(IndicatorStyle.CIRCLE);
        indicator.setSliderHeight(AttrHelper.vp2px(6, getContext()));
        indicator.setSliderGap(AttrHelper.vp2px(4, getContext()));
        indicator.setSliderWidth(normalWidth, checkedWidth);
        indicator.setOrientation(IndicatorOrientation.INDICATOR_HORIZONTAL);
        indicator.setupWithPageSlide(pageSlider);

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

public class FigureIndicatorComponent extends BaseIndicatorComponent implements Component.DrawTask {

    private int radius = AttrHelper.vp2px(20, getContext());

    private Color backgroundColor = new Color(Color.getIntColor("#88FF5252"));

    private Color textColor = new Color(Color.getIntColor("#FFFFFF"));

    private int textSize = AttrHelper.vp2px(14, getContext());

    private Paint mPaint;

    public FigureIndicatorComponent(Context context) {
        this(context, null);
    }

    public FigureIndicatorComponent(Context context, AttrSet attrs) {
        this(context, attrs, null);
    }

    public FigureIndicatorComponent(Context context, AttrSet attrs, String defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        init();
    }

    private void init() {
        addDrawTask(this);
    }

    public void setRadius(int radius) {
        this.radius = radius;
    }

    public void setBackgroundColor(Color backgroundColor) {
        this.backgroundColor = backgroundColor;
    }

    public FigureIndicatorComponent setTextSize(int textSize) {
        this.textSize = textSize;
        return this;
    }

    public FigureIndicatorComponent setTextColor(Color textColor) {
        this.textColor = textColor;
        return this;
    }

    public FigureIndicatorComponent setTextColor(int resColor) {
        try {
            this.textColor = new Color(getResourceManager().getResource(resColor).available());
        } catch (IOException e) {
            e.printStackTrace();
        } catch (NotExistException e) {
            e.printStackTrace();
        }
        return this;
    }

    @Override
    public void onDraw(Component component, Canvas canvas) {
        if (getPageSize() > 1) {
            mPaint.setColor(backgroundColor);
            canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, radius, mPaint);
            mPaint.setColor(textColor);
            mPaint.setTextSize(textSize);
            String text = getCurrentPosition() + 1 + "/" + getPageSize();
            int textWidth = (int) mPaint.measureText(text);
            Paint.FontMetrics fontMetricsInt = mPaint.getFontMetrics();
            float baseline = (getEstimatedHeight() - fontMetricsInt.bottom + fontMetricsInt.top) / 2 - fontMetricsInt.top;
            canvas.drawText(mPaint, text, (getWidth() - textWidth) / 2f, baseline);
        }
    }
}

Copyright 2020 zhpanvip

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.