功能要求:

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

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

如果是多行水平滚动,则结合Gridview(一般是垂直滚动的)和Horizontalscrollview实现。

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

1.      实现自定义的HorizontalScrollView(HorizontalScrollView.java):

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

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

2.      布局文件Activity_main.xml:

  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):

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

4.      DrawerItem

  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。

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

(2)PageItemImageView和page indicator的更新

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

  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. public void updateDrawerPageLayout(int total_pages, int sel_page) {
  9. Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page);
  10. layout_pagenumber.removeAllViews();
  11. if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){
  12. Log.e(TAG, "total_pages or sel_page is outofrange.");
  13. return;
  14. }
  15. for (int i = 0;i< total_pages;i++){
  16. if (i != 0){
  17. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  18. params.setMargins(5, 0, 0, 0);
  19. layout_pagenumber.addView(new PageItemImageView(this), params);
  20. } else {
  21. layout_pagenumber.addView(new PageItemImageView(this));
  22. }
  23. }
  24. PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page);
  25. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected);
  26. selItem.setImageBitmap(bitmap);

(3)DrawerListAdapter

  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. public DrawerListAdapter(Context context, int colWid, int colHei) {
  11. this.context = context;
  12. this.colWid = colWid;
  13. this.colHei = colHei;
  14. mInflater = (LayoutInflater) context
  15. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  16. }
  17. public int getCount() {
  18. return drawerItemList.size();
  19. }
  20. public Object getItem(int position) {
  21. return drawerItemList.get(position);
  22. }
  23. public long getItemId(int position) {
  24. return position;
  25. }
  26. public View getView(int position, View convertView, ViewGroup parent) {
  27. DrawerItem item = drawerItemList.get(position);
  28. if (convertView == null) {
  29. convertView = mInflater.inflate(R.layout.drawer_item, null);
  30. layout_item = (LinearLayout) convertView
  31. .findViewById(R.id.layout_item);
  32. ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
  33. tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
  34. if (colHei != 0 && colWid != 0) {
  35. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
  36. colWid, colHei - 30);
  37. ivIcon.setLayoutParams(params);
  38. }
  39. convertView.setTag(layout_item);
  40. } else {
  41. layout_item = (LinearLayout) convertView.getTag();
  42. }
  43. ivIcon.setImageResource(R.drawable.ic_launcher);
  44. tvTitle.setText(String.valueOf(position));
  45. return convertView;
  46. }
  47. }

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

}

  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. int spaceing = 10;
  17. int colWid = (scrollWid - spaceing * 3) / 2;
  18. int colHei = (scrollHei - spaceing * 3) / 2;
  19. int numCols = (drawerItemList.size() - 1) / 2 + 1;
  20. int gridViewWid = numCols * colWid + (numCols + 1) * spaceing;
  21. // if numCols is odd (like 5), add blank space
  22. if (numCols % 2 == 1){
  23. gridViewWid += colWid + spaceing;
  24. }
  25. LayoutParams params = new LayoutParams(gridViewWid, scrollHei);
  26. gridView.setLayoutParams(params);
  27. gridView.setColumnWidth(colWid);
  28. gridView.setHorizontalSpacing(spaceing);
  29. gridView.setVerticalSpacing(spaceing);
  30. gridView.setStretchMode(GridView.NO_STRETCH);
  31. gridView.setNumColumns(numCols);
  32. adapter = new DrawerListAdapter(this, colWid, colHei);
  33. listener = new DrawerItemClickListener();
  34. gridView.setAdapter(adapter);
  35. gridView.setOnItemClickListener(listener);
  36. int pageNum = (drawerItemList.size() - 1) / 4 + 1;
  37. hscrollview.setParameters(pageNum, 0, scrollWid - spaceing);
  38. updateDrawerPageLayout(pageNum, 0);
  39. }

效果图:

Android中如何实现多行、水平滚动的分页的Gridview?的更多相关文章

  1. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  2. Android 使用RecyclerView实现多行水平分页的GridView效果和ViewPager效果

    前些天看到有人在论坛上问这种效果怎么实现,没写过也没用过这个功能,网上查了一下,大多是使用ViewPager+GridView或者HorizontalScrollView+GridView实现,不过貌 ...

  3. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

  4. [转]在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    本文转自:http://www.cnblogs.com/powertoolsteam/p/MVC5_GridView_2.html 背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5 ...

  5. Android中如何使用命令行查看内嵌数据库SQLite3

    转载博客:http://www.linuxidc.com/Linux/2011-06/37135.htm 在上图中,除了最后一个红色的方框,其它方框都是adb shell下的命令. [1]在Andro ...

  6. [Selenium] Android 中旋转屏幕,触摸,滚动

    package com.learingselenium.android; import junit.framework.TestCase import org.openqa.selenium.Rota ...

  7. Android中Gallery和ImageSwitcher同步自动(滚动)播放图片库

    本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...

  8. Android ViewPager实现多个图片水平滚动

    1.示意图                       2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...

  9. Android中通过Java代码实现ScrollView滚动视图-以歌词滚动为例

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

随机推荐

  1. git 换行符问题

    git 换行符问题 在windows环境中 对于autocrlf = false 不会激发 关于换行符的处理 对于autocrlf = true 会在提交是将LF替换成CRLF 切出时时CRLF 对于 ...

  2. Wiki动画回顾系列序&&目录

    嘛,前前后后看了太多动画,我自己一直想做的事也是喜欢能做一款acg相关的应用,但一直没有好的点子,当然纠结到最后还是需要一个比较好的社区来让大家加入进来.一直有人让我给他们推番,而我也慢慢懂得“人心” ...

  3. 基本的SQL Server 语句,包含 增、删、改、查 程序员必会

    这是我以前学习时, 整理的一套基础SQL Server增.删.改.查 等语句 ,初学者可以从上往下学完. 也方便自己忘记时翻看! create database SQLschool go --批 go ...

  4. Map/Reduce中Join查询实现

    张表,分别较data.txt和info.txt,字段之间以/t划分. data.txt内容如下: 201001    1003    abc 201002    1005    def 201003  ...

  5. 通用数据链接(UDL)的用法

    偶然看到UDL,决定看一下其用法. UDL:通用数据链接.此文件中提供 OleDbConnection 的连接信息.也就是说UDL只能在OleDbConnection中使用. 微软不建议使用UDL 因 ...

  6. js运动 分享到

    <!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...

  7. Application_Error

    //出现未捕捉的异常时,系统调用本方法,一般用于记录日志.错误页的重定向一般在web.config中设置.        protected void Application_Error(object ...

  8. 【转】B树、B-树、B+树、B*树

    B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...

  9. 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 ...

  10. vim切换buffer

    [vim切换buffer] 命令 ls 可查看当前已打开的buffer 命令 b num 可切换buffer (num为buffer list中的编号) 其它命令: :bn -- buffer列表中下 ...