Android recyclerView横条指示器实现淘宝菜单模块
电商首页菜单模块,可以横向滑动,底部的滑动位置指示器该如何实现呢?
实现思路:
1.上方横滑列表可以直接使用RecyclerView实现;
2.下方的指示器:
(1).计算出RecyclerView划出屏幕的距离w1和剩余宽度w2的比例y,y = w1 / (总宽度w3 - 可使视区域宽度w4);
(2).计算出指示器该移动的距离w5 = y * (指示器的总宽度w6 - 滑块宽度w7);
(3).指示器布局实现:
<RelativeLayout android:id="@ id/parent_layout" android:layout_marginTop="10dp" android:layout_width="80dp" android:layout_height="4dp" android:layout_gravity="center" android:background="@drawable/bg_store_classify_normal"> <View android:id="@ id/main_line" android:layout_width="40dp" android:layout_height="4dp" android:layout_centerVertical="true" android:background="@drawable/bg_store_classify_selected" /> </RelativeLayout>
(4).代码调用:
rcvClassifyTypes.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); //整体的总宽度,注意是整体,包括在显示区域之外的 //滚动条表示的总范围 int temp = rcvClassifyTypes.computeHorizontalScrollRange(); if (temp > range) { range = temp; } //滑块的偏移量 int offset = rcvClassifyTypes.computeHorizontalScrollOffset(); //可视区域长度 int extent = rcvClassifyTypes.computeHorizontalScrollExtent(); //滑出部分在剩余范围的比例 float proportion = (float) (offset * 1.0 / (range - extent)); //计算滚动条宽度 float transMaxRange = parentLayout.getWidth() - childline.getWidth(); //设置滚动条移动 childline.setTranslationX(transMaxRange * proportion); } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Android之IphoneTreeView带组指示器的ExpandableListView效果
之前实现过一次这种效果的ExpandableListView:http://www.jb51.net/article/38482.htm,带效果比较挫,最近,在参考联系人源码PinnedHeaderListView,以及网上各位大侠的源码,封装了一个效果最好,而且使用最简单的IphoneTreeView,下面先看看效果图: 首先让我们看看封装得比较完善的IphoneTreeView: 复制代码 代码如下: public class IphoneTreeView extends Expandab
-
Android之带group指示器的ExpandableListView(自写)
我们都知道Android缺省的ExpandableListView的group header无法固定在界面上,当向下滚动后,不能对当前显示的那些child 指示出它们归属于哪个group,在网上搜了很多关于仿手机QQ好友分组效果的ExpandableListView,发现都不尽如意,于是乎在别人的基础上改进了一点点,其实原理还是差不多的,只是增加了往上挤出去的动画效果,而且更加简单,只不过还是没有完全到达跟QQ一样的效果,希望有高手能实现更加逼真的效果,下面我们先看看效果图: 我这里没有把Ex
-
Android应用中仿今日头条App制作ViewPager指示器
一.概述 顶部ViewPager指示器的字体变色,该效果图是这样的: 大概是今天头条的app,神奇的地方就在于,切换ViewPager页面的时候,顶部指示器改成了字体颜色的变化,个人觉得还是不错的. 那么核心的地方就是做一个支持字体这样逐渐染色就可以了,我大概想了32s,扫描了一些可能实现的方案,最终定位了一个靠谱的,下面我就带大家开始实现的征程. 实现之前贴一下我们的效果图: 1.简单使用 效果如上图了,关于颜失色的改变我添加了两个方向,一个是左方向,一个是有方向. 单纯的使用,可能觉得没什么
-
Android TabLayout设置指示器宽度的方法
anroid 5.0 Design v7 包中引用了TabLayout 简单快速的写出属于自己的Tab切换效果 如图所示: 但是正常使用中你发现无法设置tablayout指示器的宽度.查看源码你会发现设计师将指示器的宽度设置成TabView最大的宽度.并且设计师并没有给我们暴漏出接口,这导致有时使用TabLayout无法满足一些产品设计要求,这么好的组件无法使用还需要自定义费时费力.这个时候我们可以通过反射机制拿到TabLayout中的指示器对象对它的宽度进行处理就可以满足我们的要求:具体代码
-
Android开发实现的ViewPager引导页功能(动态加载指示器)详解
本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现 布局的话使用相对布局~ 那现在来看看布局吧: activi
-
Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件
最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version
-
Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)
ViewPagerIndicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator 自定义一个Indicator继承LinearLayout,在构造方法里面设置画笔的一些属性 public ViewPagerIndicator(Context context, AttributeSet
-
Android实现仿网易新闻的顶部导航指示器
我们知道,页面导航器(Navigator)在几乎所有的项目中都会用到,平时大多数时候为了节省时间,都会直接在github上面拿别人的开源项目来用,最近自己在复习自定义View,就尝试封装了一下,源码参考项目PagerSlidingTabStrip 大家先来看一下效果图 基于文字的页面导航器 基于图片的页面导航器 使用方法 主要步骤分为三步 1)在xml文件里面 <com.xujun.viewpagertabindicator.TabPagerIndicator android:id="@+
-
Android recyclerView横条指示器实现淘宝菜单模块
电商首页菜单模块,可以横向滑动,底部的滑动位置指示器该如何实现呢? 实现思路: 1.上方横滑列表可以直接使用RecyclerView实现: 2.下方的指示器: (1).计算出RecyclerView划出屏幕的距离w1和剩余宽度w2的比例y,y = w1 / (总宽度w3 - 可使视区域宽度w4): (2).计算出指示器该移动的距离w5 = y * (指示器的总宽度w6 - 滑块宽度w7): (3).指示器布局实现: <RelativeLayout android:id="@ id/pare
-
Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图: 主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.
-
基于jQuery模拟实现淘宝购物车模块
这是网页版淘宝中购物车的页面 注意给checkbox添加事件就是用change() 给button添加事件就是用click() 1.每次点击+号,根据文本框的值乘以当前商品的价格就是商品的小计 2.只能增加本商品的小计,就是当前商品的小计模块 3.修改普通元素的内容是text方法 4.当前商品的价格要把¥符号去掉再相乘 截取字符串substr() 5.parents(‘选择器’)可以返回指定祖先元素4 6.最后计算的结果如果想要保留两位小数通过toFixed(2)方法 7.用户也可以直接修改表单
-
Android自定义流式布局实现淘宝搜索记录
本文实例为大家分享了Android实现淘宝搜索记录的具体代码,供大家参考,具体内容如下 效果如下: 废话不多说 实现代码: attrs.xml <declare-styleable name="TagFlowLayout"> <!--最大选择数量--> <attr name="max_select" format="integer"/> <!--最大可显示行数--> <attr name=&q
-
Android仿制淘宝滚动图文条的示例代码
开篇废话 产品让我们将"我的"页面改版,上面加了一个广告条,非常类似淘宝"我的"页面的广告条,然后就自己写了一个,方法比较一般,如果大家有更好的办法请留言给我,谢谢. 滚动图文条之GitHub地址 ,帮我点个Star. 滚动图文条 大概效果就是下图这样. 滚动图文条 思路 写一个不可用手滑动的RecyclerView 使用Handler定时RecyclerView自动滑动到下一个Item 使用smoothScrollToPosition使其平滑地滑动 开始工作 做一
-
Android中实现淘宝购物车RecyclerView或LIstView的嵌套选择的逻辑
使用了RecyclerView嵌套RecyclerView的方案. 购物车的第一个界面为RecyclerView,每个Item里面包含一个店铺.在Item中使用RecyclerView包含店铺和店铺的多个商品. 实现思路: 使用接口回调将第二个adapter的商品选择的监听事件回调给第一个adapter后再在第一个adapter中回调给MainActivity. 使用接口回调将第一个adapter的商品选择的监听事件回调给MainActivity. 在MainActivity中处理第一个adap
-
Android仿淘宝头条向上滚动广告条ViewFlipper
所谓前人栽树,后人乘凉,在此感谢博主的贡献. 参考博文: 仿淘宝首页的淘宝头条View垂直滚动 欢迎关注我的微信公众号 不只是原创技术文章,更多的是对生活的思考总结 我在博主的基础上做了如下工作: 修复了滚动条第二条点击事件无法触发这个bug: 充分简化了自定义ViewFlipper类的代码: 添加了直接使用ViewFlipper控件实现同样效果: 先上效果图: 这里使用了一个比较少用的控件:ViewFlipper 学习一个未知的东西,第一步就是要搞懂what:学的这个东西是什么以及能够实现什么
-
Android控件ViewFlipper仿淘宝头条垂直滚动广告条
ViewFlipper的使用,仿淘宝头条垂直滚动广告条,供大家参考,具体内容如下 学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本事了.下面是淘宝头条广告的原效果 下面是我们今天要实现的效果,图片是Gif,运行效果是很流畅的,由于这个图片反应有点慢,会浪费大家点时间,所以我把它调快了,大家可以掏出手机打开淘宝看,一模一样的 从源码可以看出,其实ViewFlipper间接的继承了FrameLayout,
-
Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
最近跳槽去新公司,接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现. 需求和淘宝等电商的功能大体差不多,最上面一个搜索框,下面显示搜索历史记录.在EditText里输入要搜索的关键字后,按软键盘的搜索按键/延迟xxxxms后自动搜索.然后将搜索的内容展示给用户/提示用户没有搜到相关信息. 历史记录是按时间排序的,最新的在前面,输入以前搜索过的关键字,例如牛仔裤(本来是第二条),会更新这条记录的时间,下次再看,牛仔裤的排列就在第一位了.并且有清除历史记录的功能. 整理需求,大致需
-
Android控件SeekBar仿淘宝滑动验证效果
SeekBar是一个拖动条控件,最简单的案例就是我们的调节音量,还有音频视频的播放,传统的SeekBar样式,如图 传统的实现太简单,不足以让我们到能装逼的地步.本来是打算实现滴滴出行滑动完成订单的效果,可惜找不到效果图,今天也就用淘宝的滑动验证来作为实例 1.1 实现分析 SeekBar:使用progressDrawable属性自定义SeekBar 拖动块:使用thumb属性更改,其实就是一张图片 文字:使用RelativeLayout嵌套在一起 1.2 实现布局 <?xml version=
随机推荐
- 详解AngularJS中$filter过滤器使用(自定义过滤器)
- 自动切换能播放音乐列表 vbs
- Python pip安装lxml出错的问题解决办法
- AngularJS ng-blur 指令详解及简单实例
- 详解SpringBoot初始教程之Tomcat、Https配置以及Jetty优化
- asp.net中Null在从数据库读取的时候的一点点小技巧
- 某大型网络公司应聘时的笔试题目附答案
- 一个取得文件扩展名的函数
- Linux系统递归生成目录中文件的md5的方法
- vc6编写python扩展的方法分享
- 将Session值储存于SQL Server中
- sql语句之数据操作介绍
- MSSQL差异备份取系统权限的相关软件下载
- DevExpress根据条件设置GridControl RepositoryItem是否可编辑
- PHP 二维关联数组根据其中一个字段排序(推荐)
- 用new Image()预先加载图片真的有用吗?
- EasyUI 结合JS导出Excel文件的实现方法
- Zero Clipboard js+swf实现的复制功能使用方法
- javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
- IIS 7 中设置文件上传大小限制设置方法