Skip to content

Commit 3c8ff4d

Browse files
KevinnZouKevinnZou
committed
feat:Basic Progress Indicator Finished
1 parent 734a85b commit 3c8ff4d

File tree

5 files changed

+289
-29
lines changed

5 files changed

+289
-29
lines changed

‎progressIndicator/src/commonMain/kotlin/App.kt‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,13 @@
1-
import androidx.compose.animation.AnimatedVisibility
2-
import androidx.compose.foundation.Image
3-
import androidx.compose.foundation.layout.Column
4-
import androidx.compose.foundation.layout.fillMaxWidth
5-
import androidx.compose.material.Button
61
import androidx.compose.material.MaterialTheme
7-
import androidx.compose.material.Text
82
import androidx.compose.runtime.Composable
9-
import androidx.compose.runtime.getValue
10-
import androidx.compose.runtime.mutableStateOf
11-
import androidx.compose.runtime.remember
12-
import androidx.compose.runtime.setValue
13-
import androidx.compose.ui.Alignment
14-
import androidx.compose.ui.Modifier
153
import org.jetbrains.compose.resources.ExperimentalResourceApi
16-
import org.jetbrains.compose.resources.painterResource
4+
import sample.BasicProgressIndicatorSample
175

186
@OptIn(ExperimentalResourceApi::class)
197
@Composable
208
fun App() {
219
MaterialTheme {
22-
var greetingText by remember { mutableStateOf("Hello, World!") }
23-
var showImage by remember { mutableStateOf(false) }
24-
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
25-
Button(onClick = {
26-
greetingText = "Hello, ${getPlatformName()}"
27-
showImage = !showImage
28-
}) {
29-
Text(greetingText)
30-
}
31-
AnimatedVisibility(showImage) {
32-
Image(
33-
painterResource("compose-multiplatform.xml"),
34-
null
35-
)
36-
}
37-
}
10+
BasicProgressIndicatorSample()
3811
}
3912
}
4013

‎progressIndicator/src/commonMain/kotlin/progressindicator/DrawScopeExt.kt‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
package progressindicator
2+
3+
import androidx.compose.ui.geometry.CornerRadius
4+
import androidx.compose.ui.geometry.Offset
5+
import androidx.compose.ui.graphics.Color
6+
import androidx.compose.ui.graphics.drawscope.DrawScope
7+
import androidx.compose.ui.unit.Dp
8+
9+
/**
10+
* Created By Kevin Zou On 2023/9/13
11+
*/
12+
internal fun DrawScope.drawLinearIndicatorBackground(
13+
color: Color,
14+
cornerRadius: Dp
15+
) {
16+
drawLinearIndicator(1f, color, cornerRadius)
17+
}
18+
19+
internal fun DrawScope.drawLinearIndicator(
20+
widthFraction: Float,
21+
color: Color,
22+
cornerRadius: Dp,
23+
) {
24+
drawRoundRect(
25+
color = color,
26+
size = drawContext.size.copy(width = size.width * widthFraction),
27+
cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx())
28+
)
29+
}
30+
31+
internal fun DrawScope.drawThumb(radius: Dp, color: Color, center: Offset) {
32+
drawCircle(
33+
color,
34+
radius = radius.toPx(),
35+
center = center
36+
)
37+
}

