码迷，mamicode.com
首页 > 移动开发 > 详细

Android中如何实现多行、水平滚动的分页的Gridview？

时间：2015-07-24 12:25:32      阅读：143      评论：0      收藏：0      [点我收藏+]

标签：

功能要求：

(1)比如每页显示2X2，总共2XN，每个item显示图片+文字（点击有链接）。

如果单行水平滚动，可以用Horizontalscrollview实现。

如果是多行水平滚动，则结合Gridview（一般是垂直滚动的）和Horizontalscrollview实现。

(2)水平滚动翻页，下面有显示当前页的icon。

 

 

1.      实现自定义的HorizontalScrollView（HorizontalScrollView.java）：

因为要翻页时需要传当前页给调用者，所以fling函数中自己实现而不要调用父类的fling。

 

[java] view plaincopy
 
  1. public class DrawerHScrollView extends HorizontalScrollView {  
  2.     private static final String TAG = "DrawerHScrollView";  
  3.       
  4.     private IDrawerPresenter drawerPresenter = null;  
  5.     private int currentPage = 0;  
  6.     private int totalPages = 1;  
  7.     private static Hashtable<Integer, Integer> positionLeftTopOfPages = new Hashtable();  
  8.   
  9.     public DrawerHScrollView(Context context) {  
  10.         super(context);  
  11.     }  
  12.   
  13.     public DrawerHScrollView(Context context, AttributeSet attrs) {  
  14.         super(context, attrs);  
  15.     }  
  16.   
  17.     public DrawerHScrollView(Context context, AttributeSet attrs, int defStyle) {  
  18.         super(context, attrs, defStyle);  
  19.     }  
  20.       
  21.     public void cleanup(){  
  22.         currentPage = 0;  
  23.         totalPages = 1;  
  24.         drawerPresenter = null;  
  25.         if(positionLeftTopOfPages != null){  
  26.             positionLeftTopOfPages.clear();  
  27.         }  
  28.     }  
  29.       
  30.     public void setParameters(int totalPages, int currentPage, int scrollDisX) {  
  31.         Log.d(TAG, "~~~~~setParameters totalPages:"+totalPages +",currentPage:"+ currentPage +",scrollDisX:"+scrollDisX);  
  32.         this.totalPages = totalPages;  
  33.         this.currentPage = currentPage;  
  34.         positionLeftTopOfPages.clear();  
  35.         for (int i = 0;i<totalPages;i++){  
  36.             int posx = (scrollDisX) * i;  
  37.             positionLeftTopOfPages.put(i, posx);  
  38.             Log.d(TAG, "~~~~~setParameters i:"+i +",posx:"+posx);  
  39.         }  
  40.         smoothScrollTo(0, 0);  
  41.     }  
  42.       
  43.     public void setPresenter(IDrawerPresenter drawerPresenter ) {  
  44.         this.drawerPresenter = drawerPresenter;  
  45.     }  
  46.       
  47.     @Override  
  48.     public void fling(int velocityX) {  
  49.         Log.v(TAG, "-->fling velocityX:"+velocityX);  
  50.         boolean change_flag = false;  
  51.         if (velocityX > 0 && (currentPage < totalPages - 1)){  
  52.             currentPage++;  
  53.             change_flag = true;  
  54.         } else if (velocityX < 0 && (currentPage > 0)){  
  55.             currentPage--;  
  56.             change_flag = true;  
  57.         }  
  58.         if (change_flag){  
  59.             int postionTo = (Integer)positionLeftTopOfPages.get(new Integer(currentPage)).intValue();  
  60.             Log.v(TAG, "------smoothScrollTo posx:"+postionTo);  
  61.             smoothScrollTo(postionTo, 0);  
  62.             drawerPresenter.dispatchEvent(totalPages, currentPage);  
  63.         }  
  64.         //super.fling(velocityX);  
  65.     }  
  66. }  

 

 

 

2.      布局文件Activity_main.xml:

 

 

