dyn4j の実力を JetpackCompose wrapper Physics Layout で思い知る

やはり Java のライブラリ群を使えることは素晴らしいことです。

以下、サンプルコードを参考に Activity を書き換えます。


👉 KlassenKonstantin/ComposePhysicsLayout: A custom Compose layout backed by a physics engine hatena-bookmark





class MainActivity : ComponentActivity() {

  @SuppressLint("SourceLockedOrientationActivity")
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
    setContent {
      PhysicsLayoutTheme {
        Surface(
          modifier = Modifier.fillMaxSize(),
          color = MaterialTheme.colorScheme.background
        ) {

          val simulation = rememberSimulation()
          val balls = remember { mutableStateListOf<BallMeta>() }

          GravitySensor {
            simulation.setGravity(it.copy(x = -it.x).times(3f))
          }

          LaunchedEffect(Unit) {
            var i = 0
            val count = colors.count()
            while (true) {
              balls.add(BallMeta(color = colors[i % count]))
              delay(100)
              i++
            }
          }

          LaunchedEffect(Unit) {
            delay(5000)
            while (true) {
              balls.removeFirst()
              delay(100)
            }
          }

          Box {
            PhysicsLayout(
              modifier = Modifier.systemBarsPadding(),
              simulation = simulation
            ) {

              Block(   0, -200)
              Block(-125, -100)
              Block( 125, -100)
              Block(   0,    0)
              Block(-100,  100)
              Block( 100,  100)
              Block(   0,  200)

              balls.forEach { meta ->
                Ball(0, -350, meta = meta)
              }

            }
          }

        }
      }
    }
  }
}

@Composable
fun PhysicsLayoutScope.Block(x: Int, y: Int) {
  val offset = offsetDp(x, y)
  Card(
    modifier = Modifier
      .body(
        isStatic = true,
        initialTranslation =  offset
      )
  ) {
    Spacer(
      modifier = Modifier
        .size(62.dp)
        .background(color = Color.Gray)
    )
  }
}

@Composable
fun PhysicsLayoutScope.Ball(x: Int, y: Int, meta: BallMeta) {

  val initialOffset = offsetDp(x, y)

  Card(
    modifier = Modifier.body(
      id = meta.id,
      shape = RoundedCornerShape(meta.corner),
      initialTranslation = Offset(initialOffset.x, initialOffset.y),
      initialImpulse = Offset((Random.nextFloat() - 0.5f) * 2, (Random.nextFloat()) * 2),
    ),
    shape = RoundedCornerShape(meta.corner),
    colors = CardDefaults.cardColors(containerColor = meta.color)
  ) {
    Icon(
      modifier = Modifier
        .size(32.dp)
        .padding(4.dp),
      imageVector = Icons.Rounded.Rocket,
      contentDescription = null,
      tint = Color.White
    )
  }
}

@Composable
fun offsetDp(x: Int, y: Int) = with(LocalDensity.current) { Offset(x.dp.toPx(), y.dp.toPx()) }


@Immutable
data class BallMeta(
  val id: String = System.currentTimeMillis().toString(),
  val color: Color,
  val corner: Int = listOf(0, 50).shuffled()[0]
)

private val colors = listOf(
  Color(0xFFEF5350), Color(0xFFEC407A), Color(0xFFAB47BC), Color(0xFF7E57C2),
  Color(0xFF29B6FC), Color(0xFF26C6DA), Color(0xFF26A69A), Color(0xFF66BB6A),
  Color(0xFF9CCC65), Color(0xFFD4E157), Color(0xFFFFEE58), Color(0xFFFFCA28),
  Color(0xFFFFA726), Color(0xFFFF7043), Color(0xFF8D6E63), Color(0xFFBDBDBD),
  Color(0xFF78909C)
)

強力です。

👉 dyn4j hatena-bookmark
👉 【Jetpack Compose】dp / px / sp の相互変換 hatena-bookmark



Dark テーマって dimmed がいいよな - GitHub Dark Theme Plugin

