Skip to content

Commit 59257cc

Browse files
vitavivavitaviva
committed
add some sample
1 parent 7bc1a23 commit 59257cc

File tree

10 files changed

+653
-393
lines changed

10 files changed

+653
-393
lines changed

‎app/src/main/java/com/github/compose/waveloading/MainActivity.kt‎

Lines changed: 245 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,45 @@ package com.github.compose.waveloading
33
import android.os.Bundle
44
import androidx.activity.ComponentActivity
55
import androidx.activity.compose.setContent
6+
import androidx.compose.animation.core.CubicBezierEasing
7+
import androidx.compose.animation.core.LinearEasing
8+
import androidx.compose.animation.core.RepeatMode
9+
import androidx.compose.animation.core.animateFloat
10+
import androidx.compose.animation.core.animateIntAsState
11+
import androidx.compose.animation.core.infiniteRepeatable
12+
import androidx.compose.animation.core.rememberInfiniteTransition
13+
import androidx.compose.animation.core.tween
614
import androidx.compose.foundation.Image
715
import androidx.compose.foundation.background
8-
import androidx.compose.foundation.border
916
import androidx.compose.foundation.layout.Box
17+
import androidx.compose.foundation.layout.Column
1018
import androidx.compose.foundation.layout.Row
1119
import androidx.compose.foundation.layout.Spacer
12-
import androidx.compose.foundation.layout.fillMaxSize
1320
import androidx.compose.foundation.layout.height
1421
import androidx.compose.foundation.layout.padding
15-
import androidx.compose.foundation.layout.size
1622
import androidx.compose.foundation.layout.width
17-
import androidx.compose.foundation.shape.RoundedCornerShape
23+
import androidx.compose.material.Checkbox
1824
import androidx.compose.material.MaterialTheme
19-
import androidx.compose.material.Shapes
25+
import androidx.compose.material.RadioButton
26+
import androidx.compose.material.Slider
2027
import androidx.compose.material.Surface
2128
import androidx.compose.material.Text
22-
import androidx.compose.material.icons.Icons
23-
import androidx.compose.material.icons.filled.CheckCircle
24-
import androidx.compose.material.swipeable
2529
import androidx.compose.runtime.Composable
30+
import androidx.compose.runtime.getValue
31+
import androidx.compose.runtime.setValue
32+
import androidx.compose.runtime.mutableStateOf
33+
import androidx.compose.runtime.remember
2634
import androidx.compose.ui.Alignment
2735
import androidx.compose.ui.Modifier
28-
import androidx.compose.ui.draw.clip
29-
import androidx.compose.ui.draw.clipToBounds
36+
import androidx.compose.ui.draw.rotate
37+
import androidx.compose.ui.graphics.Brush
3038
import androidx.compose.ui.graphics.Color
31-
import androidx.compose.ui.graphics.RectangleShape
32-
import androidx.compose.ui.graphics.vector.ImageVector
3339
import androidx.compose.ui.res.painterResource
34-
import androidx.compose.ui.res.vectorResource
40+
import androidx.compose.ui.text.font.FontStyle
3541
import androidx.compose.ui.text.font.FontWeight
42+
import androidx.compose.ui.text.style.TextAlign
3643
import androidx.compose.ui.tooling.preview.Preview
37-
import androidx.compose.ui.unit.TextUnit
3844
import androidx.compose.ui.unit.dp
39-
import androidx.compose.ui.unit.sp
4045
import com.github.compose.waveloading.ui.theme.ComposewaveloadingTheme
4146

