程序猿媛一:Android滑动翻页+区域点击事件
滑动翻页+区域点击事件
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)代表的实际内容区域的范围压缩。
这样,我们设置了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”,谢谢!另:博客园同步发布。
更多相关文章
- Android实现图片轮播切换实例代码
- Android(安卓)framework层 按键的处理流程
- Android(安卓)NDK编译选项设置
- Android竖式SeekBar实现及demo
- Android在java代码中设置margin
- Android(安卓)进度条 ProgressBar (隐藏、出现、加载进度)
- 《Monkey Android》第6课点击事件的四种写法
- AndroidStudio创建TV-APP,出现Error:(28, 13) Failed to resolve:
- Android的语言设置(一)