Skip to content

Commit a400da1

Browse files
SmartToolFactorySmartToolFactory
committed
update BeforeAfterImageDemo
1 parent ea02edb commit a400da1

File tree

2 files changed

+117
-86
lines changed

2 files changed

+117
-86
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: 114 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,162 @@
11
package com.smarttoolfactory.composeimage.demo
22

3-
import androidx.compose.foundation.Canvas
4-
import androidx.compose.foundation.Image
3+
import androidx.compose.animation.core.*
54
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.border
66
import androidx.compose.foundation.layout.*
7-
import androidx.compose.foundation.shape.CircleShape
7+
import androidx.compose.foundation.rememberScrollState
88
import androidx.compose.foundation.shape.RoundedCornerShape
9+
import androidx.compose.foundation.verticalScroll
10+
import androidx.compose.material3.MaterialTheme
911
import androidx.compose.material3.Text
1012
import androidx.compose.runtime.Composable
13+
import androidx.compose.runtime.getValue
14+
import androidx.compose.ui.Alignment
1115
import androidx.compose.ui.Modifier
1216
import androidx.compose.ui.draw.clip
1317
import androidx.compose.ui.draw.shadow
14-
import androidx.compose.ui.geometry.Offset
1518
import androidx.compose.ui.graphics.Color
1619
import androidx.compose.ui.graphics.ImageBitmap
17-
import androidx.compose.ui.graphics.painter.Painter
1820
import androidx.compose.ui.layout.ContentScale
1921
import androidx.compose.ui.platform.LocalContext
20-
import androidx.compose.ui.platform.LocalDensity
2122
import androidx.compose.ui.res.imageResource
22-
import androidx.compose.ui.res.painterResource
23-
import androidx.compose.ui.unit.IntOffset
23+
import androidx.compose.ui.text.font.FontWeight
2424
import androidx.compose.ui.unit.dp
2525
import androidx.compose.ui.unit.sp
2626
import com.smarttoolfactory.composeimage.R
2727
import com.smarttoolfactory.image.beforeafter.BeforeAfterImage
28-
import com.smarttoolfactory.image.beforeafter.BeforeAfterLayout
28+
import com.smarttoolfactory.image.beforeafter.Order
29+
import kotlin.math.roundToInt
2930

3031
@Composable
3132
fun BeforeAfterImageDemo() {
3233
Column(
3334
modifier = Modifier
3435
.fillMaxSize()
3536
.padding(10.dp)
37+
.verticalScroll(rememberScrollState())
3638
) {
3739
val imageBefore = ImageBitmap.imageResource(
38-
LocalContext.current.resources, R.drawable.landscape5
40+
LocalContext.current.resources, R.drawable.image_before_after_shoes_a
3941
)
4042

4143
val imageAfter = ImageBitmap.imageResource(
42-
LocalContext.current.resources, R.drawable.landscape5_after
44+
LocalContext.current.resources, R.drawable.image_before_after_shoes_b
4345
)
4446

45-
val painter: Painter = painterResource(id = R.drawable.baseline_swap_horiz_24)
46-
47-
val density = LocalDensity.current
48-
49-
BeforeAfterImage(
50-
modifier = Modifier
51-
.clip(RoundedCornerShape(10.dp))
52-
// .background(Color.LightGray, RoundedCornerShape(10.dp))
53-
.fillMaxWidth()
54-
.aspectRatio(4 / 3f),
55-
beforeImage = imageBefore,
56-
afterImage = imageAfter,
57-
contentScale = ContentScale.FillBounds
58-
) {
59-
60-
val handlePosition = touchPosition.x
61-
val posY: Int
62-
63-
val realPos = handlePosition - with(density) {
64-
posY = (imageHeight / 3).roundToPx()
65-
imageWidth.toPx() / 2
66-
}
67-
68-
69-
Canvas(modifier = Modifier.size(imageWidth, imageHeight)) {
47+
val imageBefore2 = ImageBitmap.imageResource(
48+
LocalContext.current.resources, R.drawable.image_before_after_elements_a
49+
)
7050

71-
val canvasWidth = size.width
51+
val imageAfter2 = ImageBitmap.imageResource(
52+
LocalContext.current.resources, R.drawable.image_before_after_elements_b
53+
)
7254

73-
val imagePosition = handlePosition.coerceIn(0f, canvasWidth)
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+
)
7462

75-
drawLine(
76-
Color.White,
77-
strokeWidth = 1.5.dp.toPx(),
78-
start = Offset(imagePosition, 0f),
79-
end = Offset(imagePosition, size.height)
80-
)
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+
}
8185

82-
}
86+
Spacer(modifier = Modifier.height(40.dp))
8387

84-
Image(
85-
painter = painter,
86-
contentDescription = null,
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",
87101
modifier = Modifier
88-
.offset {
89-
IntOffset(realPos.toInt(), posY)
90-
}
91-
.shadow(2.dp, CircleShape)
92-
.background(Color.White)
93-
.padding(2.dp)
102+
.padding(8.dp)
103+
.align(Alignment.TopStart)
104+
)
105+
Label(
106+
text = "BEFORE", modifier = Modifier
107+
.padding(8.dp)
108+
.align(Alignment.TopEnd)
94109
)
95110
}
96111

97-
Spacer(modifier = Modifier.height(20.dp))
98-
99-
BeforeAfterLayout(modifier = Modifier
100-
.fillMaxWidth()
101-
.aspectRatio(4 / 3f),
102-
before = {
103-
Image(
104-
painter = painterResource(id = R.drawable.landscape5),
105-
contentDescription = "",
106-
contentScale = ContentScale.FillBounds
107-
)
112+
Spacer(modifier = Modifier.height(40.dp))
108113

114+
val transition: InfiniteTransition = rememberInfiniteTransition()
109115

110-
},
111-
after = {
112-
Image(
113-
painter = painterResource(id = R.drawable.landscape5_after),
114-
contentDescription = "",
115-
contentScale = ContentScale.FillBounds
116-
)
117-
}
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+
)
118127
)
119128

120-
121-
Spacer(modifier = Modifier.height(20.dp))
122-
123-
BeforeAfterLayout(modifier = Modifier,
124-
before = {
125-
Text(text = "Hello World", fontSize = 60.sp, color = Color.Red)
126-
127-
},
128-
after = {
129-
Text(text = "Hello World", fontSize = 60.sp, color = Color.Green)
130-
}
131-
)
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+
}
132148
}
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+
)
133162
}

0 commit comments

Comments
 (0)