1.背景介紹
最近項目用到兩個ScrollView的同步顯示，即拖動左邊的ScrollView滾動的同時，實現右邊的ScrollView同步滾動。此種情形常用在復雜界面布局中，比如左邊的ScrollView顯示主要項目，只需上下滾動即可；右邊項目是次要項目，可以實現上下或者左右滾動，當上下滾動時，需要左右兩邊的同步顯示。
如圖所示，左側是主項目（日期和股票代碼），右側是次要項目（開盤價、最高價、成交量....等等信息）。因為信息比較多，左側的主項目需要上下拖動顯示，而右側則需要上下左右都可以拖動才能顯示完全（ScrollView嵌套一個HorizontalScrollView）。我們希望左側或右側上下拖動時，能夠實現同步。這就需要實現兩個ScrollView的同步顯示。因為Android控件中沒有此種功能，因此需要重寫ScrollView。
2.思路介紹
我們首先想到使用ScrollView的類似與setOnScrollChangedListener的方法來實現，當一個ScrollView滾動時，觸發該方法進而使另外一個ScrollView滾動。不過很遺憾，谷歌沒有提供該方法。通過查詢相應的源代碼，我們發現該方法的原型
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); } } }
代碼一目了然，具體就不講解了，關鍵是思路，即如何才能想到是怎么實現的。如有疑問，歡迎留言。謝謝。
歡迎關注公眾號"Devin說"，會不定期更新技術知識