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

yangxi_001發表於2013-12-11
AndroidView
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);  
        }  
    }  
  
}  

相關文章