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

原创
2013/11/09 17:30
阅读数 1W

          滑动翻页+区域点击事件

                          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”,谢谢!另:博客园同步发布。

    展开阅读全文
    打赏
    1
    70 收藏
    分享
    加载中
    mark
    2013/11/16 21:33
    举报
    更多评论
    打赏
    1 评论
    70 收藏
    1
    分享
    在线直播报名
    返回顶部
    顶部