Winner? Loser? No matter

[關鍵字] Synchronized ScrollView / Android / Scroll simultaneously / onScrollChanged / Horizontal ScrollView

如法炮製的，從上一篇垂直移動的 ScrollView，

我們可以很快的建構出另外兩個同步水平移動的 ScrollView。

主要是繼承的物件從 ScrollView 改成 HorizontalScrollView，

其它大致類似。

code:src/com.your.package/SyncHorizontalScrollView.java

package com.example.synchorizontalscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.HorizontalScrollView;
import android.widget.ScrollView;

public class SyncHorinzontalScrollView extends HorizontalScrollView {

    private SyncScrollViewListener syncScrollViewListener = null;
    
    public SyncHorinzontalScrollView(Context context) {
        super(context);
        
    }
    
    public SyncHorinzontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        
    }
    
    @Override
    protected void onScrollChanged(int x, int y, int oldX, int oldY){
        super.onScrollChanged(x, y, oldX, oldY);
        if (syncScrollViewListener != null){
            syncScrollViewListener.onScrollChanged(this, x, y, oldX, oldY);
        }
    }
    
    public void setScrollViewListener (SyncScrollViewListener syncScrollViewListener){
            this.syncScrollViewListener = syncScrollViewListener;
    }
    
}

在這一篇裡頭，為了強調橫向移動，我特別在裡面加入了 TableLayout，

如此一來可以很清楚的看到橫向捲動的表現，效果如下:

code:res/layout/simple_tablelayout.xml

<?xml version="1.0" encoding="utf-8"?>
    
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tablelayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    
</TableLayout>

code:src/com.your.package/MainActivity.java

package com.example.synchorizontalscrollview;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

public class MainActivity extends Activity {

    SyncHorinzontalScrollView syncHorizontalSV_A;
    SyncHorinzontalScrollView syncHorizontalSV_B;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TableLayout tableLayout_left = genTable(12,16);
        TableLayout tableLayout_right = genTable(12,16);
        
        LinearLayout.LayoutParams weight_1 = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1.0f);
        LinearLayout.LayoutParams spareViewParams = new LinearLayout.LayoutParams(50, LayoutParams.MATCH_PARENT);
        
        syncHorizontalSV_A = new SyncHorinzontalScrollView(this);
        syncHorizontalSV_A.setLayoutParams(weight_1);
        syncHorizontalSV_A.addView(tableLayout_left);
        syncHorizontalSV_A.setScrollViewListener(new SV_listener());
        
        View spareView = new View(this);
        spareView.setBackgroundColor(Color.CYAN);
        spareView.setLayoutParams(spareViewParams);
        
        syncHorizontalSV_B = new SyncHorinzontalScrollView(this);
        syncHorizontalSV_B.setLayoutParams(weight_1);
        syncHorizontalSV_B.addView(tableLayout_right);
        syncHorizontalSV_B.setScrollViewListener(new SV_listener());
        
        LinearLayout linearLayout = new LinearLayout(this);
        linearLayout.setOrientation(LinearLayout.HORIZONTAL);
        
        linearLayout.addView(syncHorizontalSV_A);
        linearLayout.addView(spareView);
        linearLayout.addView(syncHorizontalSV_B);
        
        RelativeLayout baseRL = (RelativeLayout)findViewById(R.id.basslayout);
        baseRL.addView(linearLayout);
        
    }
    
    private TableRow genCol(int rowColumnAmount){
        TableRow tr = new TableRow(this);
        for(int i=0;i<rowColumnAmount;i++){
            TextView tv = new TextView(this);
            tv.setText("Col "+i+ " ");
            tv.setBackgroundColor(0xFFFF6666 + i*15);
            tv.setTextSize(12);
            tr.addView(tv);
        }
        
        return tr;
    }

    private TableLayout genTable(int rowColumnAmount, int rowAmount){
        TableLayout tableLayout = (TableLayout) LayoutInflater.from(this).
                inflate(R.layout.simple_tablelayout, null).
                findViewById(R.id.tablelayout);
        
        for(int count = 0; count<rowAmount;count++){
            tableLayout.addView(genCol(rowColumnAmount));
        }
        
        return tableLayout;
    }
    
    private class SV_listener implements SyncScrollViewListener{

        @Override
        public void onScrollChanged(SyncHorinzontalScrollView ssv, int x,
                int y, int oldX, int oldY) {
            if(ssv==syncHorizontalSV_A){
                syncHorizontalSV_B.smoothScrollTo(x, y);
            }else if (ssv==syncHorizontalSV_B){
                syncHorizontalSV_A.smoothScrollTo(x, y);
                
            }
        }
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

 當然同樣需要一個監聽器(Listener)，

code:src/com.your.package/SyncScrollViewListener.java

package com.example.synchorizontalscrollview;

public interface SyncScrollViewListener {
    
    public void onScrollChanged(SyncHorinzontalScrollView ssv, int x, int y, int oldX, int oldY);

}

如此一來便可以得到同時水平移動的兩個 ScrollView，下一篇將說明

如何讓這兩個水平的 ScrollView 改成 鏡向移動。

若不甚了解，可由此下載整包APP以便套用:

http://fiberupload.net/iszaejpofmlf/SyncHorizontalScrollView.7z