[Jetpack Compose] MVVMアーキテクチャで画像を表示する

Contents 非表示

実装

実装

周辺整備 (Manifest, gradleなど)

Manifestは以下を追加、Coilを使用するため。

<uses-permission android:name="android.permission.INTERNET" />

gradle (モジュール)には以下を追加

implementation("io.coil-kt:coil-compose:1.4.0")

Model

data class ImageItem(
	val url: String // 画像URL
)

View

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		enableEdgeToEdge()
		setContent {
			MyImageGridTheme {
				Surface {
					val viewModel = ImageViewModel()
					val images by viewModel.images.collectAsState() // ViewModelから画像のリストをComposeのStateとして取得
					ImageGrid(images = images)
				}
			}
		}
	}
}

@Composable
private fun ImageGrid(images: List<ImageItem>) {
	LazyVerticalGrid(
		columns = GridCells.Adaptive(100.dp), // 画面に合わせて列数を調整し、各列の幅を最低100dpにする。
		contentPadding = PaddingValues(8.dp)
	) {
		items(images) { imageItem ->
			Image(
				painter = rememberImagePainter(imageItem.url), // Coilを使ってURLから画像を読み込み
				contentDescription = null,
				modifier = Modifier.size(160.dp),
				contentScale = ContentScale.Crop
			)
		}
	}
}

ViewModel

class ImageViewModel: ViewModel() {
	private val _images = MutableStateFlow<List<ImageItem>>(emptyList())　// 内部で管理する画像のリスト
	val images: StateFlow<List<ImageItem>> get() = _images

	init {
		loadImages()
	}

	private fun loadImages() {
		// コルーチンスコープ内で非同期処理を実行
		viewModelScope.launch {
			val imageUrls = listOf(
				// 好きな画像URL
			)
			// URLリストをImageItemオブジェクトのリストに変換して_imagesに設定
			_images.value = imageUrls.map { ImageItem(it) }
		}
	}
}