[html] view plaincopy
 
  1. <com.example.multilinegridview.DrawerHScrollView  
  2.      android:id="@+id/hscrollview"  
  3.      android:layout_width="match_parent"  
  4.      android:layout_height="wrap_content"  
  5.      android:layout_margin="10dp"  
  6.      android:scrollbars="none"  
  7.      android:layout_below="@id/layout_drawer_top"  
  8.      android:layout_above="@id/layout_pagenumber"  
  9.      android:background="#CCCCCC" >  
  10.      <LinearLayout  
  11.          android:layout_width="fill_parent"  
  12.          android:layout_height="wrap_content"  
  13.          android:orientation="horizontal" >  
  14.          <GridView  
  15.              android:id="@+id/gridView"  
  16.              android:layout_width="fill_parent"  
  17.              android:layout_height="wrap_content" />  
  18.      </LinearLayout>  
  19.  </com.example.multilinegridview.DrawerHScrollView>  

 

 

 

3.      IDrawerPresenter接口（IDrawerPresenter.java）：

 

[java] view plaincopy
 
  1. public interface IDrawerPresenter {  
  2.     IDrawerPresenter getInstance();  
  3.     void dispatchEvent(int totalPages, int currentPage);  
  4. }  

 

 

4.      DrawerItem

 

 

[html] view plaincopy
 
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/layout_item"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="wrap_content"  
  6.     android:gravity="center"  
  7.     android:layout_gravity="center"  
  8.     android:background="#FFFFFF">  
  9.     <ImageView     
  10.         android:id="@+id/ivIcon"    
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:src="@drawable/ic_launcher"  />  
  14.     <TextView     
  15.             android:id="@+id/tvTitle"    
  16.             android:layout_width="wrap_content"  
  17.             android:layout_height="wrap_content"  
  18.             android:text="优惠券1"  
  19.             android:textColor="#000000"  
  20.             android:textStyle="bold"/>  
  21. </LinearLayout>   

 

 

5.      MainActivity.java

(1)实现IDrawerPresenter接口，在HorizontalScrollView里通过IDrawerPresenter接口来返回当前页，从而更新pageindicator。

[java] view plaincopy
 
  1.     @Override  
  2. public IDrawerPresenter getInstance() {  
  3.     return this;  
  4. }  
  5.   
  6. @Override  
  7. public void dispatchEvent(int totalPages, int currentPage) {  
  8.     Log.v(TAG, "~~~~dispatchEvent currentPage:" + currentPage);  
  9.     Message msg = Message.obtain();  
  10.     msg.what = MSG_DRAWER_UPDATE_PAGE_LAYOUT;  
  11.     msg.arg1 = totalPages;  
  12.     msg.arg2 = currentPage;  
  13.     handler.sendMessage(msg);  
  14. }  

 

(2)PageItemImageView和page indicator的更新

PageItemImageView显示normal的page indicator，之后再将当前页的图片换成selected。

[java] view plaincopy
 
  1.    protected class PageItemImageView extends ImageView {  
  2. public PageItemImageView(Context context) {  
  3.     super(context);  
  4.     Bitmap bitmap = BitmapFactory.decodeResource(getResources(),  
  5.             R.drawable.icon_page_normal);  
  6.     this.setImageBitmap(bitmap);  
  7. }  
  8.   
  9.    public void updateDrawerPageLayout(int total_pages, int sel_page) {  
  10. Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page);  
  11. layout_pagenumber.removeAllViews();  
  12. if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){  
  13.     Log.e(TAG, "total_pages or sel_page is outofrange.");  
  14.     return;  
  15. }  
  16. for (int i = 0;i< total_pages;i++){  
  17.     if (i != 0){  
  18.         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  19.         params.setMargins(5, 0, 0, 0);  
  20.         layout_pagenumber.addView(new PageItemImageView(this), params);  
  21.     } else {  
  22.         layout_pagenumber.addView(new PageItemImageView(this));  
  23.     }  
  24. }  
  25. PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page);  
  26. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected);  
  27. selItem.setImageBitmap(bitmap);  


(3)DrawerListAdapter

 

