Git Product home page Git Product logo

viewpagerindicator's Introduction

ViewPagerIndicator

License MinSdk latestVersion Android Arsenal

English | 中文

Preview

QRCode

Various Indicator Styles and various Indicator Slide mode was supported now.It's also support drawable indicator and custom indicator.

IndicatorView

Attrs CIRCLE DASH ROUND_RECT
NORMAL CIRCLE_NORMAL DASH_NORMAL ROUND_RECT_NORMAL
SMOOTH CIRCLE_SMOOTH DASH_SMOOTH ROUND_RECT_SMOOTH
WORM CIRCLE_WORM DASH_WORM ROUND_WORM
COLOR CIRCLE_COLOR DASH_COLOR ROUND_COLOR
SCALE CIRCLE_SCALE DASH_SCALE ROUND_SCALE

DrawableIndicator

Bitmap Drawable Vector Drawable
NORMAL NORMAL

API

Method Description Default
setIndicatorStyle(Int) set indicator style enum(CIRCLE;DASH;ROUND_RECT) default CIRCLE
setSliderColor(normalColor: Int,selectedColor: Int) set indicator slider color normalColor:color of indicator dot not selected, default value "#8C6C6D72", checkedColor:color of indicator selected default value is "#8C18171C"
setSlideMode(slideMode: Int) set indicator slide mode enum(NORMAL;SMOOTH;WORM;COLOR;SCALE),default value NORMAL
setSliderWidth(indicatorWidth:Int) set indicator slider width,if it's Circle indicator the parameter is diameter of circle default value is 8dp
setSliderWidth(normalWidth Int , checkWidth Int) set indicator slider width,if is circle style,the width is diameter of circle default is 8dp
setIndicatorHeight(indicatorHeight Int) set indicator hight,it's only used when the indicator style is DASH or ROUND_RECT default value is normalIndicatorWidth/2
setSliderGap(indicatorMargin Int ) set the gap of indicator slider default value is indicator slider width(or the diameter of circle)
setupWithViewPager(ViewPager) To link IndicatorView with ViewPager together.
setupWithViewPager(ViewPager2) To link IndicatorView with ViewPager2 together.

Usage

Gradle dependency

Please add it in your root build.gradle at the end of repositories:

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
	

Then add the dependency in your app build.gradle

implementation 'com.github.zhpanvip:viewpagerindicator:latestVersion'

latestVersion:latestVersion

1.IndicatorView

Three indicator styles and five slide mode supported with IndicatorView as so far.

(1).Add IndicatorView in layout.xml

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_200"
            tools:context=".MainActivity">

            <androidx.viewpager.widget.ViewPager
                android:id="@+id/banner_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <com.zhpan.indicator.IndicatorView
                android:id="@+id/indicator_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_margin="@dimen/dp_10" />

    </RelativeLayout>

(2).Use IndicatorView with ViewPager/ViewPager2:

        val indicatorView = findViewById<IndicatorView>(R.id.indicator_view2)
        indicatorView
                    .setSliderColor(getResColor(R.color.red_normal_color), getResColor(R.color.red_checked_color))
                    .setSliderWidth(resources.getDimension(R.dimen.dp_17))
                    .setSliderHeight(resources.getDimension(R.dimen.dp_5))
                    .setSlideMode(IndicatorSlideMode.WORM)
                    .setIndicatorStyle(IndicatorStyle.CIRCLE)
                    .setupWithViewPager(viewPager)

2.DrawableIndicator

You can set bitmap drawable indicator and vector drawable indicator by DrawableIndicator,also you can resize the drawable easily.

(1) Add IndicatorView in layout.xml

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_200"
            tools:context=".MainActivity">

            <androidx.viewpager.widget.ViewPager
                android:id="@+id/banner_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <com.zhpan.indicator.DrawableIndicator
                android:id="@+id/indicator_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_margin="@dimen/dp_10" />

    </RelativeLayout>

(2) Use DrawableIndicator with ViewPager/ViewPager2:

        val indicatorView = findViewById<DrawableIndicator>(R.id.indicator_view)
        val dp10 = resources.getDimensionPixelOffset(R.dimen.dp_10)
        indicatorView
              .setIndicatorGap(resources.getDimensionPixelOffset(R.dimen.dp_2_5))
              .setIndicatorDrawable(R.drawable.heart_empty, R.drawable.heart_red)
              .setIndicatorSize(dp10, dp10, dp10, dp10)
              .setupWithViewPager(viewPager)

3.Custom IndicatorView Supported

The example will implement an custom IndicatorView as the follow gif.

Custom IndicatorView Style
NORMAL

(1)Custom View and extends BaseIndicatorView

public class FigureIndicatorView extends BaseIndicatorView {

    private int radius = DpUtils.dp2px(20);

    private int backgroundColor = Color.parseColor("#88FF5252");

    private int textColor = Color.WHITE;

    private int textSize=DpUtils.dp2px(13);

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

    public FigureIndicatorView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FigureIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(2 * radius, 2 * radius);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(backgroundColor);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);
        mPaint.setColor(textColor);
        mPaint.setTextSize(textSize);
        String text = currentPosition + 1 + "/" + pageSize;
        int textWidth = (int) mPaint.measureText(text);
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();
        int baseline = (getMeasuredHeight() - fontMetricsInt.bottom + fontMetricsInt.top) / 2 - fontMetricsInt.top;
        canvas.drawText(text, (getWidth() - textWidth) / 2, baseline, mPaint);
    }

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

    @Override
    public void setBackgroundColor(@ColorInt int backgroundColor) {
        this.backgroundColor = backgroundColor;
    }

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

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }
}

(2)User custom indicator with ViewPager/ViewPager2

    val indicatorView = findViewById<FigureIndicatorView>(R.id.indicator_view)
            indicatorView.setBackgroundColor(Color.parseColor("#aa118EEA"))
            indicatorView.setTextSize(IndicatorUtils.dp2px(13f))
                    .setupWithViewPager(viewPager)

FAQ

If you have any question regard to ViewPagerIndicator, please scan the QR code and join the QQ group to communicate.

QQ交流群60902509

Sponsor

如果您觉得BannerViewPager库还不错,帮您省了不少时间,可以点击Star表示对作者的支持,也可以扫描二维码请作者喝杯咖啡。

Alipay WeChat
NORMAL SMOOTH

More details

《聊一聊ViewPagerIndicator重构的一些经验》

License

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.

viewpagerindicator's People

Contributors

zhpanvip avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.