功能要求:

(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. Chapter12:动态内存

    智能指针——shared_ptr 为了更容易地使用动态内存,新的标准提供了智能指针来管理动态对象.智能指针的行为类似常规指针,重要的区别是它负责自动释放指向的对象. 智能指针的使用方式与普通指针类似. ...

  2. 在logopond中看到的优秀设计随想

    本随笔仅仅只是自己对于设计作品的想法,不喜勿喷~ 昨日看到关于大神配色的文章,决定在logopond网站中看看优秀的作品,以为自己的配色找找灵感,学习学习,对自己有很强的震撼力的有: 以女性高跟性的抽 ...

  3. iOS学习中的一些误区

    周二拿到offer之后,周三确定了去哪家,今天周四.今天是一个例外.中午写更新. 人到了不同的阶段,最重要的就是要更新自己的方法论.也就是说,不能穿新鞋,走老路,这样人就不会有大的突破. 下面我就分析 ...

  4. vim 7.4 编译安装

    (1): 在安装新版本的Vim之前,你需要卸载原来安装的老版本Vim,依次在终端下执行下列命令: sudo apt-get remove vim sudo apt-get remove vim-run ...

  5. JavaScript之Object

    两种简单的JavaScript中定义对象的方式: 在JavaScript中,可以动态添加对象的属性,也可以动态删除对象的属性. var object=new object(); //alert(obj ...

  6. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  7. 监听mysql是否挂了

    监听mysql是否挂了,如果挂了就重启mysql 方式一: #!/bin/bash pgrep -x mysqld &> /dev/null if [ $? -ne 0 ] then e ...

  8. reds pub/sub官方文档翻译

    Publish / Subscribe发布/订阅 redis-py includes a PubSub object that subscribes to channels and listens f ...

  9. Unity3D 200个插件免费分享

    插件清单: 2D_Toolkit_1.51     动画开发插件包 FingerGestures           触摸插件 ORK_Okashi_RPG_Kit       Unity3D角色扮演 ...

  10. Hadoop学习笔记(1)

    Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. H ...