文档章节

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

花佟林雨月
 花佟林雨月
发布于 2013/11/09 17:30
字数 1289
阅读 3809
收藏 69

          滑动翻页+区域点击事件

                          ViewPager+GrideView

声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。

  转载请保留原文出处http://my.oschina.net/gluoyer/blog,谢谢!

本文介绍,利用GrideView扩展,结合ViewPager设置FragmentPagerAdapter,实现如下功能:

    • 九宫格样式显示列表项,可左右滑动切换页面

    • 点击空白区域,显示和隐藏悬浮内容。

    首先,看下实现效果:

     

    下面介绍实现思路及部分代码,文尾附录全部源码获取途径。

    一、九宫格样式显示列表,左右滑动切换页面

        九宫格样式,自然想到GrideView;而左右滑动切换,又是ViewPager的强项。此例结合了这两者来实现。

        ViewPager的内容可以设置FragmentPagerAdapter,即:每一项都可以是一个Fragment。再为每个Fragment设置一个包含3x3的GrideView,就是功能实现的基础。

        代码实现了ChapterAdapter,继承字FragmentPagerAdapter:

    public class ChapterAdapter extends FragmentPagerAdapter{
        public final static int CHAPTER_PAGE_NUM = 9;
        private ArrayList<Fragment> mFragments;
        
        public ChapterAdapter(FragmentManager fm,
    				ArrayList<ArrayList<String>> arrayLists) {
            super(fm);
            mFragments = new ArrayList<Fragment>();
            int startPos = 0; // count the click offset
            for(ArrayList<String>list : arrayLists) {
                mFragments.add(ChapterFragment
    			.getNewInstance(startPos * CHAPTER_PAGE_NUM, list));
                startPos ++;
            }
        }
    }

        并在其间创建并保存了每个页面的ChapterFragment。

        ChapterFragment中,定义了GetView的ChapterGvAdapter,以及点击事件监听onChapterPageClickListener:用于屏蔽自身点击事件,以及后续将要介绍的,显示和隐藏悬浮内容的空白处点击事件。

    public class ChapterFragment extends Fragment {
        public void onCreate(Bundle savedInstanceState) {
            // 这里很重要,填充空白内容
            if(mNameList.size() < ChapterAdapter.CHAPTER_PAGE_NUM) {
                for(int i=mNameList.size(); 
                    i<ChapterAdapter.CHAPTER_PAGE_NUM; i++) {
                    mNameList.add(null);
                }
            }
        private class ChapterGvAdapter extends BaseAdapter {
            // 稍后介绍
        }
       // 各项及空白处点击事件监听
       public interface onChapterPageClickListener {
            public abstract void onChapterItemClick(int position, String name);
            public abstract void onChapterSpaceClick();
        }
    }

        其中,onCreate中,填充空白处很重要,请注意了解。因为,不可能保证每页恰好9项内容,所以,添加特殊的null内容,在添加View的时候,设置其点击事件,避免点击无响应的情况。

    二、点击空白区域,显示和隐藏悬浮内容

        此部分关键部有两个:

         1. 布局文件嵌套空白区域;

    2. ChapterGvAdapter的getView中设置事件监听。

        Ⅰ、布局文件嵌套空白区域

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="16dip"
        android:paddingRight="16dip"
        android:paddingTop="20dip"
        android:paddingBottom="20dip"
        android:gravity="center" >    
        <LinearLayout
            android:id="@+id/cpt_gv_item_select_region"
            android:clickable="true" >
            <!-- set default background, to hold the sapce for empty item -->
            <ImageView
                android:id="@+id/cpt_gv_item_img"
                android:src="@drawable/ic_launcher"/>    
            <TextView
                android:id="@+id/cpt_gv_item_name" />
        </LinearLayout>
    </LinearLayout>

        可以看到,最外层的LinearLayout(L1)设置了padding属性(大小根据实际需求调整)。将内层的LinearLayout(L2)代表的实际内容区域的范围压缩

        这样,我们设置了L1L2的点击事件之后,点击在L2区域,就触发了L2的点击事件,处理onChapterItemClick回调事件,模拟GrideView项点击事件;而点击在L1的padding区域,就触发了L1的点击事件,去处理onChapterSpaceClick事件,就是增加的空白区域点击事件响应了。

        下面,看一下点击事件的设置。(对了,要记得前面提到的没有9个子项时候null内容的设置

        Ⅱ、ChapterGvAdapter的getView中设置事件监听

    private class ChapterGvAdapter extends BaseAdapter {
        public View getView(final int position, View convertView, ViewGroup parent) {
        // shadow the default GridView item click event
        convertView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mClickListener.onChapterSpaceClick();
            }
        });
        // Has content, set its click listener
        if(null != mNameList.get(position)) {
            holder.mSelectRegion.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mClickListener.onChapterItemClick(mStartPos + position,
    					mNameList.get(position));
                }
            });
            Utils.setVisible(holder.mSelectRegion);
            holder.mName.setText(mNameList.get(position));
        }
        // no content, do the same as convertView do.
        // if not set this listener, click no content space will no response.
        else {
            holder.mSelectRegion.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mClickListener.onChapterSpaceClick();
                }
            });
            Utils.setInvisible(holder.mSelectRegion);
        }
        // Default image, do transfer and set what your want, like i set name upside.
        holder.mIcon.setImageResource(R.drawable.ic_launcher);
        return convertView;
        }
    }

        代码中,可以比较明确的看到,各个区域监听事件的设置情况。同时,演示应用背景也做了设置,可以明确看到点击时的情况。

        至此,主要思路阐述完毕。

        另外,点击空白区域,悬浮内容的显示和隐藏,在回调事件中进行处理。其实现比较简单,回调事件的处理,和内容的设置,请查看源码的ChapterSlideActivity.java,和ChapterToggleView.java,不赘述,谢谢!

      ----------------------------------------------------------------------------------

        因为涉及到后续的更新,为了方便源码的管理和更新,采取了应用的方式来获取源码,保证可用。

       应用下载链接:“http://mail.sina.com.cn/netdisk/download.php?id=21a861dbceca3ee79e1afa0341fa3f04fa”。

          (哎,没有自己的服务器,依托网络资源,大家体谅一下)

        应用运行后,按钮章节左右滑动,点击空白事件”,点击可进入效果演示,如文初截图所示;

        按手机的菜单键,显示“关于”,点击进入笔者相关页面,并在底部提供按钮“获取源码”。

        下面附录,运行初始页面;获取源码成功提示页面;及打开源码压缩文件截图:

    image   

       全文完,希望对您有帮助,谢谢!

    应用下载链接:“http://mail.sina.com.cn/netdisk/download.php?id=21a861dbceca3ee79e1afa0341fa3f04fa

    转载请保留原文地址http://my.oschina.net/gluoyer/blog/175195”,谢谢!另:博客园同步发布。

    © 著作权归作者所有

    共有 人打赏支持
    花佟林雨月
    粉丝 77
    博文 11
    码字总数 10652
    作品 0
    成都
    私信 提问
    加载中

    评论(1)

    java9
    java9
    mark
    程序猿媛三:ExpandableListView二级菜单选择

    二级菜单展开选择列表内容 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”,谢谢! 您可以到博客的“友情链接...

    花佟林雨月
    2013/11/16
    0
    0
    程序猿媛四:Fragment二级菜单双列表

    Fragment二级菜单双列表 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”,谢谢! 您可以到博客的“友情链接”...

    花佟林雨月
    2013/11/19
    0
    0
    程序猿媛六:ListView的Item点击事件(消息传递)

    ListView的Item点击事件(消息传递) 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”,谢谢! 您可以到博客的...

    花佟林雨月
    2013/12/07
    0
    0
    Android 活动|T恤,U盘,爱奇艺会员免费送~速来!!! 仅限前100名!!!!!!

    有人来参加吗?我们小组组织的活动~ 亲爱的程序猿(媛)们,您在开发 Android 程序的过程中有没有遇到以下的情况 用户反馈 XXX 页面卡顿,打不开。但是程序猿哥哥说在我这里是好的呀! 用户反...

    勇哥哥
    2016/05/10
    101
    1
    Android 活动|T恤,U盘,爱奇艺会员免费送~速来!!! 仅限前100名!!!!!!

    亲爱的程序猿(媛)们,您在开发 Android 程序的过程中有没有遇到以下的情况 用户反馈 XXX 页面卡顿,打不开。但是程序猿哥哥说在我这里是好的呀! 用户反馈 APP 在 XX 手机闪退。但是程序猿...

    勇哥哥
    2016/05/10
    219
    3

    没有更多内容

    加载失败,请刷新页面

    加载更多

    Spring Boot 集成 Swagger,生成接口文档就这么简单!

    之前的文章介绍了《推荐一款接口 API 设计神器!》,今天栈长给大家介绍下如何与优秀的 Spring Boot 框架进行集成,简直不能太简单。 你所需具备的基础 告诉你,Spring Boot 真是个牛逼货! ...

    Java技术栈
    28分钟前
    3
    0
    一个简单的js作用域题目(原创)

    var name = 'nnmm' var obj = { name: 'name1', func: () => { console.log(this.name) }, func1: function (){ console.log(this.name) }, son: { ......

    boogoogle
    31分钟前
    2
    0
    SSM整合activeMQ/activeMQ配置

    一、引入依赖 <!-- xbean 如<amq:connectionFactory /> -->    <dependency>        <groupId>org.apache.xbean</groupId>        <artifactId>xbean-spring</artifac......

    嘴角轻扬30
    35分钟前
    2
    0
    小公司出身的程序员,面试咋这么难?!

    小公司出身,被大厂竞争者 KO 以下是一个非常真实的案例,是一个大厂工程师和一个小公司工程师同时求职一个独角兽公司的职位的经历。 一个是985本科学历,出身互联网大厂,四五年经验的样子。...

    编程SHA
    41分钟前
    2
    0
    揭秘:蚂蚁金服bPaaS究竟是什么?

    摘要: 分布式金融核心套件,蚂蚁金服bPaaS究竟是什么东东? 文/图 孙浩峰 去年9月,蚂蚁金服在杭州云栖ATEC发布了分布式金融核心套件bPaaS( Business Platform As a Service ),对外开放自...

    阿里云官方博客
    42分钟前
    1
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部