Goodroid

GoodroidはAndroidアプリ開発のための情報をコラムやブログで紹介するサイトです。


オーバースクロールを実装する
ここではオーバースクロールを実装する方法を確認していきます。

オーバースクロールはリストを最大まで引っぱった時に限界を超えて表示させることができます。イメージ的にはTwitterで更新するときに下に引っぱって離すことで同期されますよね。そんな具合に引っぱって表示される部分を作れます。

オーバースクロールの実装するには、ListViewなどを継承したカスタムビューを作成する必要があります。
(OverScrollView.java)

サンプルコードのカスタムビューでは、コンストラクタでXMLファイルからリストの上部または下部のY軸方向に対するスクロール最大値を取得しています。(main.xml内のmaxOverScrollY="200"が該当する)

また、オーバーライドするoverScrollByメソッドには9つの引数があり、Y軸方向だけでなくX軸方向やスクロール幅も設定することができます。

詳しくは以下の表を参照してください。

引数 内容
int deltaX スクロールした量のX軸方向の増分
int deltaY スクロールした量のY軸方向の増分
int scrollX X軸方向の量(これまでのスクロールした総和)
int scrollY Y軸方向の量(これまでのスクロールした総和)
int scrollRangeX X軸方向のスクロール幅
int scrollRangeY Y軸方向のスクロール幅
int maxOverScrollX X軸方向のスクロール最大値
int maxOverScrollY Y軸方向のスクロール最大値
boolean isTouchEvent TouchEventからの呼び出しフラグ

スクロールして表示する部分はXMLファイルで「android:overScrollHeader="@drawable/icon"」のように指定することで、画像を表示することができます。また、「android:overScrollFooter="#FFFFFF"」の様に色コードを指定することも可能です。

以下、ファイル構成図になります。



OverScrollActivity.java
package goodrlid.sample.overscroll;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;

public class OverScrollActivity extends Activity {

  // リストビューに表示する配列データ
    String[] list = new String[]{
    		"list_01", "list_02", "list_03", "list_04", "list_05",
    		"list_06", "list_07", "list_08", "list_09", "list_10"
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // アダプタを用意して配列listを紐付る
        ListAdapter adapter = (ListAdapter)new ArrayAdapter<String>(
        		this, android.R.layout.simple_list_item_1, list);

        // カスタムリストビューの取得
        OverScrollView lv = (OverScrollView) findViewById(R.id.listview);

        // アダプタを設定する。
        lv.setAdapter(adapter);
    }
}

OverScrollView.java
package goodrlid.sample.overscroll;

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

// カスタムリストビュークラス
public class OverScrollView extends ListView {

    // オーバースクロールするY軸方向の最大値
    private int maxOverScrollY = 0;

    public OverScrollView(Context context){
 	super(context);
    }

    public OverScrollView(Context context, AttributeSet attrs) {
	super(context, attrs);
        // XMLファイルから最大値を取得する
	this.maxOverScrollY = attrs.getAttributeIntValue(null, "maxOverScrollY", 0);
    }

    public OverScrollView(Context context, AttributeSet attrs, int defStyle){
	super(context, attrs, defStyle);
	// XMLファイルから最大値を取得する
	this.maxOverScrollY = attrs.getAttributeIntValue(null, "maxOverScrollY", 0);
    }

    @Override
    protected boolean overScrollBy(
	int deltaX,
	int deltaY,
	int scrollX,
	int scrollY,
	int scrollRangeX,
	int scrollRangeY,
	int maxOverScrollX,
	int maxOverScrollY,
	boolean isTouchEvent){

	return super.overScrollBy(
	    deltaX,
	    deltaY,
	    scrollX,
	    scrollY,
	    scrollRangeX,
	    scrollRangeY,
	    maxOverScrollX,
	    this.maxOverScrollY,
	    isTouchEvent
	);
    }
}

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <goodrlid.sample.overscroll.OverScrollView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"

        android:overScrollMode="always"
        android:overScrollHeader="@drawable/icon"
        android:overScrollFooter="#FFFFFF"

        maxOverScrollY="200"/>

</LinearLayout>

実行結果

5752 views | コメント:0 | 2012-06-28
コメント
まだこの記事にコメントはありません
コメントの投稿
名前 (必須)

メールアドレス (非公開)

本文(必須)

パスワード (必須)
(半角数字4桁)