ViewPager 添加广告页面小圆点指示器效果

介绍

我们的应用几乎都有启动引导页介绍，通常是3~4张引导图，然后进入我们的主界面。大家可以发现，我们大部分引导界面都会有一种指示器（也就是小圆点，这里比较常见）。除了引导页以外呢，我们常见的广告页也经常会有这种指示器效果。

效果图

实现这种效果的方式有多种多样，虽然说很简单，但是我们可以写成一个通用的指示器类，在需要用到的地方实例化就可以了。这样就会减少代码的重复。

实现思路及代码

我们知道ViewPager有一个addOnPageChangeListener接口，这个接口可以对ViewPager的页面改变进行监听。那么，这样我们就可以通过这个接口监听Page的Position，Page的Position位置无非就是对当前页的指示器（小圆点）的状态进行改变来迎合ViewPager，从而达到我们想要的效果。

我们看下代码：

public class PageIndicator implements ViewPager.OnPageChangeListener {private int mPageCount;//页数private List<ImageView> mImgList;//保存img总个数private int img_select;private int img_unSelect;public PageIndicator(Context context, LinearLayout linearLayout, int pageCount) {this.mPageCount = pageCount;mImgList = new ArrayList<>();img_select = R.drawable.dot_select;img_unSelect = R.drawable.dot_unselect;final int imgSize = 25;for (int i = 0; i < mPageCount; i++) {ImageView imageView = new ImageView(context);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));//为小圆点左右添加间距params.leftMargin = 10;params.rightMargin = 10;//给小圆点一个默认大小params.height = imgSize;params.width = imgSize;if (i == 0) {imageView.setBackgroundResource(img_select);} else {imageView.setBackgroundResource(img_unSelect);}//为LinearLayout添加ImageViewlinearLayout.addView(imageView, params);mImgList.add(imageView);}}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {for (int i = 0; i < mPageCount; i++) {//选中的页面改变小圆点为选中状态，反之为未选中if ((position % mPageCount) == i) {(mImgList.get(i)).setBackgroundResource(img_select);} else {(mImgList.get(i)).setBackgroundResource(img_unSelect);}}}@Overridepublic void onPageScrollStateChanged(int state) {}
}

我们分析一下上部分代码：

这个类实现了OnPageChangeListener这个接口，这接口里的方法我们就不一一讲了，主要我们是在onPageSelected()这个方法内进行对小圆点的状态进行改变的。我们实例化了一个LinerLayout容器用作存放小圆点，因为我们首次进入页面，ViewPager默认postition是为0，在此我们得设置一个初始小圆点的状态，也就是指向第一页。我们在onPageSelected()方法中，改变当前页面的小圆点状态。

ViewPager布局文件

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v4.view.ViewPagerandroid:id="@+id/vp_loop_advertisement"android:layout_width="match_parent"android:layout_height="match_parent" /><LinearLayoutandroid:id="@+id/dot_horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:layout_marginBottom="32dp"android:gravity="center"android:orientation="horizontal" /></FrameLayout>
</android.support.constraint.ConstraintLayout>

这里说明一下，小圆点可以选择任意的图片资源，而我是写了一个drawable文件，样式比较简单，也放出代码吧：

//选中
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#ffffff" /><corners android:radius="1000dp" />
</shape>
//未选中
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="#323232" /><corners android:radius="1000dp" />
</shape>

使用方法

适配器之类的代码我就不贴出来了，比较简单。这样便实现了如上图的指示器效果了。

我们这样引用到我们的ViewPager上：

/**
* 第二个参数：存放小圆点的容器
* 第三个参数：ViewPager的页面数量
*/
mViewPager.addOnPageChangeListener(new PageIndicator(getContext(), dotHorizontal, 3));

分享既是快乐，感谢您的阅读。尊重他人劳动成果，转载请附加博客原文链接。点赞是一种积极的生活态度！

ViewPager 添加广告页面小圆点指示器效果相关推荐

android 圆点指示器,ViewPager加上小圆点指示器效果
分析环境环境:Android Studio 4.0 语言:Java 特点:简单,易懂,效果爆炸效果效果2.gif ViewPager类的来历 ViewPager是android扩展包v4包中的 ...
android ViewPager 实现点击小圆点切换页面案例
android ViewPager 实现点击小圆点切换页面说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
android小圆点滑动切换,android ViewPager 实现点击小圆点切换页面案例
android ViewPager 实现点击小圆点切换页面说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
RiPro主题二级菜单添加小圆点图标
RiPro主题二级菜单添加小圆点图标效果展示在ripro/assets/css/diy.css 中添加下列CSS .lanse{box-sizing:border-box;content:''; ...
iOS: 教你给UI控件添加Badge(消息提醒小圆点)
PPBadgeView 1.前言最近项目的一个需求是在UIView, UITabBarItem, UIBarButtonItem 这三种类型的控件上添加消息提醒小圆点(Badge),一开始找了一个星 ...
Android实现小圆点显示未读功能
代码地址如下: http://www.demodashi.com/demo/13541.html ####前言以前我们实现这个功能都是用 BadgeView.java,大体就是将这个java类复制到 ...
Android已读未读功能,Android实现小圆点显示未读功能
####前言以前我们实现这个功能都是用 BadgeView.java,大体就是将这个java类复制到自己的项目中,然后在项目中使用,今天讲的也是一款BadgeView,我将其封装称工具类Badget ...
android 小白点代码,Android实现小圆点显示未读功能
####前言以前我们实现这个功能都是用 BadgeView.java,大体就是将这个java类复制到自己的项目中,然后在项目中使用,今天讲的也是一款BadgeView,我将其封装称工具类Badget ...
微信小程序日历（下拉、收起、点击、小圆点、月份切换）
项目开发中应用的一个小日历功能,写的时候挺复杂但是写出来整理还是觉得挺简单的,整理完以后没有在实际页面中去跑,有问题大家留言或者自己解决(本人样式布局巨好看希望大家喜欢芜湖~)! html <v ...

ViewPager 添加广告页面小圆点指示器效果

介绍

实现思路及代码

ViewPager布局文件

使用方法

ViewPager 添加广告页面小圆点指示器效果相关推荐

最新文章

热门文章