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

时间： 2024-12-29 19:26:20

Android支持横行滚动的ListView控件的相关文章

android实现自动滚动的Gallary控件效果_Android

本文实例讲述了android实现自动滚动的Gallary控件.分享给大家供大家参考.具体如下: import java.util.Timer; import java.util.TimerTask; import android.content.Context; import android.os.Handler; import android.util.AttributeSet; import android.util.Log; import android.view.KeyEvent; im

android实现自动滚动的Gallary控件效果

本文实例讲述了android实现自动滚动的Gallary控件.分享给大家供大家参考.具体如下: import java.util.Timer; import java.util.TimerTask; import android.content.Context; import android.os.Handler; import android.util.AttributeSet; import android.util.Log; import android.view.KeyEvent; im

Android实现ListView控件的多选和全选功能实例

本文实例讲述了Android实现ListView控件的多选和全选功能.分享给大家供大家参考,具体如下: 主程序代码 MainActivity.Java package yy.test; import java.util.ArrayList; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.Menu; import android.vi

android里引入viewflow控件里放置listview控件,滑动过快时listview失去焦点

问题描述 android里引入viewflow控件里放置listview控件,滑动过快时listview失去焦点 我看91助手主UI做的就比较好,我模仿做一个,我在适配器里用来AsyncTask异步加载,加载成功时调用notifyDataSetChanged()更新UI,但效果出来了,就是listview不稳定,容易失去焦点,有没有对滑动标签viewflow比较熟悉的啊,该怎么解决啊? 解决方案 http://zhouzhenren163.blog.163.com/blog/static/654

VB.NET 中 使用 ListView 控件的简单例子

控件 ListView 控件 在 程序开发过程中的使用是非常广泛的.因为其不支持数据库的绑定所以在数据库程序开发领域无法与datagridview抗衡 但是ListView的确是一个非常好用的控件.下面就把 一个简单的 ListView的例子发出来. Public Class Form6Class Form6     <summary>     英雄类     </summary>     <remarks></remarks>    Public Clas

ASP.NET ListView控件学习系列1-了解ListView控件

ASP.NET中新的ListView控件为显示和CURD数据库操作提供了基于模板的布局,使之成为一项极好的方式,建立以数据为中心的Web应用程序. 当你编写以用户为中心的应用程序时,总需要某种形式的数据集,起码来说,你需要从一个数据源如关系数据库或XML文件检索数据,在显示给用户之前先要进行格式化,尽管ASP.NET之前的版本就提供了以数据为中心的显示控件如GridView,这些控件缺乏专业Web开发人员需要的可自定义和可扩展特性,为了解决这个问题,ASP.NET3.5提供了一个新的控件List

WinJS ListView控件详解

您有数据, 很多数据. 您需要以如下方式呈现这些数据,即用户可以毫不费 力地在应用程序中访问和理解数据. 应用程序以新闻文章.配方.赛事比分.财 务图表等形式公开其数据,所有数据都呈现在屏幕上大小不同的区域中,尽量吸 引使用者的注意. 由于小型到中型数据网格便于人们使用.搜索和筛选,现在市 场上众多应用程序大都以较为合理的网格或列表格式呈现数据. 无论是企业应用 程序.个人应用程序还是其他应用程序,网格都是支撑数据快速浏览的基本框架 . 在 Windows 应用商店的应用中,通过使用 ListV

怎么把图标添加到listview控件的表头行上？

问题描述 怎么把图标添加到listview控件的表头行上? 怎么把图标添加到listview控件的表头行上?怎么根据排序的不同在listview的表头上显示不同的图标? 解决方案 首先你要说明你的环境是什么? 是android中的listview还是window中的listview

xml-Android 开发listview控件的item显示问题

问题描述 Android 开发listview控件的item显示问题 写了一个对话框,测试的时候如果字符超过一定个数,item就变得特别大,而且时间也不能显示了. 解决方案 最顶层的height不要设置成match_ 解决方案二: 设置TextView的行数试一下 解决方案三: 关于listview item 子控件焦点的问题.android ListView的item与其子控件的焦点问题Android ListView Item与子控件焦点问题 解决方案四: 能把代码复制粘贴上来吗?不要贴截图