OSやアプリやサイトのテーマって電力消費量的なのかなんなのか、

よくわからんけど、黒を基調とした Dark なテーマが流行ですよね。

GitHub テーマでは、同じ黒でも5種類あります。

ぱっと見、はっきりとしたいわゆる「真っ黒な黒」がいいように思いますが、

使っていると、つや消しのような「少し薄めの黒」のほうが目が疲れないような気がします。

👉 Appearance - GitHub Settings hatena-bookmark

Android Studio のテーマプラグインでも「GitHub Dark Theme」なるものがありますが、

やはり、デフォルトの「Darula」のほうがいいような気がします。

いや、でもないか?

どう思います?

👉 GitHub Dark Theme - IntelliJ IDEs Theme | Marketplace hatena-bookmark

【Jetpack Compose】Accompanist から切り替えた Material の PullRefreshIndicator が消えない件

こんな記事を見つけまして。

まだ @ExperimentalMaterialApi になりますが Pull-to-refresh は Accompanist から卒業し、Material Design ライブラリーに追加されました。でも、Accompanist の SwipeRefreshLayout と異なって全体のレイアウトではなくインジケーターだけが追加されました。


var refreshing by remember { mutableStateOf(false) }

val state = rememberPullRefreshState(
    refreshing = refreshing,
    onRefresh = { .. }
)

Box(modifier = Modifier.pullRefresh(state = state)) {
    LazyColumn {
        if (!refreshing) {
            items(..)
        }
    }

    PullRefreshIndicator(
        refreshing = refreshing, 
        state = state, 
        modifier = Modifier.align(Alignment.TopCenter)
    )
}

👉 Jetpack Compose v1.3.0に気になったAPIのまとめ - Goodpatch Tech Blog hatena-bookmark

便利そうなので使ってみました。

 

■ Indicator が消えない!

公式のサンプルを見ながら、


import androidx.compose.material.pullrefresh.PullRefreshIndicator
import androidx.compose.material.pullrefresh.pullRefresh
import androidx.compose.material.pullrefresh.rememberPullRefreshState

val refreshScope = rememberCoroutineScope()
var refreshing by remember { mutableStateOf(false) }
var itemCount by remember { mutableStateOf(15) }

fun refresh() = refreshScope.launch {
    refreshing = true
    delay(1500)
    itemCount += 5
    refreshing = false
}

val state = rememberPullRefreshState(refreshing, ::refresh)

Box(Modifier.pullRefresh(state)) {
    LazyColumn(Modifier.fillMaxSize()) {
        if (!refreshing) {
            items(itemCount) {
                ListItem { Text(text = "Item ${itemCount - it}") }
            }
        }
    }

    PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
}

👉 androidx.compose.material.pullrefresh  |  Android Developers hatena-bookmark

実装してみましたが、引っ張る前から、表示されたまま消えない!! (少し読み込みが長いです。)

PullRefreshIndicator-scale=false

読み込み終了後、Box の範囲からは外れていくんだけども、消えない。

何なんすか。

バグ?

👉 PullRefresh: indicator left visible on screen [248274004] - Visible to Public - Issue Tracker hatena-bookmark

 

■ 対応策

PullRefreshIndicator の scale = true にします。

The default indicator for Compose pull-to-refresh, based on Android's SwipeRefreshLayout.

👉 androidx.compose.material.pullrefresh  |  Android Developers hatena-bookmark

以下のように追加します。


PullRefreshIndicator(
  refreshing = refreshing,
  state = state,
  modifier = Modifier.align(Alignment.TopCenter),
  scale = true // *
)

結果。

PullRefreshIndicator-scale=true

消えました。とりあえず。

上下に移動しながら 拡大 → 縮小 して、消えてるように見えます。

この Indicator て、確か以前は、scale してましたよね?

👉 Jetpack Compose Accompanist — An FAQ. | by Ben Trengrove | Android Developers | Medium hatena-bookmark