HorizontalScrollView

以前、縦にスクロールする「ScrollView」を取り上げました。今回は横スクロールを行なう「HorizontalScrollView」をご紹介します。

---

◆ 横スクロール

HorizontalScrollViewもScrollViewと同様に、1つのオブジェクトに対してのみ使用可能ですので、LinearLayoutをスクロールさせるようにします。LinearLayoutの中に、縦40ピクセル・横80ピクセルのTextViewを横に並べていきます。画面の横幅は320ピクセルですから、4つでいっぱいになり、5つめからは見えなくなります。横幅以上のサイズになると、スクロールバーが表示されます。

Androidプロジェクトの設定

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

HorizontalScrollViewTest1aActivity.java

package jp.co.triware.samples.HorizontalScrollViewTest1a;

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

public class HorizontalScrollViewTest1aActivity 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.HORIZONTAL);
        llOutside.setGravity(Gravity.CENTER_HORIZONTAL);

        HorizontalScrollView hsv = new HorizontalScrollView(this);
        hsv.setLayoutParams(new LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.FILL_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT));

        llOutside.addView(hsv);

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

        hsv.addView(llInside);

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

        setContentView(llOutside);
    }
}

実行結果

最初の状態です。TextViewの下に表示されている線がスクロールバーです。

真ん中あたりまでスクロールしました。

一番右までスクロールしました。

---

◆ 縦横スクロール

HorizontalScrollViewとScrollViewと組み合わせたサンプルを作ってみましょう。
縦方向のLinearLayoutをScrollViewで縦スクロール、そのLinearLayoutの中に横方向のLinearLayoutを作ってHorizontalScrollViewで横スクロールするようにします。

イメージとしてはこのような感じです。

<ScrollView>
    <LinearLayout> … 縦スクロールする内容
      <HorizontalScrollView>
        <LinearLayout> … 横スクロールする内容
          ・・・
        </LinearLayout>
      </HorizontalScrollView>
    </LinearLayout>
  </ScrollView>

Androidプロジェクトの設定

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

HorizontalScrollViewTest1bActivity.java

package jp.co.triware.samples.HorizontalScrollViewTest1b;

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

public class HorizontalScrollViewTest1bActivity 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 llVertical = new LinearLayout(this);
        llVertical.setOrientation(LinearLayout.VERTICAL);
        llVertical.setGravity(Gravity.CENTER_HORIZONTAL);

        sv.addView(llVertical);

        for (int i = 0; i < 20; i ++) {
            HorizontalScrollView hsv = new HorizontalScrollView(this);
            hsv.setLayoutParams(new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.FILL_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));

            llVertical.addView(hsv);

            LinearLayout llHorizontal = new LinearLayout(this);
            llHorizontal.setOrientation(LinearLayout.HORIZONTAL);
            llHorizontal.setGravity(Gravity.CENTER_HORIZONTAL);

            hsv.addView(llHorizontal);

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

        setContentView(llOutside);
    }
}

実行結果

最初の状態は、縦スクロール部は一番上、横スクロール部は一番左の部分を表示しています。

縦スクロールは真ん中あたりで、いくつか横スクロール。

一番下まで縦スクロールした状態。