Androidは画面をスクロールさせることでたくさんの情報を表示させることができます。Kotlinでも ScrollVew を使うと簡単に縦方向にスクロールさせることができます。
API 29
ScrollView
ScrollViewの設定自体はとても簡単です。
スクロールさせたいところを ScrollView で挟み込むだけです。
試しにこの画像をスクロールさせてみましょう。画像はなるべく縦長がいいのですが
650 x 860
レイアウトファイルに記述
レイアウトXMLファイルでターゲットの画像をImageViewで表示し、それをScrollViewではさみます。もっともこれはレイアウトで記述するだけなので、JavaもKotlinもないのですが…
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:src="@drawable/cat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/description"/> </ScrollView> |
strings.xml
1 2 3 4 |
<resources> <string name="app_name">YourAppName</string> <string name="description">cat</string> </resources> |
このままで実行させてると、上下にスクロールするのが分かると思います。
コードで記述
レイアウトXMLファイルを使わずにコードで書く場合は
画像をImageViewに設定して、ScrollViewに追加して表示します。
MainActivity.kt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package your.package.name import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.LinearLayout import android.widget.ScrollView import android.view.ViewGroup import android.widget.ImageView class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) //setContentView(R.layout.activity_main) val mParent = ViewGroup.LayoutParams.MATCH_PARENT val wContent = ViewGroup.LayoutParams.WRAP_CONTENT val scrollView = ScrollView(this) scrollView.layoutParams = LinearLayout.LayoutParams(wContent, mParent) val imageView = ImageView(this) // drawableの画像を指定 imageView.setImageResource(R.drawable.cat) imageView.layoutParams = LinearLayout.LayoutParams(wContent, mParent) // ScrollView に View を追加 scrollView.addView(imageView) setContentView(scrollView) } } |
one direct child
通常、画面にUIが一つというのはあまりありませんので、複数のUIをScrollViewで挟むと
ScrollView can host only one direct child
というエラーになります。ScrollViewは子Viewを1つしか持てません。
どうするかというと、テキストやボタンなどをまとめてスクロールさせたい場合は、LinearLayout等でくくり、ScrollさせるのはLinearLayoutだけという体裁をとればいいのです。
実際に縦長画像と上下にテキスト、ボタンを置いたレイアウトをスクロールさせてみます。
actiity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="@string/text" android:textSize="24sp" android:layout_margin="20dp" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" /> <ImageView android:src="@drawable/cat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:contentDescription="@string/description"/> <Button android:text="@string/button" android:layout_margin="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </ScrollView> |
strings.xml
1 2 3 4 5 6 |
<resources> <string name="app_name">YourAppName</string> <string name="description">cat</string> <string name="text">Test ScrollView</string> <string name="button">button</string> </resources> |
猫の画像を上下にスクロールできるようになりました。