Android开发——打造简单的Viewpager指示器(小圆点指示器)
准备工作:
1.两张不同颜色的小圆点图片,可以去阿里巴巴矢量图网站搜索
我把我使用的图片贴出来


2.一个简单的Viewpager的实现
下面是简单的Viewpager实现步骤:
1.布局文件使用Viewpager

2.定义一个适配器类使其继承PagerAdapter,复写其中的四个方法,分别是getCount,isViewFromObject,instantiateItem和destroyItem
@Override
public int getCount() {
return 3;//在Viewpager显示3个页面
} @Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
} @Override
public Object instantiateItem(ViewGroup container, int position) {
TextView tv = new TextView(container.getContext());
tv.setGravity(Gravity.CENTER);
tv.setTextSize(20);
tv.setText("第" + position + "页"); // 添加到ViewPager容器
container.addView(tv); // 返回填充的View对象
return tv; } @Override
public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object);
}
3.findviewbyid方法找到viewpager
4.设置适配器

效果图:

开始:
1.布局的设计
我们来到xml文件中,原本里面只有一个viewpager,我们需要再增加个linearlayout,之后用三个linaerlayout水平放置,并且将其平分(平分使用权重weight属性),中间的linearlayout中水平放入三个ImageView,这个三个ImageView同样使用权重将中间的linearlayout给平分,相信这个布局还是比较简单的吧

我们放入ImageView之后,将第一个的ImageView的src设置为蓝色的,其他两个则是设置为灰色的,因为刚开始就是显示viewpager的第一页嘛,这个相信大家都能明白

2.复写onpagechangeclicklistener中的onPageSelected方法
首先,要说明一下,viewpager有一个接口名为onpagechangeclicklistener
onPagechangeclicklistener说明:
ViewPage使用时,最关键的代码就是setOnPageChangeListener,需要注意的是,高版本好像没有这个方法了,改为了addOnPageChangeListener,名称变了,参数没有变化
参数是一个ViewPager.SimpleOnPageChangeListener对象。
ViewPager.SimpleOnPageChangeListener是个接口,有三个方法,下面做介绍。
注:ViewPager有两个操作,一个是用手指滑动翻页,一个是直接setCurrentItem(一般用于点击上面的tab直接setCurrentItem)。
下面的方法介绍也会针对这两种情况分别介绍,最后还会讨论这三个方法相对执行顺序的问题
1.onPageSelected(int position):
这个方法有一个参数position,代表哪个页面被选中。当用手指滑动翻页的时候,如果翻动成功了(滑动的距离够长),手指抬起来就会立即执行这个方法,position就是当前滑动到的页面。如果直接setCurrentItem翻页,那position就和setCurrentItem的参数一致,这种情况在onPageScrolled执行方法前就会立即执行。
2.onPageScrolled(int position,float positionOffset, int positionOffsetPixels):
这个方法会在屏幕滚动过程中不断被调用。
有三个参数,第一个position,这个参数要特别注意一下。当用手指滑动时,如果手指按在页面上不动,position和当前页面index是一致的;如果手指向左拖动(相应页面向右翻动),这时候position大部分时间和当前页面是一致的,只有翻页成功的情况下最后一次调用才会变为目标页面;如果手指向右拖动(相应页面向左翻动),这时候position大部分时间和目标页面是一致的,只有翻页不成功的情况下最后一次调用才会变为原页面。
当直接设置setCurrentItem翻页时,如果是相邻的情况(比如现在是第二个页面,跳到第一或者第三个页面),如果页面向右翻动,大部分时间是和当前页面是一致的,只有最后才变成目标页面;如果向左翻动,position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。
如果不是相邻的情况,比如我从第一个页面跳到第三个页面,position先是0,然后逐步变成1,然后逐步变成2;我从第三个页面跳到第一个页面,position先是1,然后逐步变成0,并没有出现为2的情况。
positionOffset是当前页面滑动比例,如果页面向右翻动,这个值不断变大,最后在趋近1的情况后突变为0。如果页面向左翻动,这个值不断变小,最后变为0。
positionOffsetPixels是当前页面滑动像素,变化情况和positionOffset一致。
3.onPageScrollStateChanged(int state):
这个方法在手指操作屏幕的时候发生变化。有三个值:0(END),1(PRESS) , 2(UP) 。
当用手指滑动翻页时,手指按下去的时候会触发这个方法,state值为1,手指抬起时,如果发生了滑动(即使很小),这个值会变为2,然后最后变为0
。
总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生,这个时候只会调用这个方法两次,state值分别是1,0 。
当setCurrentItem翻页时,会执行这个方法两次,state值分别为2 , 0 。
三个方法的执行顺序为:用手指拖动翻页时,最先执行一遍onPageScrollStateChanged(1),然后不断执行onPageScrolled,放手指的时候,直接立即执行一次onPageScrollStateChanged(2),然后立即执行一次onPageSelected,然后再不断执行onPageScrollStateChanged,最后执行一次onPageScrollStateChanged(0)。
其它的情况由这个可以推出来,不再赘述。
这个原理其实我们只需要关注第一个方法即可,即onPageSelected(int position),当我们翻页了,这个方法就会执行,是viewpager显示参数为position的那页的内容
我们为viewpager设置这个监听器,复写其中的onPageSelected方法,position为0的时候即是第一页,我们为第一个ImageView设置为蓝色圆形,position为1时,为第二个ImageView设置为蓝色圆形,以此类推,记得在之前的xml文件中给三个ImageView定义一个id哦

