Android中如何实现多行、水平滚动的分页的Gridview?
功能要求:
(1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接)。
如果单行水平滚动,可以用Horizontalscrollview实现。
如果是多行水平滚动,则结合Gridview(一般是垂直滚动的)和Horizontalscrollview实现。
(2)水平滚动翻页,下面有显示当前页的icon。
1. 实现自定义的HorizontalScrollView(HorizontalScrollView.java):
因为要翻页时需要传当前页给调用者,所以fling函数中自己实现而不要调用父类的fling。
- public class DrawerHScrollView extends HorizontalScrollView {
- private static final String TAG = "DrawerHScrollView";
- private IDrawerPresenter drawerPresenter = null;
- private int currentPage = 0;
- private int totalPages = 1;
- private static Hashtable<Integer, Integer> positionLeftTopOfPages = new Hashtable();
- public DrawerHScrollView(Context context) {
- super(context);
- }
- public DrawerHScrollView(Context context, AttributeSet attrs) {
- super(context, attrs);
- }
- public DrawerHScrollView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- }
- public void cleanup(){
- currentPage = 0;
- totalPages = 1;
- drawerPresenter = null;
- if(positionLeftTopOfPages != null){
- positionLeftTopOfPages.clear();
- }
- }
- public void setParameters(int totalPages, int currentPage, int scrollDisX) {
- Log.d(TAG, "~~~~~setParameters totalPages:"+totalPages +",currentPage:"+ currentPage +",scrollDisX:"+scrollDisX);
- this.totalPages = totalPages;
- this.currentPage = currentPage;
- positionLeftTopOfPages.clear();
- for (int i = 0;i<totalPages;i++){
- int posx = (scrollDisX) * i;
- positionLeftTopOfPages.put(i, posx);
- Log.d(TAG, "~~~~~setParameters i:"+i +",posx:"+posx);
- }
- smoothScrollTo(0, 0);
- }
- public void setPresenter(IDrawerPresenter drawerPresenter ) {
- this.drawerPresenter = drawerPresenter;
- }
- @Override
- public void fling(int velocityX) {
- Log.v(TAG, "-->fling velocityX:"+velocityX);
- boolean change_flag = false;
- if (velocityX > 0 && (currentPage < totalPages - 1)){
- currentPage++;
- change_flag = true;
- } else if (velocityX < 0 && (currentPage > 0)){
- currentPage--;
- change_flag = true;
- }
- if (change_flag){
- int postionTo = (Integer)positionLeftTopOfPages.get(new Integer(currentPage)).intValue();
- Log.v(TAG, "------smoothScrollTo posx:"+postionTo);
- smoothScrollTo(postionTo, 0);
- drawerPresenter.dispatchEvent(totalPages, currentPage);
- }
- //super.fling(velocityX);
- }
- }
2. 布局文件Activity_main.xml:
- <com.example.multilinegridview.DrawerHScrollView
- android:id="@+id/hscrollview"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_margin="10dp"
- android:scrollbars="none"
- android:layout_below="@id/layout_drawer_top"
- android:layout_above="@id/layout_pagenumber"
- android:background="#CCCCCC" >
- <LinearLayout
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal" >
- <GridView
- android:id="@+id/gridView"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" />
- </LinearLayout>
- </com.example.multilinegridview.DrawerHScrollView>
3. IDrawerPresenter接口(IDrawerPresenter.java):
- public interface IDrawerPresenter {
- IDrawerPresenter getInstance();
- void dispatchEvent(int totalPages, int currentPage);
- }
4. DrawerItem
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/layout_item"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:gravity="center"
- android:layout_gravity="center"
- android:background="#FFFFFF">
- <ImageView
- android:id="@+id/ivIcon"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/ic_launcher" />
- <TextView
- android:id="@+id/tvTitle"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="优惠券1"
- android:textColor="#000000"
- android:textStyle="bold"/>
- </LinearLayout>
5. MainActivity.java
(1)实现IDrawerPresenter接口,在HorizontalScrollView里通过IDrawerPresenter接口来返回当前页,从而更新pageindicator。
- @Override
- public IDrawerPresenter getInstance() {
- return this;
- }
- @Override
- public void dispatchEvent(int totalPages, int currentPage) {
- Log.v(TAG, "~~~~dispatchEvent currentPage:" + currentPage);
- Message msg = Message.obtain();
- msg.what = MSG_DRAWER_UPDATE_PAGE_LAYOUT;
- msg.arg1 = totalPages;
- msg.arg2 = currentPage;
- handler.sendMessage(msg);
- }
(2)PageItemImageView和page indicator的更新
PageItemImageView显示normal的page indicator,之后再将当前页的图片换成selected。
- protected class PageItemImageView extends ImageView {
- public PageItemImageView(Context context) {
- super(context);
- Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
- R.drawable.icon_page_normal);
- this.setImageBitmap(bitmap);
- }
- public void updateDrawerPageLayout(int total_pages, int sel_page) {
- Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page);
- layout_pagenumber.removeAllViews();
- if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){
- Log.e(TAG, "total_pages or sel_page is outofrange.");
- return;
- }
- for (int i = 0;i< total_pages;i++){
- if (i != 0){
- LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
- params.setMargins(5, 0, 0, 0);
- layout_pagenumber.addView(new PageItemImageView(this), params);
- } else {
- layout_pagenumber.addView(new PageItemImageView(this));
- }
- }
- PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page);
- Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected);
- selItem.setImageBitmap(bitmap);
(3)DrawerListAdapter
- private class DrawerListAdapter extends BaseAdapter {
- private final String TAG = "MyListAdapter";
- private LayoutInflater mInflater;
- private LinearLayout layout_item;
- private TextView tvTitle;
- private ImageView ivIcon;
- private final Context context;
- private int colWid;
- private int colHei;
- public DrawerListAdapter(Context context, int colWid, int colHei) {
- this.context = context;
- this.colWid = colWid;
- this.colHei = colHei;
- mInflater = (LayoutInflater) context
- .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
- }
- public int getCount() {
- return drawerItemList.size();
- }
- public Object getItem(int position) {
- return drawerItemList.get(position);
- }
- public long getItemId(int position) {
- return position;
- }
- public View getView(int position, View convertView, ViewGroup parent) {
- DrawerItem item = drawerItemList.get(position);
- if (convertView == null) {
- convertView = mInflater.inflate(R.layout.drawer_item, null);
- layout_item = (LinearLayout) convertView
- .findViewById(R.id.layout_item);
- ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
- tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
- if (colHei != 0 && colWid != 0) {
- LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
- colWid, colHei - 30);
- ivIcon.setLayoutParams(params);
- }
- convertView.setTag(layout_item);
- } else {
- layout_item = (LinearLayout) convertView.getTag();
- }
- ivIcon.setImageResource(R.drawable.ic_launcher);
- tvTitle.setText(String.valueOf(position));
- return convertView;
- }
- }
(4)DrawerItemClickListener:
实现OnItemClickListener。
(5) updateDrawerLayout
获得data的size后,可以算出列数来得到固定行。
intnumCols = (drawerItemList.size() - 1) / 2 + 1
再算出gridview的width。因每页可显示2列,最后一页可能右侧没有,为了翻页顺滑,可以给gridview增加一列空白。
intgridViewWid = numCols * colWid + (numCols + 1) * spaceing;
if(numCols % 2 == 1){
gridViewWid+= colWid + spaceing;
}
- public void updateDrawerLayout() {
- if ((drawerItemList == null) || (drawerItemList.size() == 0)) {
- Log.d(TAG, "itemList is null or empty");
- return;
- }
- if (!hasMeasured){
- Log.d(TAG, "hasMeasured is false");
- return;
- }
- int scrollWid = hscrollview.getWidth();
- int scrollHei = hscrollview.getHeight();
- if (scrollWid <= 0 || scrollHei <= 0){
- Log.d(TAG, "scrollWid or scrollHei is less than 0");
- return;
- }
- int spaceing = 10;
- int colWid = (scrollWid - spaceing * 3) / 2;
- int colHei = (scrollHei - spaceing * 3) / 2;
- int numCols = (drawerItemList.size() - 1) / 2 + 1;
- int gridViewWid = numCols * colWid + (numCols + 1) * spaceing;
- // if numCols is odd (like 5), add blank space
- if (numCols % 2 == 1){
- gridViewWid += colWid + spaceing;
- }
- LayoutParams params = new LayoutParams(gridViewWid, scrollHei);
- gridView.setLayoutParams(params);
- gridView.setColumnWidth(colWid);
- gridView.setHorizontalSpacing(spaceing);
- gridView.setVerticalSpacing(spaceing);
- gridView.setStretchMode(GridView.NO_STRETCH);
- gridView.setNumColumns(numCols);
- adapter = new DrawerListAdapter(this, colWid, colHei);
- listener = new DrawerItemClickListener();
- gridView.setAdapter(adapter);
- gridView.setOnItemClickListener(listener);
- int pageNum = (drawerItemList.size() - 1) / 4 + 1;
- hscrollview.setParameters(pageNum, 0, scrollWid - spaceing);
- updateDrawerPageLayout(pageNum, 0);
- }
效果图:
Android中如何实现多行、水平滚动的分页的Gridview?的更多相关文章
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- Android 使用RecyclerView实现多行水平分页的GridView效果和ViewPager效果
前些天看到有人在论坛上问这种效果怎么实现,没写过也没用过这个功能,网上查了一下,大多是使用ViewPager+GridView或者HorizontalScrollView+GridView实现,不过貌 ...
- 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...
- [转]在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
本文转自:http://www.cnblogs.com/powertoolsteam/p/MVC5_GridView_2.html 背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5 ...
- Android中如何使用命令行查看内嵌数据库SQLite3
转载博客:http://www.linuxidc.com/Linux/2011-06/37135.htm 在上图中,除了最后一个红色的方框,其它方框都是adb shell下的命令. [1]在Andro ...
- [Selenium] Android 中旋转屏幕,触摸,滚动
package com.learingselenium.android; import junit.framework.TestCase import org.openqa.selenium.Rota ...
- Android中Gallery和ImageSwitcher同步自动(滚动)播放图片库
本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...
- Android ViewPager实现多个图片水平滚动
1.示意图 2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...
- Android中通过Java代码实现ScrollView滚动视图-以歌词滚动为例
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...
随机推荐
- git 换行符问题
git 换行符问题 在windows环境中 对于autocrlf = false 不会激发 关于换行符的处理 对于autocrlf = true 会在提交是将LF替换成CRLF 切出时时CRLF 对于 ...
- Wiki动画回顾系列序&&目录
嘛,前前后后看了太多动画,我自己一直想做的事也是喜欢能做一款acg相关的应用,但一直没有好的点子,当然纠结到最后还是需要一个比较好的社区来让大家加入进来.一直有人让我给他们推番,而我也慢慢懂得“人心” ...
- 基本的SQL Server 语句,包含 增、删、改、查 程序员必会
这是我以前学习时, 整理的一套基础SQL Server增.删.改.查 等语句 ,初学者可以从上往下学完. 也方便自己忘记时翻看! create database SQLschool go --批 go ...
- Map/Reduce中Join查询实现
张表,分别较data.txt和info.txt,字段之间以/t划分. data.txt内容如下: 201001 1003 abc 201002 1005 def 201003 ...
- 通用数据链接(UDL)的用法
偶然看到UDL,决定看一下其用法. UDL:通用数据链接.此文件中提供 OleDbConnection 的连接信息.也就是说UDL只能在OleDbConnection中使用. 微软不建议使用UDL 因 ...
- js运动 分享到
<!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...
- Application_Error
//出现未捕捉的异常时,系统调用本方法,一般用于记录日志.错误页的重定向一般在web.config中设置. protected void Application_Error(object ...
- 【转】B树、B-树、B+树、B*树
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- Attach source code to a Netbeans Library Wrapper Module
http://rubenlaguna.com/wp/2008/02/22/attach-source-code-to-a-netbeans-library-wrapper-module/ Attach ...
- vim切换buffer
[vim切换buffer] 命令 ls 可查看当前已打开的buffer 命令 b num 可切换buffer (num为buffer list中的编号) 其它命令: :bn -- buffer列表中下 ...