4247
class MainActivity : ComponentActivity() {
@@ -46,68 +51,224 @@ class MainActivity : ComponentActivity() {
4651
ComposewaveloadingTheme {
4752
// A surface container using the 'background' color from the theme
4853
Surface(color = MaterialTheme.colors.background) {
49-
Box(Modifier.fillMaxSize()) {
50-
// WaveLoading(
51-
// Modifier
52-
// .width(200.dp)
53-
// .height(200.dp)
54-
// .align(Alignment.Center)
55-
// .clipToBounds()
56-
// )
5754

55+
var _progress by remember { mutableStateOf(0.5f) }
56+
var _velocity by remember { mutableStateOf(1.0f) }
57+
var _amplitude by remember { mutableStateOf(0.2f) }
58+
var _backImage by remember { mutableStateOf(true) }
5859

59-
WaveLoading2(
60+
Column(Modifier.padding(start = 10.dp, end = 10.dp)) {
61+
62+
Spacer(modifier = Modifier.height(20.dp))
63+
64+
WaveLoading(
65+
modifier = Modifier.weight(1f),
66+
backDrawType = if (_backImage) DrawType.DrawImage else DrawType.None,
67+
progress = _progress,
68+
velocity = _velocity,
69+
amplitude = _amplitude,
70+
71+
) {
72+
73+
Row {
74+
Image(
75+
modifier = Modifier
76+
.weight(1f)
77+
.align(Alignment.CenterVertically),
78+
painter = painterResource(id = R.drawable.logo_tiktok),
79+
contentDescription = ""
80+
)
81+
82+
Image(
83+
modifier = Modifier
84+
.weight(1f)
85+
.align(Alignment.CenterVertically),
86+
painter = painterResource(id = R.drawable.logo_nba),
87+
contentDescription = ""
88+
)
89+
90+
Image(
91+
modifier = Modifier
92+
.weight(1f)
93+
.align(Alignment.CenterVertically),
94+
painter = painterResource(id = R.drawable.logo_chrome),
95+
contentDescription = ""
96+
)
97+
98+
99+
}
100+
101+
102+
}
103+
104+
Spacer(modifier = Modifier.height(10.dp))
105+
106+
WaveLoading(
60107
Modifier
61108
// .size(200.dp)
62-
.align(Alignment.Center)
109+
.weight(1f),
110+
backDrawType = if (_backImage) rememberDrawColor() else DrawType.None,
111+
progress = _progress,
112+
velocity = _velocity,
113+
amplitude = _amplitude
63114
) {
64115

65116

117+
118+
//
66119
// Image(
67120
// modifier = Modifier
68121
//// .size(100.dp)
69122
// .padding(10.dp)
70123
// .clip(RoundedCornerShape(100)),
71124
// painter = painterResource(id = R.drawable.fundroid),
72-
// contentDescription = ""
125+
// contentDescription = "",
73126
// )
74127
//
75-
Row(Modifier.align(Alignment.Center)) {
128+
Row {
76129

77130
Image(
78131
modifier = Modifier
79132
.weight(1f)
80-
.padding(10.dp)
81-
.clip(RoundedCornerShape(100)),
133+
.align(Alignment.CenterVertically),
82134
painter = painterResource(id = R.drawable.logo_windows),
83135
contentDescription = ""
84136
)
85137

86138

87-
Text(
139+
Image(
88140
modifier = Modifier
89141
.weight(1f)
90142
.align(Alignment.CenterVertically),
91-
text = "中秋",
92-
style = MaterialTheme.typography.h3,
93-
fontWeight = FontWeight.Bold,
94-
color = Color.Red
143+
painter = painterResource(id = R.drawable.logo_huawei),
144+
contentDescription = ""
145+
)
146+
147+
Image(
148+
modifier = Modifier
149+
.weight(1f)
150+
.align(Alignment.CenterVertically),
151+
painter = painterResource(id = R.drawable.logo_flutter),
152+
contentDescription = ""
153+
)
154+
}
155+
156+
}
157+
158+
Spacer(modifier = Modifier.height(10.dp))
159+
160+
WaveLoading(
161+
Modifier.weight(1f),
162+
drawType = DrawType.DrawColor(Color.Cyan),
163+
backDrawType = if (_backImage) rememberDrawColor() else DrawType.None,
164+
progress = _progress,
165+
velocity = _velocity,
166+
amplitude = _amplitude,
167+
) {
168+
169+
Row {
170+
171+
Image(
172+
modifier = Modifier
173+
.weight(1f)
174+
.align(Alignment.CenterVertically),
175+
painter = painterResource(id = R.drawable.logo_windows),
176+
contentDescription = ""
177+
)
178+
179+
180+
Image(
181+
modifier = Modifier
182+
.weight(1f)
183+
.align(Alignment.CenterVertically),
184+
painter = painterResource(id = R.drawable.logo_react),
185+
contentDescription = ""
95186
)
96187

97188
Image(
98189
modifier = Modifier
99190
.weight(1f)
100-
.padding(10.dp)
101-
.clip(RoundedCornerShape(100)),
191+
.align(Alignment.CenterVertically),
102192
painter = painterResource(id = R.drawable.logo_flutter),
103193
contentDescription = ""
104194
)
105195
}
106196

107197
}
108198

199+
Spacer(modifier = Modifier.height(10.dp))
200+
201+
202+
WaveLoading(
203+
Modifier.weight(1f),
204+
backDrawType = if (_backImage) rememberDrawColor() else DrawType.None,
205+
progress = _progress,
206+
velocity = _velocity,
207+
amplitude = _amplitude
208+
) {
209+
210+
val animate by rememberInfiniteTransition().animateFloat(
211+
initialValue = 0f, targetValue = 360f, animationSpec = infiniteRepeatable(
212+
animation = tween(2000, easing = LinearEasing),
213+
repeatMode = RepeatMode.Restart
214+
)
215+
)
109216

217+
Row {
218+
Text(
219+
modifier = Modifier.rotate(animate),
220+
text = "Hello ",
221+
style = MaterialTheme.typography.h3,
222+
fontWeight = FontWeight.Bold,
223+
textAlign = TextAlign.Center,
224+
color = Color.Green
225+
)
226+
227+
Text(
228+
text = "Compose",
229+
style = MaterialTheme.typography.h3,
230+
fontWeight = FontWeight.Bold,
231+
textAlign = TextAlign.Center,
232+
color = Color.Magenta
233+
)
234+
}
235+
236+
237+
}
238+
239+
Spacer(modifier = Modifier.height(10.dp))
240+
241+
LabelCheckBox(
242+
label = "Back Image",
243+
checked = _backImage,
244+
onChecked = { _backImage = it }
245+
)
246+
247+
LabelSlider(
248+
label = "Progress",
249+
value = _progress,
250+
onValueChange = { _progress = it },
251+
range = 0f..1f
252+
)
253+
254+
LabelSlider(
255+
label = "Velocity",
256+
value = _velocity,
257+
onValueChange = { _velocity = it },
258+
range = 0f..1f
259+
)
260+
261+
LabelSlider(
262+
label = "Amplitude",
263+
value = _amplitude,
264+
onValueChange = { _amplitude = it },
265+
range = 0f..1f
266+
)
267+
268+
Spacer(modifier = Modifier.height(20.dp))
110269
}
270+
271+
111272
}
112273
}
113274
}
@@ -120,28 +281,58 @@ fun DefaultPreview() {
120281
ComposewaveloadingTheme {
121282

122283
Box {
123-
// WaveLoading(
124-
// Modifier
125-
// .align(Alignment.Center)
126-
// .size(100.dp)
127-
// .border(1.dp, Color.Black)
128-
// )
129284

130-
//
131-
// Image(
132-
// modifier = Modifier.wave(),
133-
// imageVector = Icons.Default.CheckCircle,
134-
// contentDescription = ""
135-
// )
136-
137-
WaveLoading2 {
138-
Image(
139-
imageVector = Icons.Default.CheckCircle,
140-
contentDescription = ""
285+
WaveLoading(progress = 0.5f) {
286+
287+
Text(
288+
modifier = Modifier
289+
.align(Alignment.Center),
290+
text = "Hello World",
291+
style = MaterialTheme.typography.h3,
292+
fontWeight = FontWeight.Bold,
293+
color = Color.Red
141294
)
142295
}
143296

144297
}
145298

146299
}
147-
}
300+
}
301+
302+
303+
@Composable
304+
private fun LabelCheckBox(
305+
label: String,
306+
checked: Boolean = false,
307+
onChecked: (Boolean) -> Unit
308+
) {
309+
Row(Modifier.padding(start = 10.dp, end = 10.dp)) {
310+
Text(label, modifier = Modifier.width(100.dp))
311+
Checkbox(
312+
checked = checked,
313+
onCheckedChange = onChecked
314+
)
315+
}
316+
}
317+
318+
@Composable
319+
private fun LabelSlider(
320+
label: String,
321+
value: Float,
322+
onValueChange: (Float) -> Unit,
323+
range: ClosedFloatingPointRange<Float>
324+
) {
325+
Row(Modifier.padding(start = 10.dp, end = 10.dp)) {
326+
Text(
327+
label, modifier = Modifier
328+
.width(100.dp)
329+
.align(Alignment.CenterVertically)
330+
)
331+
Slider(
332+
modifier = Modifier.align(Alignment.CenterVertically),
333+
value = value,
334+
onValueChange = onValueChange,
335+
valueRange = range
336+
)
337+
}
338+
}

‎app/src/main/res/drawable/logo_chrome.png‎

41.6 KB
Loading

‎app/src/main/res/drawable/logo_huawei.png‎

13.1 KB
Loading

‎app/src/main/res/drawable/logo_nba.png‎

40.1 KB
Loading

‎app/src/main/res/drawable/logo_react.png‎

16.3 KB
Loading

0 commit comments

Comments
 (0)