ScrollView

UIは画面に収まるように作るのが基本ですが、画面に収まらない場合や、件数がかわるデータを表示させたいときはどうすればいいのでしょうか。今回はそれを解決するための「ScrollView」を使ってみましょう。

---

◆ ScrollViewを使わない場合

まず、縦に収まりきらない画面を作って、どのような表示になるか確かめてみましょう。
"Text 0"から"Text 99"を単純に縦に表示させていきます。1つあたりの高さは40ピクセルです。

Androidプロジェクトの設定

プロジェクト名	ScrollViewTest1a
ビルドターゲット	Android 2.1-update1
アプリケーション名	ScrollViewTest1a
パッケージ名	jp.co.triware.samples.ScrollViewTest1a
アクティビティーの作成	ScrollViewTest1a
最小SDKバージョン	7

ScrollViewTest1a.java

package jp.co.triware.samples.ScrollViewTest1a;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.LinearLayout;
import android.view.Gravity;

public class ScrollViewTest1a extends Activity {
    private static final int itemHeight = 40;
    private static final int itemWidth = 80;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        LinearLayout llVertical = new LinearLayout(this);
        llVertical.setOrientation(LinearLayout.VERTICAL);
        llVertical.setGravity(Gravity.CENTER_HORIZONTAL);

        for (int i = 0; i < 100; i ++) {
            TextView tv = new TextView(this);
            tv.setHeight(itemHeight);
            tv.setWidth(itemWidth);
            tv.setText("Text " + i);
            llVertical.addView(tv);
        }

        setContentView(llVertical);
    }
}

実行結果

"Text 11"以降が画面からはみ出してしまいました。

◆ ScrollViewを使う場合

画面に収まりきらない場合は、ScrollViewを使ってスクロールできるようにします。

Androidプロジェクトの設定

プロジェクト名	ScrollViewTest1b
ビルドターゲット	Android 2.1-update1
アプリケーション名	ScrollViewTest1b
パッケージ名	jp.co.triware.samples.ScrollViewTest1b
アクティビティーの作成	ScrollViewTest1b
最小SDKバージョン	7

ScrollViewTest1b.java

package jp.co.triware.samples.ScrollViewTest1b;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.LinearLayout;
import android.view.Gravity;
import android.view.ViewGroup;

public class ScrollViewTest1b extends Activity {
    private static final int itemHeight = 40;
    private static final int itemWidth = 80;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        LinearLayout llOutside = new LinearLayout(this);
        llOutside.setOrientation(LinearLayout.VERTICAL);
        llOutside.setGravity(Gravity.CENTER_HORIZONTAL);

        ScrollView sv = new ScrollView(this);
        sv.setLayoutParams(new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.FILL_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT));

        llOutside.addView(sv);

        LinearLayout llInside = new LinearLayout(this);
        llInside.setOrientation(LinearLayout.VERTICAL);
        llInside.setGravity(Gravity.CENTER_HORIZONTAL);

        sv.addView(llInside);

        for (int i = 0; i < 100; i ++) {
            TextView tv = new TextView(this);
            tv.setHeight(itemHeight);
            tv.setWidth(itemWidth);
            tv.setText("Text " + i);
            llInside.addView(tv);
        }

        setContentView(llOutside);
    }
}

ScrollViewは1つのオブジェクトに対してのみ使用可能です。このサンプルでは、100個のTextViewをLinearLayoutで囲み、それをScrollViewでスクロールさせています。

実行結果

スクロールさせることで最後まで表示することができました。

今回は画面全体をスクロールさせるためにScrollViewを使いましたが、1画面の中で複数のエリアをスクロール表示することもできます。画面を上半分と下半分、あるいは左半分と右半分にわける、というケースが多いかもしれませんね。もちろん画面の一部だけをスクロール表示することもできます。

縦スクロールではなくて横スクロールさせたい場合もありますよね。それはまた別の機会にご紹介しましょう。ヒントは「HorizontalScrollView」です。