【Android】Jetpack Compose 入門講座 第14回「リストのスクロール①」
はじめに
今回は動物のリストをスクロールできるようにします。
またエミュレータでアプリを実行しなくても動作を確認できる Interactive Mode(インタラクティブモード)も紹介します。
スクロール設定
コードの追加
動物リストをスクロールできるようにするには、たった1行コードを追加するだけです。
AnimalListRow 関数の Row 部分に4行目のコードを追加します。
1@Composable
2fun AnimalListRow(modifier: Modifier = Modifier) {
3 Row(
4 modifier = modifier.horizontalScroll(rememberScrollState())
5 ) {
6 AnimalListElement(drawable = R.drawable.dog, text = "Dog")
今回は水平方向(Horizontal)のスクロールなので horizontalScroll と書きましたが、垂直方向のスクロールには verticalScroll を使用します。
プレビュー関数の変更
プレビューの確認には AnimalListElementPreview 関数を使っていますが、名前を変更してサイズを削除します。
変更前
1@Preview(widthDp = 480)
2@Composable
3private fun AnimalListElementPreview() {
4 MyApp()
5}
↓
変更後
1@Preview
2@Composable
3private fun AnimalListRowPreview() {
4 MyApp()
5}
Interactive Modeで確認
プレビュー画面にある Interactive Mode(インタラクティブモード)という機能を使うと、エミュレータを起動しなくてもスクロールやタップの動きを確認することができます。
プレビュー画面をクリックして、右上に表示される Start Interactive Mode をクリックします。
プレビュー上でスクロールできるようになります。
確認が終わったらプレビュー画面左上にある Stop Interactive Mode をクリックして停止します。
次に行うこと
今回は表示するデータ数が少ないので良いですが、データ数が多くなるとデータを一度に読み込むと時間がかかってしまいます。
次回は効率的にデータを表示する方法を紹介します。
第15回「リストのスクロール②」に進む
ここまでのコード
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp()
}
}
}
@Composable
fun MyApp(modifier: Modifier = Modifier) {
MyApplicationTheme {
AnimalListRow()
}
}
@Composable
fun AnimalListElement(
@DrawableRes drawable: Int,
text: String,
modifier: Modifier = Modifier
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier.padding(8.dp)
) {
Image(
painter = painterResource(id = drawable),
contentDescription = text,
contentScale = ContentScale.Crop,
modifier = modifier
.size(80.dp)
.clip(CircleShape)
)
Text(
text = text,
modifier = modifier.padding(top = 4.dp)
)
}
}
@Composable
fun AnimalListRow(modifier: Modifier = Modifier) {
Row(
modifier = modifier.horizontalScroll(rememberScrollState())
) {
AnimalListElement(drawable = R.drawable.dog, text = "Dog")
AnimalListElement(drawable = R.drawable.cat, text = "Cat")
AnimalListElement(drawable = R.drawable.rabbit, text = "Rabbit")
AnimalListElement(drawable = R.drawable.lion, text = "Lion")
AnimalListElement(drawable = R.drawable.panda, text = "Panda")
}
}
@Preview
@Composable
private fun AnimalListRowPreview() {
MyApp()
}