雙向滾動ListView

因為最近一個項目的需求,寫了一個雙向的ListView.

主要的原因的需要顯示的數據量大,屏幕放不下,所以需要滾動來顯示.在這個基礎上還需要是ListView的上側和左側的部分保持相對的不滾動.其實上下的滾動系統的ListView自己就可以完成,但是橫向的滾動該如何實現呢,尤其是要在縱向的滾動的同時要兼顧左右的滾動.開始的時候沒有什么思路,后來也上網查了很多.其中一種的實現思路是在ListView中放置HorizontalScrollView,然后使用dispathTouchEvent方法來分發對滑動事件的響應.然后我也這樣做了,但是總不理想,可能是自己的考慮不周到,事件的響應經常會出問題,然后會導致ListView的每一個Item出現不同不的問題.

甚至還試過在左側放置ListView,右側放置HorizontalScrollView,然后在右側的ScrollView里面在放置一個ListView,然后通過事件分發,是左右兩側的ListView上下滾動的時候保持同步,但是總是會出現左右不同步的現象,這樣是不行的,即使出現一點的不同步,整個View看起來也會很怪,這樣是不能用的.

還有一種思路就是在ListView上層就屏蔽滑動事件,然后使ListView自動響應滾動事件,並同時手工的移動每一個ScrollView.也就是我這里使用的方法.經過測試,這個方法是可行的.並且達到了很好的同步效果.

想到一直以來都是從網上拿東西,也應該有貢獻精神.所以這里把代碼共享,本人盡量的屏蔽了實現的細節.以下提供API,希望對大家有幫助.

附圖:

以下代碼屬本人原創,轉載請注明出處.

 

API使用方法:

• 要使用雙向ListView需要拷貝以下類文件到項目中:

├─adapter

│      BothwayListViewAdapter.java(BothwayListView的Adapter)

│     

└─widget

        BothwayListView.java(要使用的ListView)

        HeaderHorizontalScrollView.java(Header和Item中能夠滑動的部分的上層View)

        InterceptLinearLayout.java(HeaderHorizontalScrollView的上層View)

• 建立相應的Layout文件.

雙向滾動的ListView需要有Header.應該與ListView在同一層次放置,並且其結構應該與Item的結構保持一致,即左側不可以滑動的位置的寬度,右側可以滾動的View的結構等.推薦直接在ListView上面直接include一個Item的View.這樣其結構就會和Item保持完全一致.

例:

(main:)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
        　　<!--這里是Header部分,就是在ListView上部不會隨ListView的Item上下滑動的部分.
　　　　　　　　這里直接導入一個Item使用-->
            <include
                android:id="@+id/top_header"
                layout="@layout/item" >
            </include>
　　　　　　　<!—-這里是今天的重點,ListView-->
            <com.group_06.bothwaylistviewapi.widget.BothwayListView
                android:id="@+id/main_listview"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </com.group_06.bothwaylistviewapi.widget.BothwayListView>
</LinearLayout>

(item:)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:orientation="horizontal" >
        　　<!--這個TextView就是每一個Item的左側不會左右滑動的部分.-->
            <TextView
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="LEFT_SIDE" />
        　　<!--以下是Item中可以左右滑動的部分,外層的InterceptLinearLayout是用來
        　　屏蔽滑動事件的,即下面的HorizontalScrollView不會自動的跟隨用戶的滑動事件
        　　滾動,他們的滾動都是由代碼中手工移動的.-->
            <com.group_06.bothwaylistviewapi.widget.InterceptLinearLayout
                android:id="@+id/top_linearlayout"
                android:layout_width="wrap_content"
                android:layout_height="match_parent" >
           　　 <!--這是HorizontalScrollView,左右滾動全靠它.-->
                <com.group_06.bothwaylistviewapi.widget.HeaderHorizontalScrollView
                    android:id="@+id/my_scrollview"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scrollbars="none" >
                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:orientation="horizontal" >
                                <TextView
                                    android:layout_width="50dp"
                                    android:layout_height="match_parent"
                                    android:text="AAAA" />
                                <TextView
                                    android:layout_width="50dp"
                                   android:layout_height="match_parent"
                                    android:text="BBBB" />

　　　　　　　　　　　　　　　　　　　.. .. .. .. .. .. .. ..
                
                                <TextView
                                    android:layout_width="50dp"
                                    android:layout_height="match_parent"
                                    android:text="HHHH" />
                        </LinearLayout>
                </com.group_06.bothwaylistviewapi.widget.HeaderHorizontalScrollView>
            </com.group_06.bothwaylistviewapi.widget.InterceptLinearLayout>
</LinearLayout>

• Java代碼:

public class MainActivity extends Activity
{
            private View mTopParentLinearLayout;
            private HeaderHorizontalScrollView mTopScrollView;
            private BothwayListView mBothwayListView;
            private BothwayListViewAdapter mBothwayListViewAdapter;

            @Override
            public void onCreate(Bundle savedInstanceState)
            {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                initViews();
            }
            private void initViews()
            {
                mTopParentLinearLayout = (View) findViewById(R.id.top_header);
                mTopScrollView = (HeaderHorizontalScrollView) mTopParentLinearLayout
                        .findViewById(R.id.my_scrollview);
                mBothwayListView = (BothwayListView) findViewById(R.id.main_listview);
                mBothwayListView.initListView(mTopParentLinearLayout, mTopScrollView);
                mBothwayListViewAdapter = new MyAdapter(MainActivity.this,
                        mTopScrollView);
                mBothwayListView.setAdapter(mBothwayListViewAdapter);
            }
            @Override
            protected void onDestroy()
            {
                if (null != mBothwayListView)
                {
                    mBothwayListView.unRegisterReceiver();
                }
                super.onDestroy();
            }
}

• HorizontalScrollView的Adapter:

Adapter中只有這個方法不同,即需要多返回一個ScrollView,即每一個Item中的HorizontalScrollView.若ConvertView不為空時,即重用之前的Item時,可以將Item的ScrollView設為null傳回.

@Override
public ConvertViewAndScrollView getFullView(int position, View convertView,
                    ViewGroup parent)
{
　　if (convertView == null)
　　{
　　　　convertView = inflater.inflate(R.layout.item, null, false);
　　　　．．．．．．
　　　　HorizontalScrollView scrollView = (HorizontalScrollView) convertView
　　 　　.findViewById(R.id.my_scrollview);
　　 　　return new ConvertViewAndScrollView(convertView, scrollView);
　　}
　　．．．．．．
    return new ConvertViewAndScrollView(convertView, null);
}

 

代碼下載:http://files.cnblogs.com/group-06/BothwayListViewAPI.zip