RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

イベント詳細についてはこちらをクリック

ScrollViewでAndroidアプリの画面スクロールを実現させる

kuwa_38です。先日SQLiteを使ったAndroidアプリを作成していたのですが、表示データが多くなると画面外に表示されるため対策が必要だなと考えていました。 この記事ではScrollViewを使って特定領域内をスクロール可能にする方法をご紹介します。

今回作成するアプリと過去の記事

今回ScrollViewによりスクロールを導入するアプリを紹介します。簡単に言うとSQLiteを用いてDB内のデータを表示するアプリです。今回はそのアプリで表示するViewにスクロール機能をつけることがゴールです。

qiita.com

f:id:kuwa_38:20190102132654g:plain
scroll

ScrollViewを導入して特定領域内をスクロール可能にする

画面レイアウト用のxmlにおいて、スクロールをさせたい範囲をScrollViewで囲むと、その範囲をスクロールさせることができます。

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:id="@+id/scrollView">
       <!-- スクロールさせたいTextView -->
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="「表示」を押すとDBのデータを全件表示します" />
    </ScrollView>

(注意1)画面のレイアウトが崩れる

ScrollViewで要素を囲む」。これだけでいいのですが、注意点があります。1つは画面のレイアウトが崩れることがあることです。文字入力しようとするとキーボードが出てきた際にレイアウトが崩れてしまいます。

f:id:kuwa_38:20190102133355g:plain
レイアウト崩れ

注意1の解決方法

ScrollViewandroid:isScrollContainer="false"を追加することで解決できます。下記のサイトによると isScrollContainerIMEが表示されたときにスペースを空けるためにViewをリサイズするかどうかを指定するものだそうです。

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:isScrollContainer="false"
        android:id="@+id/scrollView">
       <!-- スクロールさせたいTextView -->
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="「表示」を押すとDBのデータを全件表示します" />
    </ScrollView>

retrocatsoft.blogspot.com

(注意2)複数要素を指定したい場合

2つ目はScrollViewは1つの要素しか指定できないことです。 実際、下記のように要素を追加すると、エラーが発生します。

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:isScrollContainer="false"
        android:id="@+id/scrollView">
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="「表示」を押すとDBのデータを全件表示します" />
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2つ目のTextView" />
    </ScrollView>
# consoleのエラー
...(略)
...ScrollView can host only one direct child

注意2の解決方法

LinearLayoutで指定したい要素を囲みScrollViewで指定する要素をLinearLayoutの要素1つとすることで解決できます。

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"
        android:isScrollContainer="false"
        android:id="@+id/scrollView">
        <LinearLayout
            android:id="@+id/LinearLayout"
            android:orientation="vertical"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent">
            <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="「表示」を押すとDBのデータを全件表示します" />
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2つ目のTextView" />
        </LinearLayout>
    </ScrollView>

f:id:kuwa_38:20190102155541g:plain
複数要素のスクロール

おわりに

今回はScrollViewを使って特定領域をスクロールさせる方法をご紹介しました。最初はScrollViewで囲むだけなので簡単だと思っていましたが、レイアウト崩れや要素の制限などやってみると思いの他詰まり奥が深い(というか自分が知らないことが多い)なという印象です。 今後もAndroidアプリ開発は続けるつもりなのでこういった記事を書いていこうと思います。

Copyright © RAKUS Co., Ltd. All rights reserved.