摘要：
ViewPager+GrideView实现滑动翻页；扩展GrideView，实现区域点击事件。
ViewPager+GrideView
本文介绍，利用GrideView扩展，结合ViewPager设置FragmentPagerAdapter，实现如下功能：
首先，看下实现效果：
下面介绍实现思路及部分代码，文尾附录全部源码获取途径。
一、九宫格样式显示列表，左右滑动切换页面
九宫格样式，自然想到GrideView；而左右滑动切换，又是ViewPager的强项。此例结合了这两者来实现。
ViewPager的内容可以设置FragmentPagerAdapter，即：每一项都可以是一个Fragment。再为每个Fragment设置一个包含3×3的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的时候，设置其点击事件，避免点击无响应的情况。
二、点击空白区域，显示和隐藏悬浮内容
此部分关键部有两个：
布局文件嵌套空白区域；
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，不赘述，谢谢！
——————————————————————————————————–
因为涉及到后续的更新，为了方便源码的管理和更新，采取了应用的方式来获取源码，保证可用。
（哎，没有自己的服务器，依托网络资源，大家体谅一下）
应用运行后，按钮“章节左右滑动，点击空白事件”，点击可进入效果演示，如文初截图所示；
按手机的菜单键，显示“关于”，点击进入笔者相关页面，并在底部提供按钮“获取源码”。
下面附录，运行初始页面；获取源码成功提示页面；及打开源码压缩文件截图：
