在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:viewpagerindicator开源软件地址:https://gitee.com/zhpanvip/viewpagerindicator开源软件介绍:ViewPagerIndicatorEnglish | 中文ViewPagerIndicator使用案例预览点击链接或扫描二维码下载demo APK目前,该库已经可以支持多种指示器样式和多种滑动模式,同时,也支持Drawable指示器和自定义指示器 IndicatorView
API
XML Attrs
如何使用添加依赖在项目的gradle中添加如下依赖: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 在模块的gradle中添加如下依赖: implementation 'com.github.zhpanvip:viewpagerindicator:latestVersion' 1.IndicatorView到目前为止IndicatorView已经可以支持三种indicator样式以及五种滑动样式,具体使用步骤如下: (1).在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) 为IndicatorView配置参数以及关联ViewPager/ViewPager2: indicatorView.apply { setSliderColor(normalColor, checkedColor) setSliderWidth(resources.getDimension(R.dimen.dp_10)) setSliderHeight(resources.getDimension(R.dimen.dp_5)) setSlideMode(IndicatorSlideMode.WORM) setIndicatorStyle(IndicatorStyle.CIRCLE) setPageSize(view_pager2!!.adapter!!.itemCount) notifyDataChanged() } view_pager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { super.onPageScrolled(position, positionOffset, positionOffsetPixels) indicatorView.onPageScrolled(position, positionOffset, positionOffsetPixels) } override fun onPageSelected(position: Int) { super.onPageSelected(position) indicatorView.onPageSelected(position) } }) 或者: val indicatorView = findViewById<IndicatorView>(R.id.indicator_view2) indicatorView.apply { setSliderColor(normalColor, checkedColor) setSliderWidth(resources.getDimension(R.dimen.dp_10)) setSliderHeight(resources.getDimension(R.dimen.dp_5)) setSlideMode(IndicatorSlideMode.WORM) setIndicatorStyle(IndicatorStyle.CIRCLE) setupWithViewPager(view_pager2) } 2.自定义Indicator样式DrawableIndicator
DrawableIndicator是一个自定义的Indicator,位于Sample中,使用DrawableIndicator可以设置bitmap drawable或者vector drawable,可以自定义drawable的大小,具体使用步骤如下: (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.viewpagerindicator.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) DrawableIndicator与ViewPager/ViewPager2关联: val drawableIndicator = findViewById<DrawableIndicator>(R.id.indicator_view) val dp20 = resources.getDimensionPixelOffset(R.dimen.dp_20) drawableIndicator.apply { setIndicatorGap(resources.getDimensionPixelOffset(R.dimen.dp_2_5)) setIndicatorDrawable(R.drawable.heart_empty, R.drawable.heart_red) setIndicatorSize(dp20, dp20, dp20, dp20) setupWithViewPager(view_pager2) } FigureIndicatorView这是一个演示如何实现自定义指示器的例子,例子将实现一个如下图的indicator样式
(1)自定义View并继承BaseIndicatorViewpublic 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)自定义的indicator与ViewPager/ViewPager2关联 val indicatorView = findViewById<FigureIndicatorView>(R.id.indicator_view) indicatorView.setBackgroundColor(Color.parseColor("#aa118EEA")) indicatorView.setTextSize(IndicatorUtils.dp2px(13f)) indicatorView.setupWithViewPager(viewPager) FAQ如有问题可以加入QQ群交流 Sponsor更多详情《聊一聊ViewPagerIndicator重构的一些经验》 LicenseCopyright 2020 zhpanvipLicensed 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.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License. |
请发表评论