Jetpack Compose : 点線を描画する

点線を描画するには PathEffect.dashPathEffect() を使う

view plainprint?

1. Canvas {  
2.     drawRoundRect(  
3.         color = color,  
4.         cornerRadius = radius,  
5.         style = Stroke(  
6.             width = strokeWidth,  
7.             pathEffect = PathEffect.dashPathEffect(  
8.                 intervals = floatArrayOf(onInterval, offInterval),  
9.                 phase = onInterval + offInterval,  
10.             )  
11.         )  
12.     )  
13. }  

Canvas { drawRoundRect( color = color, cornerRadius = radius, style = Stroke( width = strokeWidth, pathEffect = PathEffect.dashPathEffect( intervals = floatArrayOf(onInterval, offInterval), phase = onInterval + offInterval, ) ) ) }

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

Modifier.weight() には float 値の他に fill するかどうかの boolean パラメータを指定できます。

view plainprint?

1. @Stable  
2. fun Modifier.weight(  
3.     weight: Float,  
4.     fill: Boolean = true  
5. ): Modifier    

@Stable fun Modifier.weight( weight: Float, fill: Boolean = true ): Modifier fill に true を指定すると、割り当てられた領域を占めるように配置されます。
fill に false を指定すると、割り当てられた領域より小さくなることができます。使わなかった領域は他のところに割り当てられません。

view plainprint?

1. @Preview  
2. @Composable  
3. fun Sample() {  
4.     Column(modifier = Modifier.height(300.dp)) {  
5.         Column(  
6.             modifier = Modifier.weight(1f, true)  
7.         ) {  
8.             Text("タイトル")  
9.             Text("メッセージ")  
10.         }  
11.         Button(  
12.             modifier = Modifier.weight(1f),  
13.             onClick = { /*TODO*/ },  
14.         ) {  
15.             Text("Button")  
16.         }  
17.     }  
18. }  
19.   
20. @Preview  
21. @Composable  
22. fun Sample2() {  
23.     Column(modifier = Modifier.height(300.dp)) {  
24.         Column(  
25.             modifier = Modifier.weight(1f, false)  
26.         ) {  
27.             Text("タイトル")  
28.             Text("メッセージ")  
29.         }  
30.         Button(  
31.             modifier = Modifier.weight(1f),  
32.             onClick = { /*TODO*/ },  
33.         ) {  
34.             Text("Button")  
35.         }  
36.     }  
37. }  
38.   
39. @Preview  
40. @Composable  
41. fun Sample3() {  
42.     Column(modifier = Modifier.height(300.dp)) {  
43.         Column(  
44.             modifier = Modifier  
45.         ) {  
46.             Text("タイトル")  
47.             Text("メッセージ")  
48.         }  
49.         Button(  
50.             modifier = Modifier.weight(1f),  
51.             onClick = { /*TODO*/ },  
52.         ) {  
53.             Text("Button")  
54.         }  
55.     }  
56. }  

@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 になります。