3、效果图

大功告成!!
本来是实现圆点能够移动的,但是,看不懂大神们写的代码,只能简单的实现这样的小圆点了。。
Android开发——打造简单的Viewpager指示器(小圆点指示器)的更多相关文章
- Android开发——打造简单的Viewpager指示器
准备工作: 1.两张不同颜色的小圆点图片,可以去阿里巴巴矢量图网站搜索 我把我使用的图片贴出来 2.一个简单的Viewpager的实现 下面是简单的Viewpager实现步骤: 1.布局文件使用Vie ...
- ViewPager添加小圆点
ViewPager添加小圆点很简单,但是如果是网络图片可能就不太好做了,所以我这里给出一种方法,当然你也可以用其他的 1.主界面xml <?xml version="1.0" ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- 让你Android开发更简单
转载:http://www.jianshu.com/p/22ff8b5fdadc 搭建一个新的Android项目,你会怎么做? 每个人对应用框架的理解不相同,但是最终达到的效果应该是一样: ①降低项目 ...
- Android开发5:应用程序窗口小部件App Widgets的实现
前言 本次主要是实现一个Android应用,实现静态广播.动态广播两种改变 widget内容的方法,即在上篇博文中实验的基础上进行修改,所以此次实验的重点是AppWidget小部件的实现啦~ 首先,我 ...
- Android开发-各种各样好看漂亮的进度条,指示器,加载提示汇总
导读:之前项目中用到一些进度条,找了不少,打算写个demo自己总结一下,留着以后用, 有些是自己写的,有些是github上找的别人的库,如果大家觉得好看可以用,直接下载复制代码到项目里就可以用,ok ...
- Android开发之简单的电子相册实现
电子相册的效果图和结构图: 图片资源的文件: package com.example.electronicalbum; public interface ImageResource { //用一个 ...
- 【Android开发】简单好用的阴影库 ShadowLayout
先来看一张使用 ShadowLayout 库实现的各种阴影的效果图,如下图所示: 如上图所示,通过使用 ShadowLayout 可以控制阴影的颜色.范围.显示边界(上下左右四个边界).x 轴和 y ...
- Android开发环境搭建中的一些小问题记录
1.由于市场上大多数教程是基于Eclipse,而AndroidStudio显然是大势所趋,所有我在电脑上同时搭建了两个IDE,直接在官网下载AndroidStudio比较好,因为SDK,AVD都集成了 ...
随机推荐
- Django(Python)前后端交互
使用Django中自带的模板 前端通过form 表单向后端提交数据 # /template/demo/demo.html {% if result == 1 %} <p> 插入成功 < ...
- SpringMVC的配置和使用
SpringMVC的配置和使用 什么是SpringMVC? SpringMVC是Spring家族的一员,Spring是将现在开发中流行的组件进行组合而成的一个框架!它用在基于MVC的表现层开发,类似于 ...
- 使用 TRESTClient 與 TRESTRequest 作為 HTTP Client 之二 (POST 檔案)
使用 HTML 进行文件上传,已经是很平常的应用了,在手机App里面,也常常会用到这个作业,例如拍照上传,或是从相簿选取照片上传,都是很常见的. 在 HTML 的 Form 里面,要让使用者选择文件上 ...
- VsCode 使用专用编程字体FiraCode
FiraCode资料:https://github.com/tonsky/FiraCode PHP代码效果如下: VsCode 配置中添加: "editor.fontFamily" ...
- [Swift]LeetCode221. 最大正方形 | Maximal Square
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's and re ...
- [Swift]LeetCode276. 粉刷栅栏 $ Paint Fence
There is a fence with n posts, each post can be painted with one of the k colors. You have to paint ...
- python-os模块使用
1.合并路径 os.path.join("c:\\music\\ap\\0","mav.mp3") 'c:\\music\\ap\\0\\mav.mp3' 2. ...
- [Abp 源码分析]九、事件总线
0.简介 事件总线就是订阅/发布模式的一种实现,本质上事件总线的存在是为了降低耦合而存在的. 从上图可以看到事件由发布者发布到事件总线处理器当中,然后经由事件总线处理器调用订阅者的处理方法,而发布者和 ...
- scala调用Linux命令行
在 scala 里面存在 调用 Linux 命令行的函数: import scala.sys.process._ 执行的方法也不难: import scala.sys.process._ /** * ...
- 【Docker】(3)---linux部署Docker、Docker常用命令
linux部署Docker.Docker常用命令 本次部署Linux版本:CentOS 7.4 64位. 说明: 因为Docker是基于Linux 64bit的 所以Docker要求64位的系统且内核 ...