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

          滑动翻页+区域点击事件

                          ViewPager+GrideView

声明：博文为原创，文章内容为，效果展现，思路阐述，及代码片断。文尾附注源码获取途径。

  转载请保留原文出处“http://my.oschina.net/gluoyer/blog”，谢谢！

本文介绍，利用GrideView扩展，结合ViewPager设置FragmentPagerAdapter，实现以下功能：

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

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

首先，看下实现效果：

 

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

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

    九宫格样式，天然想到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的时候，设置其点击事件，避免点击无响应的状况。

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

    此部分关键部有两个：

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

    这样，咱们设置了L1和L2的点击事件以后，点击在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”。

      （哎，没有本身的服务器，依托网络资源，你们体谅一下）

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

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

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

   

   全文完，但愿对您有帮助，谢谢！

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

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