【Android】無限滾動的HorizontalScrollView

　　這是一個很簡單的功能，作為新手，做一下筆記。也給其它有需要的人提供一個參考。

　　首先HorizontalScrollView都知道用途了。它可以實現類似“桌面程序”左右切換頁的效果。一般情況下里面的頁數都是固定的，但是也有可能遇到不固定頁數的，比如動態加載照片，或者像我這次需要實現的情況。

　　實現功能：實現日歷的“日視圖”。一頁表示某一天的情況，向右翻頁可翻到下一天，向左翻到上一天。而且可以隨意翻到任意一天。每一頁記錄有當天的待辦事項（這個就另外寫了，這里只實現無限左右翻頁）。

　　由於每天作為一頁，把所有天數都加載到ScrollView中是不現實的。考慮到內存占用問題，ScrollView中肯定不要放太多東西的好。所以只放3頁。如下圖所示：

　　HorizontalScrollView中僅有3頁。在第0頁，向左翻的時候，松手的一瞬間，1頁消失，-2頁加載，然后smoothScroll到 -1頁。向右亦然。因此可以保證不占用過多內存，又可以無限翻頁。

 

　　實現的時候還遇到一點小問題，順便也一起寫下來。

　　一開始我很自然地想到重寫HorizontalScrollView。即代碼中的KamHorizontalScrollView。

1. 主要是重寫onTouchEvent方法，用於處理用戶手指滑動事件。
2. 由於每個子View占一屏，不可以出現兩個View各占一半的現象，需要有一個將子View分頁化的方法。在我的代碼中就是public boolean scrollToPage(int);該方法傳入的是頁碼，可以保證滑動到正確的位置，而不會滑一半。
3. 還有一點要注意，翻頁的時候，為了保證ScrollView只有3頁，需要增加刪除子View。在末尾增刪沒有問題，但在首部增加，所有的子View會向后移動，在首部刪除，所有的子View會向前移動，因此這兩個操作需要立即改變ScrollView的scroll值以保證屏幕顯示順滑。這一點在方法public boolean addLeft(View);和public boolean removeLeft();中均有體現。

 

　　接下來是我寫代碼過程中出現的一些問題：

　　1、重寫HorizontalScrollView后，我在構造函數中進行初始化，添加三個初始的子View，報錯。

　　解決：構造函數調用的時候，ScrollView還沒有實例化，因此這個時候不能添加子View。應該等實例化之后再添加。重寫protected void onFinishInflate();方法即可得到實例化完成的時機，在該方法下初始化。

　　2、左右滑動的時候，我調用的是scrollToPage(1);但是總是滑動到第2頁或第0頁。就是不能定在第1頁。

　　解決：這個問題我花了不少時間（其實如果我去認真看看API就能很快搞定的）。通過Log，發現addView之后，新的View的Left值仍是0。或者說addView之后的一瞬間，layout中的所有子View還是保持原有的狀態。過了一陣子才又重新排列的。所以我需要獲得他們重新排列的時機，才能scroll到正確位置。之前寫JavaSE的自定義布局有重寫過排列布局的方法，所以這個也有。說白了就是onLayout方法（我以為是onMeasure，試了不行很糾結）。onLayout方法中，應該就是對所有子View進行重新排列了。（這一點可以自己去試試，先addView，然后立刻獲取剛才這個View的位置和尺寸，會發現都是0。然后你可以通過按鍵事件再獲取一次，會發現得到正確值了。因為從addView到按鍵這段時間足夠他重新排列了。）

　　所以通過LinearLayout.addOnLayoutChangeListener(listener);就可以監聽重新排列的時機。但是該方法需要APILevel 11及以上。剛好我在用我的G12測試，APILevel10。雖然很糾結，我也只能重寫了LinearLayout，即代碼中的KamLinearLayout，還有自定義監聽器kamLayoutChangeListener。重寫僅僅是為了在Android2.3監聽onLayout。

 

　　另外加了一點小細節，翻頁的機制除了手指滑動的距離，還有手指滑動的速度。自己寫的SpeedChange三個方法。測試了一下感覺效果挺不錯。

 

　　最后把源碼附上，注釋寫了比較詳細的，希望能幫助到初學者。不要像我走太多彎路。(注意改包名)

 

KamHorizontalScrollView.java

package com.kam.horizontalscrollviewtest.view;

import com.kam.horizontalscrollviewtest.R;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.FrameLayout.LayoutParams;
/*如果不需要支持Android2.3，可以將代碼中所有KamLinearLayout替換為ViewGroup*/
public class KamHorizontalScrollView extends HorizontalScrollView {
    private static String tag = "KamHorizontalScrollView";
    private Context context;
    
    /*記錄當前的頁數標識（做日視圖的時候可以和該值今日的日期作差）*/
    private int PageNo=0;
    
