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

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

 

结束 

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