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

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

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

qiita.com

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>

（注意１）画面のレイアウトが崩れる

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

注意１の解決方法

ScrollViewにandroid:isScrollContainer="false"を追加することで解決できます。下記のサイトによると isScrollContainerはIMEが表示されたときにスペースを空けるために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つ目はScrollViewは１つの要素しか指定できないことです。実際、下記のように要素を追加すると、エラーが発生します。

    <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="２つ目のTextView" />
    </ScrollView>

# consoleのエラー
...（略）
...ScrollView can host only one direct child

注意２の解決方法

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="２つ目のTextView" />
        </LinearLayout>
    </ScrollView>

おわりに

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

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
ラクスDevelopers登録フォーム

https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！