    /*保存ScrollView中的ViewGroup，如果不需要支持Android2.3，可以將KamLinearLayout替換為ViewGroup*/
    private KamLinearLayout childGroup = null;
    
    /*這是判斷左右滑動用的（個人喜好，其實不需要這么麻煩）*/
    private int poscache[] = new int[4];
    private int startpos;
    
    public KamHorizontalScrollView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        this.context=context;
    }
    public KamHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        this.context=context;
    }
    public KamHorizontalScrollView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        this.context=context;
    }
    
    /*重寫觸摸事件，判斷左右滑動*/
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startpos = (int) ev.getX();
            /*用於判斷觸摸滑動的速度*/
            initSpeedChange((int) ev.getX());
            break;
        case MotionEvent.ACTION_MOVE: {
            /*更新觸摸速度信息*/
            movingSpeedChange((int) ev.getX());
        }
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL: {
            /*先根據速度來判斷向左或向右*/
            int speed = releaseSpeedChange((int) ev.getX());
            if(speed>0){
                nextPage();
                return true;
            }
            if(speed<0){
                prevPage();
                return true;
            }
            
            /*這里是根據觸摸起始和結束位置來判斷向左或向右*/
            if (Math.abs((ev.getX() - startpos)) > getWidth() / 4) {
                if (ev.getX() - startpos > 0) {
                    /*向左*/
                    prevPage();
                } else {
                    /*向右*/
                    nextPage();
                }
            } else {
                /*不變*/
                scrollToPage(1);
            }
            return true;
        }
        }
        return super.onTouchEvent(ev);
    }

    /*完成實例化*/
    @Override
    protected void onFinishInflate(){
        super.onFinishInflate();
        Log.i(tag, "onFinishInflate Called!");
        init();
    }
    
    /*初始化，加入三個子View*/
    private void init(){
        this.childGroup=(KamLinearLayout) findViewById(R.id.container);
        /*添加LayoutChange監聽器*/
        childGroup.addKamLayoutChangeListener(listener);
        /*調用其自身的LayoutChange監聽器（不支持Android2.3）*/
        /*childGroup.addOnLayoutChangeListener(listener);*/
        
        addRight(createExampleView(-1));
        addRight(createExampleView(0));
        addRight(createExampleView(1));
    }
    /*添加監聽器*/
    kamLayoutChangeListener listener = new kamLayoutChangeListener() {
        
        @Override
        public void onLayoutChange() {
            // TODO Auto-generated method stub
            Log.i(tag, "onLayoutChanged Called!");
            scrollToPage(1);
        }
    };
    /*
     //注意，如果不需要支持Android2.3，可以將上面的listener替換成下方listener
    OnLayoutChangeListener listener = new OnLayoutChangeListener() {
        
        @Override
        public void onLayoutChange(View arg0, int arg1, int arg2, int arg3,
                int arg4, int arg5, int arg6, int arg7, int arg8) {
            // TODO Auto-generated method stub
            Log.i(tag, "onLayoutChanged Called!");
            scrollToPage(1);
        }
    };
    */
    
    /*左翻頁*/
    public void prevPage(){
        PageNo--;
        addLeft(createExampleView(PageNo-1));
        removeRight();
    }
    
    /*右翻頁*/
    public void nextPage(){
        PageNo++;
        addRight(createExampleView(PageNo+1));
        removeLeft();
    }
    
    
    /*獲取某個孩子的X坐標*/
    private int getChildLeft(int index){
        if (index>=0 && childGroup != null) {
            if(index< childGroup.getChildCount())
                return  childGroup.getChildAt(index).getLeft();
        }
        return 0;
    }
    
    /**
     * 向右邊添加View
     * @param view 需要添加的View
     * @return true添加成功|false添加失敗
     */
    public boolean addRight(View view){
        if(view==null || childGroup==null)return false;
        childGroup.addView(view);
        return true;
    }
    
    /**
     * 刪除右邊的View
     * @return true成功|false失敗
     */
    public boolean removeRight(){
        if( childGroup==null || childGroup.getChildCount()<=0)return false;
        childGroup.removeViewAt(childGroup.getChildCount()-1);
        return true;
    }
    
    /**
     * 向左邊添加View
     * @param view 需要添加的View
     * @return true添加成功|false添加失敗
     */
    public boolean addLeft(View view){
        if(view==null || childGroup==null)return false;
        childGroup.addView(view, 0);
        
        /*因為在左邊增加了View，因此所有View的x坐標都會增加，因此需要讓ScrollView也跟着移動，才能從屏幕看來保持平滑。*/
        int tmpwidth = view.getLayoutParams().width;
        if(tmpwidth==0)tmpwidth=getWinWidth();
        Log.i(tag, "the new view's width = "+view.getLayoutParams().width);
        this.scrollTo(this.getScrollX()+tmpwidth, 0);
        
        return true;
    }

    /**
     * 刪除左邊的View
     * @return true成功|false失敗
     */
    public boolean removeLeft(){
        if( childGroup==null || childGroup.getChildCount()<=0)return false;
        
        /*因為在左邊刪除了View，因此所有View的x坐標都會減少，因此需要讓ScrollView也跟着移動。*/
        int tmpwidth=childGroup.getChildAt(0).getWidth();
        childGroup.removeViewAt(0);
        this.scrollTo((int) (this.getScrollX()-tmpwidth), 0);
        
        return true;
    }
    
    /**
     * 跳轉到指定的頁面
     * 
     * @param index 跳轉的頁碼
     * @return
     */
    public boolean scrollToPage(int index){
        if(childGroup==null)return false;
        if(index<0 || index >= childGroup.getChildCount())return false;
        smoothScrollTo(getChildLeft(index), 0);
        return true;
    }
    
    private int getWinWidth() {
        DisplayMetrics dm = new DisplayMetrics();
        // 獲取屏幕信息
        dm = context.getResources().getDisplayMetrics();
        return dm.widthPixels;
    }

    private int getWinHeight() {
        DisplayMetrics dm = new DisplayMetrics();
        // 獲取屏幕信息
        dm = context.getResources().getDisplayMetrics();
        return dm.heightPixels;
    }
    /*生成一個測試用View。真正使用的時候就不需要這個了。*/
    private View createExampleView(int index){
        LayoutParams params = new LayoutParams(getWinWidth(), getWinHeight());
        /*設置不同的背景色使效果更加明顯*/
        int colorarr[] = {
                Color.rgb(240, 180, 180),
                Color.rgb(240, 240, 180),
                Color.rgb(180, 240, 240),
                Color.rgb(180, 240, 180)};
        TextView txtview = new TextView(context);
        txtview.setBackgroundColor(colorarr[(index%4+4) % 4]);
        txtview.setText(index + "");
        txtview.setTextSize(40);
        txtview.setGravity(Gravity.CENTER);
        txtview.setLayoutParams(params);
        
        return txtview;
    }
    
    
    /*下面的方法僅僅是個人喜好加上的，用於判斷用戶手指左右滑動的速度。*/
    private void initSpeedChange(int x){
        if(poscache.length<=1)return;
        poscache[0]=1;
        for(int i=1;i<poscache.length;i++){
            
        }
    }
    private void movingSpeedChange(int x){
        poscache[0]%=poscache.length-1;
        poscache[0]++;
        //Log.i(tag, "touch speed:"+(x-poscache[poscache[0]]));
        poscache[poscache[0]]=x;
    }
    private int releaseSpeedChange(int x){
        return releaseSpeedChange(x, 30);
    }
    private int releaseSpeedChange(int x,int limit){
        poscache[0]%=poscache.length-1;
        poscache[0]++;
        /*檢測到向左的速度很大*/
        if(poscache[poscache[0]]-x>limit)return 1;
        /*檢測到向右的速度很大*/
        if(x-poscache[poscache[0]]>limit)return -1;
        
        return 0;
    }
}

 

 KamLinearLayout.java (如果不需要支持APILevel 10及以下，可以無視這個類)

