鸿蒙开源组件——滑块样式和幻灯片模式库

jacksky

发布于 2022-2-28 19:23

浏览

0收藏

ViewPagerIndicator

项目介绍

项目名称：ViewPagerIndicator
所属系列：openharmony第三方组件适配移植
项目移植状态：主功能完成
调用差异：无
开发版本：sdk6，DevEco Studio2.2 beta1
功能：已经可以支持多种指示器样式和多种滑动模式，同时，也支持Drawable指示器和自定义指示器
基线版本：Release 1.2.0

效果演示

IndicatorComponent

属性	CIRCLE	DASH	ROUND_RECT
NORMAL
SMOOTH
WORM
COLOR
SCALE

安装教程

在moudle级别下的build.gradle文件中添加依赖

// 添加maven仓库
repositories {
    maven {
        url 'https://s01.oss.sonatype.org/content/repositories/releases/'
    }
}

// 添加依赖库
dependencies {
    implementation 'com.gitee.chinasoft_ohos:viewpagerindicator:1.0.0'   
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

使用说明

Method	Description	Default
setOrientation(int)	设置指示器的方向,可选值(INDICATOR_HORIZONTAL/INDICATOR_VERTICAL)	默认值为INDICATOR_HORIZONTAL
setIndicatorStyle(Int)	设置指示器样式	枚举类型(CIRCLE；DASH；ROUND_RECT) 默认值：CIRCLE
setSliderColor(normalColor: Int,selectedColor: Int)	设置指示器滑块颜色	normalColor：未选中时的滑块颜色, 默认值："#8C18171C"， checkedColor：选中时滑块颜色，默认值："#6C6D72"
setSlideMode(slideMode: Int)	设置滑块滑动模式	枚举类型（NORMAL;SMOOTH;WORM;COLOR;SCALE），默认值：NORMAL
setSliderWidth(indicatorWidth:Int)	设置滑块宽度，如果是圆形指示器则为滑块直径	默认值：8dp
setSliderWidth(normalWidth Int , checkWidth Int)	设置滑块宽度，如果是圆形指示器则为滑块直径	默认值 8dp
setIndicatorHeight(indicatorHeight Int)	设置指示器高度，只有在DASH和ROUND_RECT样式下有效	默认值为：normalIndicatorWidth/2
setSliderGap(indicatorMargin Int )	设置滑块之间的间距	默认值为滑块宽度或者直径
setupWithViewPager(ViewPager)	indicator与ViewPager关联

一、IndicatorComponent

到目前为止IndicatorComponent已经可以支持三种indicator样式以及五种滑动样式，具体使用步骤如下：

1.在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.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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

2.为IndicatorComponent配置参数:

   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);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

二、自定义Indicator样式 DrawableIndicator

鸿蒙开源组件——滑块样式和幻灯片模式库-鸿蒙开发者社区

DrawableIndicator是一个自定义的Indicator，位于Sample中，使用DrawableIndicator可以设置bitmap drawable或者vector drawable,可以自定义drawable的大小,具体使用步骤如下：

Add IndicatorView in 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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

三、FigureIndicatorComponent

这是一个演示如何实现自定义指示器的例子，例子将实现一个如下图的indicator样式

Custom IndicatorView Style

自定义Component并继承BaseIndicatorComponent

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);
        }
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

测试信息

CodeCheck代码测试无异常
CloudTest代码测试无异常
病毒安全检测通过
当前版本demo功能与原组件基本无差异

版本迭代

1.0.0

版权和许可信息

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.1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.