Skip to content

Commit 01eb7f4

Browse files
SmartToolFactorySmartToolFactory
committed
Merge branch 'feature/before-after-image' into develop
2 parents 21820d3 + a400da1 commit 01eb7f4

19 files changed

+854
-38
lines changed

‎app/src/main/java/com/smarttoolfactory/composeimage/MainActivity.kt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ private fun HomeContent() {
9191
1 -> ThumbnailDemo()
9292
2 -> EditScaleDemo()
9393
3 -> EditSizeDemo()
94-
else -> ZoomDemo()
94+
4 -> ZoomDemo()
95+
else -> BeforeAfterImageDemo()
9596
}
9697
}
9798
}
@@ -104,4 +105,5 @@ internal val tabList =
104105
"Editable Scale",
105106
"Editable Size",
106107
"Zoom",
108+
"Before/After",
107109
)

‎app/src/main/java/com/smarttoolfactory/composeimage/demo/BeforeAfterImageDemo.kt‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
package com.smarttoolfactory.composeimage.demo
2+
3+
import androidx.compose.animation.core.*
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.border
6+
import androidx.compose.foundation.layout.*
7+
import androidx.compose.foundation.rememberScrollState
8+
import androidx.compose.foundation.shape.RoundedCornerShape
9+
import androidx.compose.foundation.verticalScroll
10+
import androidx.compose.material3.MaterialTheme
11+
import androidx.compose.material3.Text
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.runtime.getValue
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.draw.clip
17+
import androidx.compose.ui.draw.shadow
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.graphics.ImageBitmap
20+
import androidx.compose.ui.layout.ContentScale
21+
import androidx.compose.ui.platform.LocalContext
22+
import androidx.compose.ui.res.imageResource
23+
import androidx.compose.ui.text.font.FontWeight
24+
import androidx.compose.ui.unit.dp
25+
import androidx.compose.ui.unit.sp
26+
import com.smarttoolfactory.composeimage.R
27+
import com.smarttoolfactory.image.beforeafter.BeforeAfterImage
28+
import com.smarttoolfactory.image.beforeafter.Order
29+
import kotlin.math.roundToInt
30+
31+
@Composable
32+
fun BeforeAfterImageDemo() {
33+
Column(
34+
modifier = Modifier
35+
.fillMaxSize()
36+
.padding(10.dp)
37+
.verticalScroll(rememberScrollState())
38+
) {
39+
val imageBefore = ImageBitmap.imageResource(
40+
LocalContext.current.resources, R.drawable.image_before_after_shoes_a
41+
)
42+
43+
val imageAfter = ImageBitmap.imageResource(
44+
LocalContext.current.resources, R.drawable.image_before_after_shoes_b
45+
)
46+
47+
val imageBefore2 = ImageBitmap.imageResource(
48+
LocalContext.current.resources, R.drawable.image_before_after_elements_a
49+
)
50+
51+
val imageAfter2 = ImageBitmap.imageResource(
52+
LocalContext.current.resources, R.drawable.image_before_after_elements_b
53+
)
54+
55+
Text(
56+
text = "BeforeAfterImage",
57+
fontSize = 20.sp,
58+
fontWeight = FontWeight.Bold,
59+
color = MaterialTheme.colorScheme.primary,
60+
modifier = Modifier.padding(8.dp)
61+
)
62+
63+
Box {
64+
BeforeAfterImage(
65+
modifier = Modifier
66+
.shadow(1.dp, RoundedCornerShape(10.dp))
67+
.fillMaxWidth()
68+
.aspectRatio(4 / 3f),
69+
beforeImage = imageBefore,
70+
afterImage = imageAfter,
71+
contentScale = ContentScale.FillBounds
72+
)
73+
Label(
74+
text = "BEFORE",
75+
modifier = Modifier
76+
.padding(8.dp)
77+
.align(Alignment.TopStart)
78+
)
79+
Label(
80+
text = "AFTER", modifier = Modifier
81+
.padding(8.dp)
82+
.align(Alignment.TopEnd)
83+
)
84+
}
85+
86+
Spacer(modifier = Modifier.height(40.dp))
87+
88+
Box {
89+
BeforeAfterImage(
90+
modifier = Modifier
91+
.shadow(1.dp, RoundedCornerShape(10.dp))
92+
.fillMaxWidth()
93+
.aspectRatio(4 / 3f),
94+
beforeImage = imageBefore,
95+
afterImage = imageAfter,
96+
order = Order.AfterBefore,
97+
contentScale = ContentScale.FillBounds
98+
)
99+
Label(
100+
text = "AFTER",
101+
modifier = Modifier
102+
.padding(8.dp)
103+
.align(Alignment.TopStart)
104+
)
105+
Label(
106+
text = "BEFORE", modifier = Modifier
107+
.padding(8.dp)
108+
.align(Alignment.TopEnd)
109+
)
110+
}
111+
112+
Spacer(modifier = Modifier.height(40.dp))
113+
114+
val transition: InfiniteTransition = rememberInfiniteTransition()
115+
116+
// Infinite progress animation
117+
val progress by transition.animateFloat(
118+
initialValue = 0f,
119+
targetValue = 100f,
120+
animationSpec = infiniteRepeatable(
121+
animation = tween(
122+
durationMillis = 4000,
123+
easing = FastOutSlowInEasing
124+
),
125+
repeatMode = RepeatMode.Reverse
126+
)
127+
)
128+
129+
BeforeAfterImage(
130+
modifier = Modifier
131+
.clip(RoundedCornerShape(10.dp))
132+
.border(3.dp, Color(0xffE91E63), RoundedCornerShape(10.dp))
133+
.fillMaxWidth()
134+
.aspectRatio(4 / 3f),
135+
beforeImage = imageBefore2,
136+
afterImage = imageAfter2,
137+
progress = progress,
138+
onProgressChange = {},
139+
contentScale = ContentScale.FillBounds
140+
) {
141+
Text(
142+
"${(progress).roundToInt()}%",
143+
fontSize = 50.sp,
144+
fontWeight = FontWeight.Bold,
145+
color = Color(0xff03A9F4)
146+
)
147+
}
148+
}
149+
}
150+
151+
@Composable
152+
private fun Label(modifier: Modifier = Modifier, text: String) {
153+
Text(
154+
text = text,
155+
color = Color.White,
156+
fontSize = 14.sp,
157+
fontWeight = FontWeight.Bold,
158+
modifier = modifier
159+
.background(Color.Black.copy(alpha = .4f), RoundedCornerShape(50))
160+
.padding(8.dp)
161+
)
162+
}

‎app/src/main/res/drawable/baseline_swap_horiz_24.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<vector android:height="24dp" android:tint="#000000"
2+
android:viewportHeight="24" android:viewportWidth="24"
3+
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
4+
<path android:fillColor="@android:color/white" android:pathData="M6.99,11L3,15l3.99,4v-3H14v-2H6.99v-3zM21,9l-3.99,-4v3H10v2h7.01v3L21,9z"/>
5+
</vector>

‎app/src/main/res/drawable/baseline_swap_horizontal_circle_24.xml‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎app/src/main/res/drawable/image_before_after_elements_a.jpeg‎

78.9 KB
Loading

‎app/src/main/res/drawable/image_before_after_elements_b.jpeg‎

91.2 KB
Loading

‎app/src/main/res/drawable/image_before_after_shoes_a.jpeg‎

32.3 KB
Loading

‎app/src/main/res/drawable/image_before_after_shoes_b.jpeg‎

46.6 KB
Loading

0 commit comments

Comments
 (0)