[java] view plaincopy
 
  1. private class DrawerListAdapter extends BaseAdapter {  
  2.     private final String TAG = "MyListAdapter";  
  3.     private LayoutInflater mInflater;  
  4.     private LinearLayout layout_item;  
  5.     private TextView tvTitle;  
  6.     private ImageView ivIcon;  
  7.     private final Context context;  
  8.     private int colWid;  
  9.     private int colHei;  
  10.   
  11.     public DrawerListAdapter(Context context, int colWid, int colHei) {  
  12.         this.context = context;  
  13.         this.colWid = colWid;  
  14.         this.colHei = colHei;  
  15.         mInflater = (LayoutInflater) context  
  16.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  17.     }  
  18.   
  19.     public int getCount() {  
  20.         return drawerItemList.size();  
  21.     }  
  22.   
  23.     public Object getItem(int position) {  
  24.         return drawerItemList.get(position);  
  25.     }  
  26.   
  27.     public long getItemId(int position) {  
  28.         return position;  
  29.     }  
  30.   
  31.     public View getView(int position, View convertView, ViewGroup parent) {  
  32.         DrawerItem item = drawerItemList.get(position);  
  33.         if (convertView == null) {  
  34.             convertView = mInflater.inflate(R.layout.drawer_item, null);  
  35.             layout_item = (LinearLayout) convertView  
  36.                     .findViewById(R.id.layout_item);  
  37.             ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);  
  38.             tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);  
  39.             if (colHei != 0 && colWid != 0) {  
  40.                 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
  41.                         colWid, colHei - 30);  
  42.                 ivIcon.setLayoutParams(params);  
  43.             }  
  44.             convertView.setTag(layout_item);  
  45.         } else {  
  46.             layout_item = (LinearLayout) convertView.getTag();  
  47.         }  
  48.         ivIcon.setImageResource(R.drawable.ic_launcher);  
  49.         tvTitle.setText(String.valueOf(position));  
  50.         return convertView;  
  51.     }  
  52. }  

 

 

(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;

                   }

[java] view plaincopy
 
  1. public void updateDrawerLayout() {  
  2.     if ((drawerItemList == null) || (drawerItemList.size() == 0)) {  
  3.         Log.d(TAG, "itemList is null or empty");  
  4.         return;  
  5.     }  
  6.     if (!hasMeasured){  
  7.         Log.d(TAG, "hasMeasured is false");  
  8.         return;  
  9.     }  
  10.     int scrollWid = hscrollview.getWidth();  
  11.     int scrollHei = hscrollview.getHeight();  
  12.     if (scrollWid <= 0 || scrollHei <= 0){  
  13.         Log.d(TAG, "scrollWid or scrollHei is less than 0");  
  14.         return;  
  15.     }  
  16.       
  17.     int spaceing = 10;  
  18.     int colWid = (scrollWid - spaceing * 3) / 2;  
  19.     int colHei = (scrollHei - spaceing * 3) / 2;  
  20.     int numCols = (drawerItemList.size() - 1) / 2 + 1;  
  21.     int gridViewWid = numCols * colWid + (numCols + 1) * spaceing;  
  22.     // if numCols is odd (like 5), add blank space  
  23.     if (numCols % 2 == 1){  
  24.         gridViewWid += colWid + spaceing;  
  25.     }  
  26.       
  27.     LayoutParams params = new LayoutParams(gridViewWid, scrollHei);  
  28.     gridView.setLayoutParams(params);  
  29.     gridView.setColumnWidth(colWid);  
  30.     gridView.setHorizontalSpacing(spaceing);  
  31.     gridView.setVerticalSpacing(spaceing);  
  32.     gridView.setStretchMode(GridView.NO_STRETCH);  
  33.     gridView.setNumColumns(numCols);  
  34.   
  35.     adapter = new DrawerListAdapter(this, colWid, colHei);  
  36.     listener = new DrawerItemClickListener();  
  37.     gridView.setAdapter(adapter);  
  38.     gridView.setOnItemClickListener(listener);  
  39.   
  40.     int pageNum = (drawerItemList.size() - 1) / 4 + 1;  
  41.     hscrollview.setParameters(pageNum, 0, scrollWid - spaceing);  
  42.     updateDrawerPageLayout(pageNum, 0);  
  43. }  

 

效果图：

技术分享

Android中如何实现多行、水平滚动的分页的Gridview？

标签：

原文地址：http://www.cnblogs.com/Free-Thinker/p/4672858.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！