‎progressIndicator/src/commonMain/kotlin/progressindicator/SimpleProgressIndicator.kt‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
package progressindicator
2+
3+
import androidx.compose.animation.core.AnimationSpec
4+
import androidx.compose.animation.core.animateFloatAsState
5+
import androidx.compose.foundation.Canvas
6+
import androidx.compose.foundation.progressSemantics
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.runtime.getValue
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.geometry.Offset
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.unit.Dp
13+
import androidx.compose.ui.unit.dp
14+
15+
/**
16+
* Created By Kevin Zou On 2023/9/13
17+
*/
18+
19+
/**
20+
* Determinate <a href="https://material.io/components/progress-indicators#linear-progress-indicators" class="external" target="_blank">Material Design linear progress indicator</a>.
21+
*
22+
* Progress indicators express an unspecified wait time or display the length of a process.
23+
*
24+
* @param progress The progress of this progress indicator, where 0.0 represents no progress and 1.0
25+
* represents full progress. Values outside of this range are coerced into the range.
26+
* @param progressBarColor The color of the progress indicator.
27+
* @param cornerRadius The corner radius of the progress indicator.
28+
* @param trackColor The color of the background behind the indicator, visible when the
29+
* progress has not reached that area of the overall indicator yet.
30+
* @param thumbRadius The radius of the thumb of the progress indicator.
31+
* @param thumbColor The color of the thumb of the progress indicator.
32+
* @param thumbOffset The offset of the thumb of the progress indicator. It determines the center of the
33+
* thumb. If the offset is zero, the center of the thumb will be at the end of the progress. By default, it is
34+
* set to [thumbRadius] so that it will coerce into the progressbar.
35+
* @param animationSpec The animation specifics for progress change.
36+
*/
37+
@Composable
38+
fun SimpleProgressIndicatorWithAnim(
39+
modifier: Modifier = Modifier,
40+
progress: Float = 0.7f,
41+
progressBarColor: Color = Color.Red,
42+
cornerRadius: Dp = 0.dp,
43+
trackColor: Color = Color(0XFFFBE8E8),
44+
thumbRadius: Dp = 0.dp,
45+
thumbColor: Color = Color.White,
46+
thumbOffset: Dp = thumbRadius,
47+
animationSpec: AnimationSpec<Float> = SimpleProgressIndicatorDefaults.SimpleProgressAnimationSpec,
48+
) {
49+
val mProgress: Float by animateFloatAsState(
50+
targetValue = progress,
51+
animationSpec = animationSpec
52+
)
53+
SimpleProgressIndicator(
54+
modifier,
55+
mProgress,
56+
progressBarColor,
57+
cornerRadius,
58+
trackColor,
59+
thumbRadius,
60+
thumbColor,
61+
thumbOffset
62+
)
63+
}
64+
65+
66+
/**
67+
* Determinate <a href="https://material.io/components/progress-indicators#linear-progress-indicators" class="external" target="_blank">Material Design linear progress indicator</a>.
68+
*
69+
* Progress indicators express an unspecified wait time or display the length of a process.
70+
*
71+
* By default there is no animation between [progress] values. You can use
72+
* [SimpleProgressIndicatorWithAnim] to animate progress.
73+
*
74+
* @param progress The progress of this progress indicator, where 0.0 represents no progress and 1.0
75+
* represents full progress. Values outside of this range are coerced into the range.
76+
* @param progressBarColor The color of the progress indicator.
77+
* @param cornerRadius The corner radius of the progress indicator.
78+
* @param trackColor The color of the background behind the indicator, visible when the
79+
* progress has not reached that area of the overall indicator yet.
80+
* @param thumbRadius The radius of the thumb of the progress indicator.
81+
* @param thumbColor The color of the thumb of the progress indicator.
82+
* @param thumbOffset The offset of the thumb of the progress indicator. It determines the center of the
83+
* thumb. If the offset is zero, the center of the thumb will be at the end of the progress. By default, it is
84+
* set to [thumbRadius] so that it will coerce into the progressbar.
85+
*/
86+
@Composable
87+
fun SimpleProgressIndicator(
88+
modifier: Modifier = Modifier,
89+
progress: Float = 0.7f,
90+
progressBarColor: Color = Color.Red,
91+
cornerRadius: Dp = 0.dp,
92+
trackColor: Color = Color(0XFFFBE8E8),
93+
thumbRadius: Dp = 0.dp,
94+
thumbColor: Color = Color.White,
95+
thumbOffset: Dp = thumbRadius
96+
) {
97+
Canvas(modifier.progressSemantics(progress)) {
98+
val progressWidth = size.width * progress
99+
drawLinearIndicatorBackground(trackColor, cornerRadius)
100+
drawLinearIndicator(progress, progressBarColor, cornerRadius)
101+
val thumbCenter = progressWidth - thumbOffset.toPx()
102+
if (thumbCenter > 0) {
103+
drawThumb(
104+
thumbRadius,
105+
thumbColor,
106+
Offset(progressWidth - thumbOffset.toPx(), size.height / 2f)
107+
)
108+
}
109+
110+
}
111+
}

‎progressIndicator/src/commonMain/kotlin/progressindicator/SimpleProgressIndicatorDefaults.kt‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
package progressindicator
2+
3+
import androidx.compose.animation.core.AnimationSpec
4+
import androidx.compose.animation.core.Spring
5+
import androidx.compose.animation.core.spring
6+
7+
/**
8+
* Created By Kevin Zou On 2023/9/13
9+
*/
10+
/**
11+
* Contains the default values used for [SimpleProgressIndicator].
12+
*/
13+
object SimpleProgressIndicatorDefaults {
14+
/**
15+
* The default [AnimationSpec] that should be used when animating between progress in a
16+
* determinate progress indicator.
17+
*/
18+
val SimpleProgressAnimationSpec: AnimationSpec<Float> = spring(
19+
dampingRatio = Spring.DampingRatioNoBouncy,
20+
stiffness = Spring.StiffnessLow,
21+
visibilityThreshold = null,
22+
)
23+
}

