程序猿媛:滑动翻页+区域点击事件
Android GridView
滑动翻页+区域点击事件
如有转载,请保留原文地址:“http://www.cnblogs.com/LuoYer/p/3409988.html”,谢谢!
声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。
程序猿媛 系统博文,发表在 http://my.oschina.net/gluoyer/blog,欢迎!
本文介绍了,利用GrideView的扩展,结合ViewPager设置FragmentPagerAdapter,实现如下功能:
- 九宫格样式显示列表项,可左右滑动切换页面;
- 点击空白区域,显示和隐藏悬浮内容。
首先,看下实现效果:
- 九宫格样式显示列表,左右滑动切换页面
九宫格样式,自然想到GrideView;而左右滑动切换,又是ViewPager的强项。此例结合了这两者来实现。
ViewPager的内容可以设置FragmentPagerAdapter,即:每一项都可以是一个Fragment。再为每个Fragment设置一个包含3x3的GrideView,就是功能实现的基础。
代码实现了ChapterAdapter,继承字FragmentPagerAdapter:
1 public class ChapterAdapter extends FragmentPagerAdapter{ 2 public final static int CHAPTER_PAGE_NUM = 9; 3 private ArrayList<Fragment> mFragments; 4 5 public ChapterAdapter(FragmentManager fm, ArrayList<ArrayList<String>> arrayLists) { 6 super(fm); 7 mFragments = new ArrayList<Fragment>(); 8 int startPos = 0; // count the click offset 9 for(ArrayList<String>list : arrayLists) { 10 mFragments.add(ChapterFragment.getNewInstance(startPos * CHAPTER_PAGE_NUM, list)); 11 startPos ++; 12 } 13 } 14 }
ChapterAdapter
并在其间创建并保存了每个页面的ChapterFragment。
ChapterFragment中,定义了GetView的ChapterGvAdapter,以及点击事件监听onChapterPageClickListener:用于屏蔽自身点击事件,以及后续将要介绍的,显示和隐藏悬浮内容的空白处点击事件。
1 public class ChapterFragment extends Fragment { 2 public void onCreate(Bundle savedInstanceState) { 3 // 这里很重要,填充空白内容 4 if(mNameList.size() < ChapterAdapter.CHAPTER_PAGE_NUM) { 5 for(int i=mNameList.size(); 6 i<ChapterAdapter.CHAPTER_PAGE_NUM; i++) { 7 mNameList.add(null); 8 } 9 } 10 private class ChapterGvAdapter extends BaseAdapter { 11 // 稍后介绍 12 } 13 // 各项及空白处点击事件监听 14 public interface onChapterPageClickListener { 15 public abstract void onChapterItemClick(int position, String name); 16 public abstract void onChapterSpaceClick(); 17 } 18 }
ChapterFragment
其中,onCreate中,填充空白处很重要,请注意了解。因为,不可能保证每页恰好9项内容,所以,添加特殊的null内容,在添加View的时候,设置其点击事件,避免点击无响应的情况。
- 点击空白区域,显示和隐藏悬浮内容
此部分功能,关键部分为:
1.布局文件嵌套空白区域;
2.ChapterGvAdapter的getView中设置事件监听。
一、布局文件嵌套空白区域
1 <LinearLayout 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" 4 android:paddingLeft="16dip" 5 android:paddingRight="16dip" 6 android:paddingTop="20dip" 7 android:paddingBottom="20dip" 8 android:gravity="center" > 9 <LinearLayout 10 android:id="@+id/cpt_gv_item_select_region" 11 android:clickable="true" > 12 <!-- set default background, to hold the sapce for empty item --> 13 <ImageView 14 android:id="@+id/cpt_gv_item_img" 15 android:src="@drawable/ic_launcher"/> 16 <TextView 17 android:id="@+id/cpt_gv_item_name" /> 18 </LinearLayout> 19 </LinearLayout>
chapter_gridview_item.xml
可以看到,最外层的LinearLayout(L1)设置了padding属性。将cpt_gv_item_select_region的LinearLayout(L2)代表的实际内容区域的范围压缩。
这样,我们设置了L1和L2的点击事件之后,点击在L2区域,就触发了L2的点击事件,处理onChapterItemClick事件,模拟GrideView项点击事件;而点击在L1的padding区域,就触发了L1的点击事件,去处理onChapterSpaceClick事件,就是增加的空白区域点击事件响应了。
二、ChapterGvAdapter的getView中设置事件监听
1 private class ChapterGvAdapter extends BaseAdapter { 2 public View getView(final int position, View convertView, ViewGroup parent) { 3 // shadow the default GridView item click event 4 convertView.setOnClickListener(new OnClickListener() { 5 @Override 6 public void onClick(View v) { 7 mClickListener.onChapterSpaceClick(); 8 } 9 }); 10 // Has content, set its click listener 11 if(null != mNameList.get(position)) { 12 holder.mSelectRegion.setOnClickListener(new OnClickListener() { 13 @Override 14 public void onClick(View v) { 15 mClickListener.onChapterItemClick(mStartPos + position, mNameList.get(position)); 16 } 17 }); 18 Utils.setVisible(holder.mSelectRegion); 19 holder.mName.setText(mNameList.get(position)); 20 } 21 // no content, do the same as convertView do. 22 // if not set this listener, click no content space will no response. 23 else { 24 holder.mSelectRegion.setOnClickListener(new OnClickListener() { 25 @Override 26 public void onClick(View v) { 27 mClickListener.onChapterSpaceClick(); 28 } 29 }); 30 Utils.setInvisible(holder.mSelectRegion); 31 } 32 // Default image, do transfer and set what your want, like i set name upside. 33 holder.mIcon.setImageResource(R.drawable.ic_launcher); 34 return convertView; 35 } 36 }
ChapterGvAdapter
代码中,可以比较明确的看到,各个区域监听事件的设置情况。
至此,主要思路阐述完毕,悬浮内容的显示和隐藏,在空白区域点击事件中进行处理。内容的实现请查看源码,不赘述,谢谢阅读!
因为涉及到后续的更新,为了方便源码的管理和更新,采取了应用的方式来获取源码,保证可用。
源码请于以下途径获取“http://mail.sina.com.cn/netdisk/download.php?id=21a861dbceca3ee79e1afa0341fa3f04fa”。
获取成功及压缩文件打开如下:
转载于:https://www.cnblogs.com/LuoYer/p/3409988.html
程序猿媛:滑动翻页+区域点击事件相关推荐
- 程序猿媛一:Android滑动翻页+区域点击事件
2019独角兽企业重金招聘Python工程师标准>>> 滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. ...
- 微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果 效果图: 源码: <view class="mainFra ...
- vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- Android中实现滑动翻页—使用ViewFlipper
有一些场景,我们需要向用户展示一系列的页面.比如我们正在开发一个看漫画的应用,可能就需要向用户展示一张一张的漫画图片,用户使用手指滑动屏幕,可以在前一幅漫画和后一幅漫画之间切换.这个时候ViewFli ...
- 滑动翻页效果实现和移动端click事件问题
前述 本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文 最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
- h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- Android学习笔记之滑动翻页(屏幕切换)
如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件-ViewFlipper 这个控件是 ...
- Unity中常用的单例模式、对象池的脚本模板,连按退出和滑动翻页或放大缩小的功能实现,以及属性在代码中的灵活使用
1.单例模式的脚本模板: Unity中针对一些常用的manager可以使用单例模式,用于统一的功能管理: //普通单例,不需要继承MonoBehavior,不用挂载在GameObject上 publi ...
- php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码,废话不多说了,直接给大家上 - phpStudy...
NGUI实现滑动翻页效果实例代码 废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...
最新文章
- GdiPlus[44]: IGPGraphics (三) 关于文本绘制续 - IGPStringFormat
- mysql 分库分表 ~ 柔性事务
- OpenGL ES之基本简介和渲染流程
- Confluence 6 使用 Apache 和 mod_proxy 添加 SSL和其他
- swap关于指针的使用
- 阿里AI再出神器,“你是什么垃圾”一拍便知
- java使用hashset_Java集合(二)HashSet的使用
- 自拍会不会被大数据_不会搭建大数据平台,我被老板优化了...
- C# WebBrowser准确判断网页最终装载完毕
- 文件批量改名特工 v1.0 怎么用
- 一键解决Windows聚焦不更新的方法
- 第一次接触低代码平台 AppCube,还是有点门槛的
- 影响下载速度的因素--总结
- 广联达报错access_广联达软件报错问题汇总和解决方案.doc
- 如何用C语言画立体几何图形,立体几何图形公式大全
- rop检查_他山之石丨详解抗VEGF治疗在ROP诊疗中的应用
- 关于食品安全,你应该知道的60件事
- Google colab-思腾云
- Error: JAVA_HOME is not set
- 回溯算法(全排列、组合、N皇后问题)
热门文章
- vs Asp.net4.5尚未在web服务器上注册解决办法
- AMD发布22.8.2驱动,支持《黑道圣徒·重制版》
- 10.一键生成个人微信朋友圈数据电子书
- Ribbon自定义负载均衡算法
- 连续邮资问题的回溯法解决办法
- Linux中误删/root目录的恢复方法
- Nginx源码阅读:共享内存ngx_shm_t和它的组织方式ngx_shm_zone_t、ngx_list_t
- c++当中的istringstream 和 ostringstream
- 【Sketchnotes】Machine Learning for Beginners 初学者机器学习
- 【论文】Concurrent Segmentation and Object Detection CNNs for Aircraft Detection and Identification