Android之重寫ScrollView實現兩個ScrollView的同步滾動顯示

1.背景介紹

　　最近項目用到兩個ScrollView的同步顯示，即拖動左邊的ScrollView滾動的同時，實現右邊的ScrollView同步滾動。此種情形常用在複雜介面布局中，比如左邊的ScrollView顯示主要項目，只需上下滾動即可；右邊項目是次要項目，可以實現上下或者左右滾動，當上下滾動時，需要左右兩邊的同步顯示。

         ，左側是主專案（日期和股票代號），右側是次要項目（開盤價、最高價、成交量....等等資訊）。因為資訊比較多，左側的主專案需要上下拖動顯示，而右側則需要上下左右都可以拖動才能顯示完全（ScrollView嵌套一個HorizontalScrollView）。我們希望左側或右側上下拖動時，能夠實現同步。這就需要實現兩個ScrollView的同步顯示。因為Android控制項中沒有此種功能，因此需要重寫ScrollView。

2.思路介紹

　　我們首先想到使用ScrollView的類似與setOnScrollChangedListener的方法來實現，當一個ScrollView滾動時，觸發該方法進而使另外一個ScrollView滾動。不過很遺憾，Google沒有提供該方法。通過查詢相應的原始碼，我們發現該方法的原型

protected void onScrollChanged(int x, int y, int oldx, int oldy)

該方法是protected類型，不能直接調用，於是需要重新實現ScrollView。

3.具體實現

　　首先，定一個一個介面（ScrollViewListener.java）：

public interface ScrollViewListener {    void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);}

我們需要重寫ScrollView才能實現該借口，因此有下面的代碼（ObservableScrollView.java）：

package com.devin;import android.content.Context;import android.util.AttributeSet;import android.widget.ScrollView;public class ObservableScrollView extends ScrollView {    private ScrollViewListener scrollViewListener = null;    public ObservableScrollView(Context context) {        super(context);    }    public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public ObservableScrollView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public void setScrollViewListener(ScrollViewListener scrollViewListener) {        this.scrollViewListener = scrollViewListener;    }    @Override    protected void onScrollChanged(int x, int y, int oldx, int oldy) {        super.onScrollChanged(x, y, oldx, oldy);        if(scrollViewListener != null) {            scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);        }    }}

接下來是介面的XML，這裡是一個簡單的Demo，如下(main.xml):

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="#ffffff"    android:orientation="horizontal" >    <com.devin.ObservableScrollView        android:id="@+id/scrollview1"        android:layout_width="400dp"        android:layout_height="wrap_content" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="monday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="tuesday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="wednesday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="thursday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="friday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="saturday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="sunday"                android:textColor="#000000" />        </LinearLayout>    </com.devin.ObservableScrollView>    <com.devin.ObservableScrollView        android:id="@+id/scrollview2"        android:layout_width="400dp"        android:layout_height="wrap_content" >        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="monday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="tuesday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="wednesday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="thursday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="friday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="saturday"                android:textColor="#000000" />            <TextView                android:layout_width="wrap_content"                android:layout_height="200dp"                android:layout_weight="1"                android:text="sunday"                android:textColor="#000000" />        </LinearLayout>    </com.devin.ObservableScrollView></LinearLayout>

最後是我們的主程調用（PadTestActivity.java）：

package com.devin;import android.app.Activity;import android.os.Bundle;public class PadTestActivity extends Activity implements ScrollViewListener {    private ObservableScrollView scrollView1 = null;    private ObservableScrollView scrollView2 = null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        scrollView1 = (ObservableScrollView) findViewById(R.id.scrollview1);        scrollView1.setScrollViewListener(this);        scrollView2 = (ObservableScrollView) findViewById(R.id.scrollview2);        scrollView2.setScrollViewListener(this);    }    public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {        if(scrollView == scrollView1) {            scrollView2.scrollTo(x, y);        } else if(scrollView == scrollView2) {            scrollView1.scrollTo(x, y);        }    }}

代碼一目瞭然，具體就不講解了，關鍵是思路，即如何才能想到是怎麼實現的。