package com.kam.horizontalscrollviewtest.view;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class KamLinearLayout extends LinearLayout {
    kamLayoutChangeListener listener = null;
    
    public void addKamLayoutChangeListener(kamLayoutChangeListener listener){
        this.listener=listener;
    }
    
    public KamLinearLayout(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }
    public KamLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    
    @Override
    public void onLayout(boolean changed,
            int l, int t, int r, int b){
        super.onLayout(changed, l, t, r, b);
        if(this.listener!=null)this.listener.onLayoutChange();
    }

}
/*自定義監聽器*/
interface kamLayoutChangeListener{
    abstract void onLayoutChange();

}

 

MainActivity.java

package com.kam.horizontalscrollviewtest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.kamhsview);
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

 

kamhsview.xml

<?xml version="1.0" encoding="utf-8"?>
<com.kam.horizontalscrollviewtest.view.KamHorizontalScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/kamscrollview"
        android:fadingEdge="none"
        android:scrollbars="none"
        >
        
    <!-- 如果你不需要支持Android2.3，可以把后面的KamLinearLayout替換成普通的LinearLayout
    <LinearLayout
        android:id="@+id/container1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        
    </LinearLayout > -->
    <com.kam.horizontalscrollviewtest.view.KamLinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        
    </com.kam.horizontalscrollviewtest.view.KamLinearLayout>
</com.kam.horizontalscrollviewtest.view.KamHorizontalScrollView>

AndroidManifest就是默認的那個，沒有改。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.kam.horizontalscrollviewtest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="10" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppBaseTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>