2022/08/06

// 詳細画面
val animateState = remember {
  Animatable(0F, 1F)
}

val offset = (y.dp) - ((y.dp) * animateState.value)
val imageSize = 48
val horizontalPadding = 32
val size = imageSize.dp + ((screenWidthDp - imageSize - horizontalPadding) * animateState.value).dp

LazyColumn(
  ...

  AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
      .size(1000)
      .data(imageUrl ?: R.drawable.no_image)
      .build(),
    contentDescription = "artwork image",
    modifier = Modifier
      .padding(horizontal = 16.dp, vertical = 8.dp)
      // AnimateState の変化を検知して size と offset の値を変化させる
      .absoluteOffset(
        0.dp,
        offset
      )
      .size(size)
    )
  )
)

// 0F -> 1F に値を変化させる
LaunchedEffect(Unit) {
  coroutineScope.launch {
    animateState.animateTo(
      1F,
      animationSpec = tween(durationMillis = 1000)
    )
  }
}

- Container Screen
  - List Screen with State Holder (一覧画面)
  - Detail Screen with State Holder (詳細画面)

// キャッシュ設定 (ディスクキャッシュのみ有効)
val imageLoaderBuilder = ImageLoader.Builder(applicationContext)
  .memoryCachePolicy(CachePolicy.DISABLED)
  .diskCachePolicy(CachePolicy.ENABLED)
  .networkCachePolicy(CachePolicy.ENABLED)
  .diskCache {
    DiskCache.Builder()
    .directory(dir)
    .maxSizeBytes(256L * 1024L * 1024L) // 256MB
    .build()
  }.crossfade(true)

if (BuildConfig.DEBUG) {
  imageLoaderBuilder.logger(DebugLogger())
}
Coil.setImageLoader(imageLoaderBuilder.build())

// 画像表示
AsyncImage(
  model = imageUrl,
  contentDescription = "$trackName artwork image",
  modifier = Modifier.size(48.dp)
)

// size 指定で ImageRequest を作成
AsyncImage(
  model = ImageRequest.Builder(LocalContext.current)
    .size(1000)
    .data(imageUrl)
    .build(),
  contentDescription = "$trackName artwork image",
  modifier = Modifier.size(48.dp)
)

composable(
  "list",
  enterTransition = {
    fadeIn(tween(1000))
  },
  exitTransition = {
    fadeOut(tween(1000))
  }
) {
  ListScreen(
    state = rememberListScreenState(navController = navController)
  )
}

composable(
  "detail?imageUrl={imageUrl}&xPoint={x}&yPoint={y}",
  arguments = listOf(
    navArgument("imageUrl") {
      type = NavType.StringType
    },
    navArgument("x") {
      type = NavType.IntType
    },
    navArgument("y") {
      type = NavType.IntType
    }
  ),
  content = {
    val arguments = it.arguments ?: return@composable
    val x = arguments.getInt("x", 0)
    val y = arguments.getInt("y", 0)
    val imageUrl = arguments.getString("imageUrl")!!

    DetailScreen(
      x = x,
      y = y,
      imageUrl = imageUrl,
      screenState = rememberDetailScreenState(
        navController = navController,
      )
    )
  }
)