‎progressIndicator/src/commonMain/kotlin/sample/BasicProgressIndicatorSample.kt‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
package sample
2+
3+
import androidx.compose.animation.core.Spring
4+
import androidx.compose.animation.core.spring
5+
import androidx.compose.foundation.background
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Column
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.fillMaxWidth
11+
import androidx.compose.foundation.layout.height
12+
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.layout.wrapContentSize
14+
import androidx.compose.foundation.layout.wrapContentWidth
15+
import androidx.compose.foundation.shape.RoundedCornerShape
16+
import androidx.compose.material.Button
17+
import androidx.compose.material.ButtonDefaults
18+
import androidx.compose.material.LinearProgressIndicator
19+
import androidx.compose.material.Surface
20+
import androidx.compose.material.Text
21+
import androidx.compose.material.TextButton
22+
import androidx.compose.runtime.Composable
23+
import androidx.compose.runtime.getValue
24+
import androidx.compose.runtime.mutableStateOf
25+
import androidx.compose.runtime.remember
26+
import androidx.compose.runtime.setValue
27+
import androidx.compose.ui.Alignment
28+
import androidx.compose.ui.Modifier
29+
import androidx.compose.ui.graphics.Color
30+
import androidx.compose.ui.unit.dp
31+
import androidx.compose.ui.unit.sp
32+
import progressindicator.SimpleProgressIndicatorWithAnim
33+
34+
/**
35+
* Created By Kevin Zou On 2023/9/13
36+
*/
37+
@Composable
38+
fun BasicProgressIndicatorSample() {
39+
var progress by remember { mutableStateOf(0.5f) }
40+
Surface(
41+
modifier = Modifier.fillMaxSize(),
42+
color = Color.White
43+
) {
44+
Column(
45+
modifier = Modifier.fillMaxSize(),
46+
verticalArrangement = Arrangement.Center,
47+
horizontalAlignment = Alignment.CenterHorizontally,
48+
) {
49+
Column(
50+
modifier = Modifier.wrapContentSize(),
51+
verticalArrangement = Arrangement.spacedBy(20.dp),
52+
horizontalAlignment = Alignment.CenterHorizontally,
53+
) {
54+
Text("Simple ProgressIndicator Examples", fontSize = 16.sp)
55+
LinearProgressIndicator(
56+
progress, modifier = Modifier
57+
.padding(15.dp)
58+
.fillMaxWidth()
59+
.height(12.dp)
60+
)
61+
SimpleProgressIndicatorWithAnim(
62+
modifier = Modifier
63+
.padding(15.dp)
64+
.fillMaxWidth()
65+
.height(12.dp),
66+
progress = progress,
67+
trackColor = Color(0XFFFBE8E8),
68+
progressBarColor = Color.Yellow,
69+
thumbColor = Color.Magenta,
70+
cornerRadius = 15.dp,
71+
thumbRadius = 6.dp,
72+
thumbOffset = 6.dp,
73+
animationSpec = spring(
74+
dampingRatio = Spring.DampingRatioNoBouncy,
75+
stiffness = Spring.StiffnessVeryLow,
76+
visibilityThreshold = 0.4f,
77+
)
78+
)
79+
SimpleProgressIndicatorWithAnim(
80+
modifier = Modifier
81+
.padding(15.dp)
82+
.fillMaxWidth()
83+
.height(12.dp),
84+
progress,
85+
cornerRadius = 15.dp,
86+
thumbRadius = 5.dp,
87+
thumbOffset = 6.dp
88+
)
89+
Row(
90+
modifier = Modifier
91+
.height(50.dp)
92+
.wrapContentWidth(),
93+
horizontalArrangement = Arrangement.spacedBy(50.dp)
94+
) {
95+
Button(
96+
onClick = {
97+
progress = (progress - 0.1f).coerceAtLeast(0f)
98+
},
99+
shape = RoundedCornerShape(10.dp),
100+
) {
101+
Text(text = "Decrease")
102+
}
103+
Button(
104+
onClick = {
105+
progress = (progress + 0.1f).coerceAtMost(1f)
106+
},
107+
shape = RoundedCornerShape(10.dp),
108+
) {
109+
Text(text = "Increase")
110+
}
111+
}
112+
}
113+
}
114+
115+
}
116+
}

0 commit comments

Comments
 (0)