Android支持横行滚动的ListView控件

简介:

前言

   ListView是一个纵向滚动的列表视图,也有朋友嵌套HorizontalScrollView来实现,比如这里,但在ListView的API中明确指明了两者不可同时使用,参考ListView的中文API这里。本文分享一种办法,以方便有此需求的朋友。

 

声明

  欢迎转载,但请保留文章原始出处:) 

    博客园:http://www.cnblogs.com

农民伯伯: http://over140.cnblogs.com  

    Android中文翻译组:http://androidbox.sinaapp.com/

 

正文

  一、本文目标

    效果图:

    

    a).  支持ListView横行滚动

    b).  支持固定第一列

 

  二、 实现代码

    2.1  Java类

      自定义控件HVListView

复制代码
/**
 * 自定义支持横向滚动的ListView
 * 
@author  农民伯伯
 *
 
*/
public  class HVListView  extends ListView {

     /**  手势  */
     private GestureDetector mGesture;
     /**  列头  */
     public LinearLayout mListHead;
     /**  偏移坐标  */
     private  int mOffset = 0;
     /**  屏幕宽度  */
     private  int screenWidth;

     /**  构造函数  */
     public HVListView(Context context, AttributeSet attrs) {
         super(context, attrs);
        mGesture =  new GestureDetector(context, mOnGesture);
    }

     /**  分发触摸事件  */
    @Override
     public  boolean dispatchTouchEvent(MotionEvent ev) {
         super.dispatchTouchEvent(ev);
         return mGesture.onTouchEvent(ev);
    }

     /**  手势  */
     private OnGestureListener mOnGesture =  new GestureDetector.SimpleOnGestureListener() {

        @Override
         public  boolean onDown(MotionEvent e) {
             return  true;
        }

        @Override
         public  boolean onFling(MotionEvent e1, MotionEvent e2,  float velocityX,
                 float velocityY) {
             return  false;
        }

         /**  滚动  */
        @Override
         public  boolean onScroll(MotionEvent e1, MotionEvent e2,
                 float distanceX,  float distanceY) {
             synchronized (HVListView. this) {
                 int moveX = ( int) distanceX;
                 int curX = mListHead.getScrollX();
                 int scrollWidth = getWidth();
                 int dx = moveX;
                 // 控制越界问题
                 if (curX + moveX < 0)
                    dx = 0;
                 if (curX + moveX + getScreenWidth() > scrollWidth)
                    dx = scrollWidth - getScreenWidth() - curX;

                mOffset += dx;
                 // 根据手势滚动Item视图
                 for ( int i = 0, j = getChildCount(); i < j; i++) {
                    View child = ((ViewGroup) getChildAt(i)).getChildAt(1);
                     if (child.getScrollX() != mOffset)
                        child.scrollTo(mOffset, 0);
                }
                mListHead.scrollBy(dx, 0);
            }
            requestLayout();
             return  true;
        }
    };

    
     /**
     * 获取屏幕可见范围内最大屏幕
     * 
@return
     
*/
     public  int getScreenWidth() {
         if (screenWidth == 0) {
            screenWidth = getContext().getResources().getDisplayMetrics().widthPixels;
             if (getChildAt(0) !=  null) {
                screenWidth -= ((ViewGroup) getChildAt(0)).getChildAt(0)
                        .getMeasuredWidth();
            }  else  if (mListHead !=  null) {
                 // 减去固定第一列
                screenWidth -= mListHead.getChildAt(0).getMeasuredWidth();
            }
        }
         return screenWidth;
    }

     /**  获取列头偏移量  */
     public  int getHeadScrollX() {
         return mListHead.getScrollX();
    }
}
复制代码

        代码说明:

          自定义HVListView继承自ListView,增加了横向手势监听,并在横向滚动时手动触发Layout容器内的滚动。

      Activity

复制代码
public  class TestHVListViewActivity  extends Activity {

     private LayoutInflater mInflater;

     private HVListView mListView;

     /**  Called when the activity is first created.  */
    @Override
     public  void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mListView = (HVListView) findViewById(android.R.id.list);
         // 设置列头
        mListView.mListHead = (LinearLayout) findViewById(R.id.head);
         // 设置数据
        mListView.setAdapter( new DataAdapter());

        mInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
    }

     private  class DataAdapter  extends BaseAdapter {

        @Override
         public  int getCount() {
             return 50; // 固定显示50行数据
        }

        @Override
         public View getView( int position, View convertView, ViewGroup parent) {
             if (convertView ==  null) {
                convertView = mInflater.inflate(R.layout.item,  null);
            }

             for ( int i = 0; i < 8; i++) {
                ((TextView) convertView.findViewById(R.id.item2 + i)).setText("数据" + position + "行" + (i + 2) + "列");
            }

             // 校正(处理同时上下和左右滚动出现错位情况)
            View child = ((ViewGroup) convertView).getChildAt(1);
             int head = mListView.getHeadScrollX();
             if (child.getScrollX() != head) {
                child.scrollTo(mListView.getHeadScrollX(), 0);
            }
             return convertView;
        }

        @Override
         public Object getItem( int position) {
             return  null;
        }

        @Override
         public  long getItemId( int position) {
             return 0;
        }
    }
}
复制代码

      代码说明:

        为ListView提供了模拟数据。注意getView里面还有一段代码是校验,是专门处理同时横向和纵向滚动出现错位的情况。

    2.2  XML文件

      main.xml

