[Android] コンテナ (2) スクロール表示 - ScrollView、HorizontalScrollView

[Android] コンテナ (2) スクロール表示 - ScrollView、HorizontalScrollView
================================================================================

ScrollView は、そのコンテンツのスクロール機能を提供するコンテナ。画面に入りきれ
ないと思われるウィジェットを ScrollView で囲むことで、既存のレイアウトをそのまま
使うことができる。

使い方としては以下のとおり。
    <ScrollView>
        他のウィジェット
    </ScrollView>


ScrollView は、縦スクロール。HorizontalScrollView は横スクロールが可能になる。
縦と横の両方を可能にするためには、ScrollView と HorizontalScrollView とを組み合
わせればよい。すなわち、次のような形になる。
    <HorizontalScrollView>
        <ScrollView>
            他のウィジェット
        </ScrollView>
    </HorizontalScrollView>


▲ レイアウト

同じレイアウトに対して、つぎの 3 つのパターンを表示。

    ScrollView
    HorizontalScrollView
    ScrollView と HorizontalScrollView の組合わせ

レイアウトは、TableLayout01 のサンプル。
したがって、拡大していくと、それぞれが縦スクロール、横スクロール、縦横スクロール
ができる。

わかりやすくするために、ScrollView 要素に囲まれているウィジェットは、table.xml 
をインクルードしている。

□ res/layout/main.xml
---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ScrollView"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    
    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <include android:id="@+id/table0" layout="@layout/table" />
    </ScrollView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HorizontalScrollView"
        android:textAppearance="?android:attr/textAppearanceLarge" />
        
    <HorizontalScrollView
        android:id="@+id/horizontalScrollView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <include android:id="@+id/table1" layout="@layout/table" />
    </HorizontalScrollView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HorizontalScrollView + ScrollView"
        android:textAppearance="?android:attr/textAppearanceLarge" />
        
    <HorizontalScrollView
        android:id="@+id/horizontalScrollView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" 
        android:scrollbars="none">

        <ScrollView
            android:id="@+id/scrollView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:scrollbars="none">

            <include android:id="@+id/table2" layout="@layout/table" />
        </ScrollView>
    </HorizontalScrollView>

</LinearLayout>
---


□ ScrollView クラス

java.lang.Object
   +   android.view.View
        +   android.view.ViewGroup
             +   android.widget.FrameLayout
                  +   android.widget.ScrollView

ScrollView は、そのコンテンツの縦スクロール機能を提供するコンテナ。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
fillViewport  子のウィジェットが小さい場合でも、このビューの高さ分の領域をとる
---

setFillViewport(boolean) メソッドにより、属性値を動的に変更できる。


□ HorizontalScrollView

java.lang.Object
   +   android.view.View
        +   android.view.ViewGroup
             +   android.widget.FrameLayout
                  +   android.widget.HorizontalScrollView

HorizontalScrollView は、そのコンテンツの横スクロール機能を提供するコンテナ。


XML 属性(属性名の前に、名前空間プレフィックス android: がつく)
---
fillViewport  子のウィジェットが小さい場合でも、このビューの幅分の領域をとる
---

setFillViewport(boolean) メソッドにより、属性値を動的に変更できる。


・スクロールバーの表示

android:scrollbars 属性は、スクロールバーを表示するかしないかを指定する。
つぎの値が指定できる。
    none          スクロールが必要になっても表示しない
    horizontal    横スクロールが必要なときに横バーを表示
    vertical      縦スクロールが必要なときに縦バーを表示

なお、ScrollViewで、実際にスクロールバーが表示されるのは、スクロールが必要なとき
で、android:scrollbars="vertical" と指定しても、最初からスクロールバーが表示され
るわけではない。表示させたくないときは値 "none" を指定する。


□ res/layout/table.xml

※ TableLayout01 プロジェクトの res/layout/main.xml と同じ。


▲ アクティビティ

ボタンがクリックされたら、その状態によって、ボタンの幅と高さを倍にするか半分にす
る。

□ ScrollView01Activity.java

※ クラス名が上記の名前になっているだけで、コードは LinearLayout01Activity.java と同じ。


■ 実例

サンプルのプロジェクトは、以下の記事を参照。
    SystemOut01 プロジェクト
    標準出力 - あて先に画面を追加する, 2011-12-22
    http://blog.goo.ne.jp/marunomarunogoo/d/20111222

System.out を TextView に割り当て、いかにもコンソールに出力するように、表示部分
がスクロールするようにしているサンプルである。


▲ レイアウト

レイアウトだけ再掲載する。

□ res/layout/main.xml

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

    <ScrollView
        android:id="@+id/sysoutScrollView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >    <!-- (1) -->

        <TextView
            android:id="@+id/sysout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />    <!-- (2) -->
    </ScrollView>

</LinearLayout>
---

ScrollView 要素の下に TextView 要素。この TextView が画面いっぱいになったら、ス
クロール・バーが表示される。


■ 自動スクロールダウン

ScrollView を使っただけでは、自動的にスクロールダウンしない。自動的にスクロール
ダウンさせるのであれば、以下のようなスレッドを作り、ポストする。

上記の例であれば、
        TextView view = (TextView) findViewById(R.id.sysout);
としたときに、

    ((View) view.getParent()).post(new ScrollDown());

で、スクロール・ダウンさせるスレッドを設定する。

スクロール・ダウンさせるスレッドは、以下のように作成する。
なお、view は、インスタンス・フィールドか、final ローカル変数として定義してある
ものとする。

---
    /**
     * スクロールダウンさせるスレッドのクラス
     * @author marunomaruno
     */
    private class ScrollDown implements Runnable { // (8)
        public void run() {
            ((ScrollView) view.getParent()).fullScroll(View.FOCUS_DOWN); // (9)
        }
    }
---

                                                                            以上