2021年7月26日月曜日

Jetpack Compose : 点線を描画する

点線を描画するには PathEffect.dashPathEffect() を使う Canvas { drawRoundRect( color = color, cornerRadius = radius, style = Stroke( width = strokeWidth, pathEffect = PathEffect.dashPathEffect( intervals = floatArrayOf(onInterval, offInterval), phase = onInterval + offInterval, ) ) ) }

2021年7月1日木曜日

Jetpack Compose : Modifier.weight() の fill パラメータ

Modifier.weight() には float 値の他に fill するかどうかの boolean パラメータを指定できます。 @Stable fun Modifier.weight( weight: Float, fill: Boolean = true ): Modifier fill に true を指定すると、割り当てられた領域を占めるように配置されます。
fill に false を指定すると、割り当てられた領域より小さくなることができます。使わなかった領域は他のところに割り当てられません。 @Preview @Composable fun Sample() { Column(modifier = Modifier.height(300.dp)) { Column( modifier = Modifier.weight(1f, true) ) { Text("タイトル") Text("メッセージ") } Button( modifier = Modifier.weight(1f), onClick = { /*TODO*/ }, ) { Text("Button") } } } @Preview @Composable fun Sample2() { Column(modifier = Modifier.height(300.dp)) { Column( modifier = Modifier.weight(1f, false) ) { Text("タイトル") Text("メッセージ") } Button( modifier = Modifier.weight(1f), onClick = { /*TODO*/ }, ) { Text("Button") } } } @Preview @Composable fun Sample3() { Column(modifier = Modifier.height(300.dp)) { Column( modifier = Modifier ) { Text("タイトル") Text("メッセージ") } Button( modifier = Modifier.weight(1f), onClick = { /*TODO*/ }, ) { Text("Button") } } } Sample2 では fill に false を指定しています。これにより "タイトル" と "メッセージ" を含む Column は 150dp より小さくなります。Sample3 と違い、Button の大きさを計算するときに考慮されるため Button の大きさは 150dp になります。