复制代码
<? xml version="1.0" encoding="utf-8" ?>
< LinearLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:orientation
="vertical"  android:background ="#eeffcc"
    android:layout_width
="wrap_content"  android:layout_height ="fill_parent" >
     < include  layout ="@layout/item"   />
     < com.nmbb.HVListView  android:id ="@android:id/list"
        android:background
="#FFB84D"  android:fastScrollEnabled ="true"
        android:fadingEdgeLength
="0.0sp"  android:layout_width ="1400.0dip"
        android:layout_height
="fill_parent"  android:drawSelectorOnTop ="false"
        android:cacheColorHint
="@null"  android:dividerHeight ="1.0dip" >
     </ com.nmbb.HVListView >
</ LinearLayout >
复制代码

        代码说明:

          注意这里需要指定HVListView的layout_width为滑动范围值,由item累加。

      item.xml

复制代码
<? xml version="1.0" encoding="utf-8" ?>
< LinearLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:orientation
="horizontal"  android:layout_width ="wrap_content"
    android:layout_height
="wrap_content" >
     < TextView  android:id ="@+id/item1"  android:text ="不动列头1"
        android:textSize
="20.0sp"  android:gravity ="center"
        android:layout_width
="100.0dip"  android:layout_height ="wrap_content" ></ TextView >
     < LinearLayout  android:orientation ="horizontal"  android:id ="@+id/head"
        android:layout_width
="1200.0dip"  android:layout_height ="wrap_content" >
         < TextView  android:id ="@+id/item2"  android:text ="不动列头2"
            android:textColor
="@android:color/black"  android:textSize ="20.0sp"
            android:singleLine
="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item3"  android:text ="不动列头3"
            android:textSize
="20.0sp"  android:singleLine ="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item4"  android:text ="不动列头4"
            android:textColor
="@android:color/black"  android:textSize ="20.0sp"
            android:singleLine
="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item5"  android:text ="不动列头5"
            android:textSize
="20.0sp"  android:singleLine ="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item6"  android:text ="不动列头6"
            android:textColor
="@android:color/black"  android:textSize ="20.0sp"
            android:singleLine
="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item7"  android:text ="不动列头7"
            android:textSize
="20.0sp"  android:singleLine ="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item8"  android:text ="不动列头8"
            android:textColor
="@android:color/black"  android:textSize ="20.0sp"
            android:singleLine
="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
         < TextView  android:id ="@+id/item9"  android:text ="不动列头9"
            android:textSize
="20.0sp"  android:singleLine ="true"  android:gravity ="center"
            android:layout_width
="150.0dip"  android:layout_height ="wrap_content" ></ TextView >
     </ LinearLayout >
</ LinearLayout >
复制代码

 

        代码说明:

          注意指定了每一个TextView的宽度为固定宽度,这样表格看起来就比较整齐。

 

 

  三、注意问题

    从代码看得出,本办法只能算个笨办法,能满足基本需求,比较麻烦的是需要自己来指定固定宽度。在企业应用展示多行多列数据时还是非常有用的,比如炒股软件也有这样的需求。

    特别提醒大家注意设置固定宽度,还需要把最外面的容器的宽度设置为warp_content,以便支持容器内能够延伸。

    当前不支持Fling操作,所以即使用力滑也不好滑太多,希望在后续版本改进。

 

  四、代码下载

    TestHVListView2011-12-4.zip

 

  五、扩展阅读

    Android提高第十五篇之ListView自适应实现表格

    (不推荐这种做法,但有参考价值,里面网格也画得很好)

    Android Horizontal ListView

    (实现较为复杂,但后续改进可以参考其实现,有很重要研究价值)

 

结束 

   虽然实现了功能,但一直不太满意,用起来较为繁琐,期待下一个版本的改进版。谢谢!欢迎交流!


转载:http://www.cnblogs.com/over140/archive/2011/12/07/2275207.html

目录
相关文章
|
5月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
72 3
|
4月前
|
XML 存储 Java
浅谈Android的TextView控件
浅谈Android的TextView控件
57 0
|
6月前
|
前端开发 Android开发 开发者
安卓开发中的自定义视图:构建你的第一个控件
【8月更文挑战第26天】在安卓开发的浩瀚海洋中,自定义视图是一块充满魔力的乐土。它不仅是开发者展示创造力的舞台,更是实现独特用户体验的关键。本文将带你步入自定义视图的世界,从基础概念到实战应用,一步步教你如何打造自己的第一个控件。无论你是初学者还是有经验的开发者,这篇文章都将为你的开发之旅增添新的风景。
|
8月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
96 2
|
8月前
|
Java Android开发
18. 【Android教程】图片控件 ImageView
18. 【Android教程】图片控件 ImageView
134 4
|
8月前
|
前端开发 API Android开发
25. 【Android教程】列表控件 ListView
25. 【Android教程】列表控件 ListView
282 2
|
7月前
|
XML 数据格式
Android-自定义三角形评分控件
Android-自定义三角形评分控件
62 0
|
8月前
|
XML Android开发 数据格式
Android基础控件介绍
Android基础控件介绍
|
8月前
|
Android开发
Android 自定义View 测量控件宽高、自定义viewgroup测量
Android 自定义View 测量控件宽高、自定义viewgroup测量
172 0
|
XML Android开发 数据格式
Android自定义控件(十二)——自定义属性及应用
Android自定义控件(十二)——自定义属性及应用
204 0
Android自定义控件(十二)——自定义属性及应用

热门文章

最新文章