Android滚动页面位置指示器:CircleIndicator
Android滚动页面位置指示器:CircleIndicator
CircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器,指示当前页面在总的页面中的位置和前后位置关系,github上的项目主页是:https://github.com/ongakuer/CircleIndicator
其效果如图所示:
可以看到,选中和未被选中时候的球的大小并不相同,且颜色在CircleIndicator中只有一个颜色,未选中的颜色只是选中时候颜色的半透明。但是在有些设计需求中,设计会把滚动的指示小圆球都要求一样的大小,且在滚动指示位置变化时候,需要用不同的颜色区分。这种情况下,就需要对CircleIndicator进行二次开发以适应自身项目的设计需要。针对这种情况,我对CircleIndicator进行了二次开发,实现的结果如图:
(1) 指示器颜色区分。
首先需要在res/drawable下面定义两个不同的shape资源文件。一个用于当前被选中的那个小球位置。另外一个用于未被选中的位置显示的shape资源。然后修改CircleIndicator.java代码中的部分节:
private int mIndicatorBackgroundResId = R.drawable.red_radius;
private int mIndicatorUnselectedBackgroundResId = R.drawable.white_radius;
mIndicatorBackgroundResId =
typedArray.getResourceId(R.styleable.CircleIndicator_ci_drawable,
R.drawable.red_radius);
mIndicatorUnselectedBackgroundResId =
typedArray.getResourceId(R.styleable.CircleIndicator_ci_drawable_unselected,
R.drawable.white_radius);
(2) CircleIndicator圆球一致相同。
CircleIndicator原先项目中之所以会出现选中与未选中的小球大小不一致,是因为CircleIndicator在项目中在位置变化 时候对小圆球进行动画缩放,修改res/animator下的scale_with_alpha.xml文件中关于缩放的设置,简单期间,缩放的值设置成1.0~1.0(即维持原大小不缩放)。
新的CircleIndicator库我已经修改好代码,运行结果如图中底部中间位置的三个不同颜色的小球:
我把心的库重新push到新的github主页,链接地址:https://github.com/zhangphil/CircleIndicator_Phil
使用时候直接作为库引入即可。
附录:
1,《ViewPager实现TabHost动态添加、删除Fragment,用红色小圆球指示当前页面》链接:http://blog.csdn.net/zhangphil/article/details/43668197
2,《ViewPager动态添加、删除Fragment,且提供红色小圆球指示当前位置》链接:http://blog.csdn.net/zhangphil/article/details/43671293
3,《ViewPager+Fragment实现Tabhost,动态添加删除Fragment,可供第三方使用的类库》链接:http://blog.csdn.net/zhangphil/article/details/43700807
4,《ViewPager+Fragment添加一行若干小红球滚动指示器指示当前ViewPager翻阅位置(可供第三方使用的类)》链接:http://blog.csdn.net/zhangphil/article/details/43732039
Android滚动页面位置指示器:CircleIndicator的更多相关文章
- android一个页面上多个listview
android一个页面上多个listview,在滚动的时候,需要两个listview能够一起滚动,看起来是一个view. 这个功能的具体实现,参考: http://blog.csdn.net/xia2 ...
- 用RollViewPager实现Android滚动banner
最近项目中要实现一个循环滚动的banner,效果如下图 这个自己写实在是不方便,而且写出来也很难保证没有bug和性能缺陷,好在网上有人开源了一个实现滚动banner的RollViewPager框架,亲 ...
- 向下滚动页面加载图片的js
js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
- Android实现页面跳转、ListView及其事件
Android实现页面跳转.ListView及其事件 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 进入主页面后,使用ListView实现特 ...
- Android 一个页面上下两个ListView的页面显示
Android 一个页面上下两个ListView,当上面的ListView过长时,下面的List基本没有了滑动空间,查阅网上资料,解决办法基本是采用ScrollView做页面滑动,notifyData ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
- Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发
原文 Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发 前言 大部份的Android 都具有实体或虚拟的Back键. 因此在处理多页面应用程式时 ...
随机推荐
- shell getopts
1, 分类: LINUX getopts命令内置于shell中,可以获取由单个字符所指定的有效命令行参数,单个字符有一个‘ - ’号或‘ + ’号. 简单的说,比如运行命令: iptables -t ...
- 01_C++学习笔记_入门
1.float类型只能表示数字里面的前6位或者前7位.也就是说c++只能保证float类型的数字的前6位是正确的.如果要求的精度更高的话,请使用double和long double. float精度是 ...
- HashMap的简单实现
基本概念 Map 别名映射表,也叫关联数组,基本思想是它维护的键-值(对)关联,因此可以用键查找值,也有放入键值的操作,下面根据定义自己来实现一个Map,首先应该想到的是数组,因为大多数Java集合类 ...
- 分享几个自己喜欢的前端UI框架
http://www.layui.com/ http://element-cn.eleme.io/#/zh-CN/component/installation
- AJPFX总结java开发常用类(包装,数字处理集合等)(二)
二:进军集合类 集合其实就是存放对象的容器,专业点说就是集合是用来存储和管理其他对象的对象,即对象的容器.集合可以扩容,长度可变,可以存储多种类型的数据,而数组长度不可变,只能存储单一类型的元素 用一 ...
- Spring Cloud Config 使用Bus的动态配置中心
server端配置 POM文件 <dependency> <groupId>org.springframework.boot</groupId> <artif ...
- vue利用计算属性做(展开收起)小例子
<template> <div class="wrap"> <div class="box"> <div v-for= ...
- java异常处理中的细节
首先看一段代码 public class Test{ public static String output=""; public static void foo(int i){ ...
- ES6 export default 和 export 的区别
export default 和 export 区别: 1.export与export default均可用于导出常量.函数.文件.模块等 2.你可以在其它文件或模块中通过import+(常量 | 函 ...
- js中数组删除 splice和delete的区别,以及delete的使用
var test=[];test[1]={name:'1',age:1};test[2]={name:'2',age:2};test[4]={name:'3',age:3}; console.log( ...