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)代表的实际内容区域的范围压缩。

    这样,我们设置了L1L2的点击事件之后,点击在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

程序猿媛:滑动翻页+区域点击事件相关推荐

  1. 程序猿媛一:Android滑动翻页+区域点击事件

    2019独角兽企业重金招聘Python工程师标准>>> 滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. ...

  2. 微信小程序实现滑动翻页效果源码附效果图

    微信小程序开发交流qq群   173683895    承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果 效果图: 源码: <view class="mainFra ...

  3. vue实现上下滑动翻页_基于vue实现上下滑动翻页效果

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  4. Android中实现滑动翻页—使用ViewFlipper

    有一些场景,我们需要向用户展示一系列的页面.比如我们正在开发一个看漫画的应用,可能就需要向用户展示一张一张的漫画图片,用户使用手指滑动屏幕,可以在前一幅漫画和后一幅漫画之间切换.这个时候ViewFli ...

  5. 滑动翻页效果实现和移动端click事件问题

    前述 本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文 最近做了一个小活动,里面要用到一个效果:滑动翻页. ...

  6. h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  7. Android学习笔记之滑动翻页(屏幕切换)

    如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件-ViewFlipper 这个控件是 ...

  8. Unity中常用的单例模式、对象池的脚本模板,连按退出和滑动翻页或放大缩小的功能实现,以及属性在代码中的灵活使用

    1.单例模式的脚本模板: Unity中针对一些常用的manager可以使用单例模式,用于统一的功能管理: //普通单例,不需要继承MonoBehavior,不用挂载在GameObject上 publi ...

  9. php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码,废话不多说了,直接给大家上 - phpStudy...

    NGUI实现滑动翻页效果实例代码 废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...

最新文章

  1. GdiPlus[44]: IGPGraphics (三) 关于文本绘制续 - IGPStringFormat
  2. mysql 分库分表 ~ 柔性事务
  3. OpenGL ES之基本简介和渲染流程
  4. Confluence 6 使用 Apache 和 mod_proxy 添加 SSL和其他
  5. swap关于指针的使用
  6. 阿里AI再出神器,“你是什么垃圾”一拍便知
  7. java使用hashset_Java集合(二)HashSet的使用
  8. 自拍会不会被大数据_不会搭建大数据平台,我被老板优化了...
  9. C# WebBrowser准确判断网页最终装载完毕
  10. 文件批量改名特工 v1.0 怎么用
  11. 一键解决Windows聚焦不更新的方法
  12. 第一次接触低代码平台 AppCube,还是有点门槛的
  13. 影响下载速度的因素--总结
  14. 广联达报错access_广联达软件报错问题汇总和解决方案.doc
  15. 如何用C语言画立体几何图形,立体几何图形公式大全
  16. rop检查_他山之石丨详解抗VEGF治疗在ROP诊疗中的应用
  17. 关于食品安全,你应该知道的60件事
  18. Google colab-思腾云
  19. Error: JAVA_HOME is not set
  20. 回溯算法(全排列、组合、N皇后问题)

热门文章

  1. vs Asp.net4.5尚未在web服务器上注册解决办法
  2. AMD发布22.8.2驱动,支持《黑道圣徒·重制版》
  3. 10.一键生成个人微信朋友圈数据电子书
  4. Ribbon自定义负载均衡算法
  5. 连续邮资问题的回溯法解决办法
  6. Linux中误删/root目录的恢复方法
  7. Nginx源码阅读:共享内存ngx_shm_t和它的组织方式ngx_shm_zone_t、ngx_list_t
  8. c++当中的istringstream 和 ostringstream
  9. 【Sketchnotes】Machine Learning for Beginners 初学者机器学习
  10. 【论文】Concurrent Segmentation and Object Detection CNNs for Aircraft Detection and Identification