Merge branch 'feature/before-after-layout' into develop

SmartToolFactory · Jul 21, 2022 · eb44d5b · eb44d5b
2 parents 6f7c2d6 + 9ca0753
commit eb44d5b
Show file tree

Hide file tree

Showing 23 changed files with 1,908 additions and 513 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -79,6 +79,9 @@ dependencies {
     // Coil
     implementation("io.coil-kt:coil-compose:2.1.0")
 
+    // ExoPlayer
+    implementation 'com.google.android.exoplayer:exoplayer:2.18.0'
+
     def accompanist_version = "0.24.12-rc"
     // Accompanist
     implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -2,6 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"
@@ -15,7 +17,6 @@
         <activity
             android:name=".MainActivity"
             android:exported="true"
-            android:label="@string/app_name"
             android:theme="@style/Theme.ComposeImage">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

diff --git a/app/src/main/assets/floodplain_clean.mp4 b/app/src/main/assets/floodplain_clean.mp4
diff --git a/app/src/main/assets/floodplain_dirty.mp4 b/app/src/main/assets/floodplain_dirty.mp4
diff --git a/app/src/main/java/com/smarttoolfactory/composeimage/MainActivity.kt b/app/src/main/java/com/smarttoolfactory/composeimage/MainActivity.kt
@@ -92,7 +92,8 @@ private fun HomeContent() {
                 2 -> EditScaleDemo()
                 3 -> EditSizeDemo()
                 4 -> ZoomDemo()
-                else -> BeforeAfterImageDemo()
+                5 -> BeforeAfterImageDemo()
+                else -> BeforeAfterLayoutDemo()
             }
         }
     }
@@ -105,5 +106,6 @@ internal val tabList =
         "Editable Scale",
         "Editable Size",
         "Zoom",
-        "Before/After",
+        "Before/After Image",
+        "Before/After Layout",
     )
diff --git a/app/src/main/java/com/smarttoolfactory/composeimage/demo/BeforeAfterImageDemo.kt b/app/src/main/java/com/smarttoolfactory/composeimage/demo/BeforeAfterImageDemo.kt
@@ -1,17 +1,14 @@
 package com.smarttoolfactory.composeimage.demo
 
 import androidx.compose.animation.core.*
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
@@ -23,9 +20,10 @@ import androidx.compose.ui.res.imageResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.smarttoolfactory.composeimage.ContentScaleSelectionMenu
 import com.smarttoolfactory.composeimage.R
 import com.smarttoolfactory.image.beforeafter.BeforeAfterImage
-import com.smarttoolfactory.image.beforeafter.Order
+import com.smarttoolfactory.image.beforeafter.ContentOrder
 import kotlin.math.roundToInt
 
 @Composable
@@ -45,19 +43,19 @@ fun BeforeAfterImageDemo() {
         )
 
         val imageBefore2 = ImageBitmap.imageResource(
-            LocalContext.current.resources, R.drawable.image_before_after_elements_a
+            LocalContext.current.resources, R.drawable.landscape5_before
         )
 
         val imageAfter2 = ImageBitmap.imageResource(
-            LocalContext.current.resources, R.drawable.image_before_after_elements_b
+            LocalContext.current.resources, R.drawable.landscape5
         )
 
         val imageBefore3 = ImageBitmap.imageResource(
-            LocalContext.current.resources, R.drawable.landscape5_before
+            LocalContext.current.resources, R.drawable.image_before_after_elements_a
         )
 
         val imageAfter3 = ImageBitmap.imageResource(
-            LocalContext.current.resources, R.drawable.landscape5
+            LocalContext.current.resources, R.drawable.image_before_after_elements_b
         )
 
         Text(
@@ -68,6 +66,12 @@ fun BeforeAfterImageDemo() {
             modifier = Modifier.padding(8.dp)
         )
 
+        var contentScale by remember { mutableStateOf(ContentScale.FillBounds) }
+        ContentScaleSelectionMenu(contentScale = contentScale) {
+            contentScale = it
+        }
+
+
         Text(
             text = "Order",
             fontSize = 16.sp,
@@ -76,54 +80,28 @@ fun BeforeAfterImageDemo() {
             modifier = Modifier.padding(8.dp)
         )
 
-        Box {
-            BeforeAfterImage(
-                modifier = Modifier
-                    .shadow(1.dp, RoundedCornerShape(10.dp))
-                    .fillMaxWidth()
-                    .aspectRatio(4 / 3f),
-                beforeImage = imageBefore,
-                afterImage = imageAfter,
-                contentScale = ContentScale.FillBounds
-            )
-            Label(
-                text = "BEFORE",
-                modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopStart)
-            )
-            Label(
-                text = "AFTER", modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopEnd)
-            )
-        }
+        BeforeAfterImage(
+            modifier = Modifier
+                .shadow(1.dp, RoundedCornerShape(10.dp))
+                .fillMaxWidth()
+                .aspectRatio(4 / 3f),
+            beforeImage = imageBefore,
+            afterImage = imageAfter,
+            contentScale = contentScale
+        )
 
         Spacer(modifier = Modifier.height(40.dp))
 
-        Box {
-            BeforeAfterImage(
-                modifier = Modifier
-                    .shadow(1.dp, RoundedCornerShape(10.dp))
-                    .fillMaxWidth()
-                    .aspectRatio(4 / 3f),
-                beforeImage = imageBefore,
-                afterImage = imageAfter,
-                order = Order.AfterBefore,
-                contentScale = ContentScale.FillBounds
-            )
-            Label(
-                text = "AFTER",
-                modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopStart)
-            )
-            Label(
-                text = "BEFORE", modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopEnd)
-            )
-        }
+        BeforeAfterImage(
+            modifier = Modifier
+                .shadow(1.dp, RoundedCornerShape(10.dp))
+                .fillMaxWidth()
+                .aspectRatio(4 / 3f),
+            beforeImage = imageBefore,
+            afterImage = imageAfter,
+            contentOrder = ContentOrder.AfterBefore,
+            contentScale = contentScale
+        )
 
         Spacer(modifier = Modifier.height(40.dp))
         Text(
@@ -134,29 +112,16 @@ fun BeforeAfterImageDemo() {
             modifier = Modifier.padding(8.dp)
         )
 
-        Box {
-            BeforeAfterImage(
-                modifier = Modifier
-                    .shadow(1.dp, RoundedCornerShape(10.dp))
-                    .fillMaxWidth()
-                    .aspectRatio(4 / 3f),
-                beforeImage = imageBefore3,
-                afterImage = imageAfter3,
-                order = Order.AfterBefore,
-                contentScale = ContentScale.FillBounds
-            )
-            Label(
-                text = "AFTER",
-                modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopStart)
-            )
-            Label(
-                text = "BEFORE", modifier = Modifier
-                    .padding(8.dp)
-                    .align(Alignment.TopEnd)
-            )
-        }
+        BeforeAfterImage(
+            modifier = Modifier
+                .shadow(1.dp, RoundedCornerShape(10.dp))
+                .fillMaxWidth()
+                .aspectRatio(4 / 3f),
+            beforeImage = imageBefore2,
+            afterImage = imageAfter2,
+            contentOrder = ContentOrder.AfterBefore,
+            contentScale = contentScale
+        )
 
 
         Spacer(modifier = Modifier.height(40.dp))
@@ -189,11 +154,13 @@ fun BeforeAfterImageDemo() {
                 .border(3.dp, Color(0xffE91E63), RoundedCornerShape(10.dp))
                 .fillMaxWidth()
                 .aspectRatio(4 / 3f),
-            beforeImage = imageBefore2,
-            afterImage = imageAfter2,
+            beforeImage = imageBefore3,
+            afterImage = imageAfter3,
             progress = progress,
             onProgressChange = {},
-            contentScale = ContentScale.FillBounds
+            contentScale = contentScale,
+            beforeLabel = {},
+            afterLabel = {},
         ) {
             Text(
                 "${(progress).roundToInt()}%",
@@ -204,16 +171,3 @@ fun BeforeAfterImageDemo() {
         }
     }
 }
-
-@Composable
-private fun Label(modifier: Modifier = Modifier, text: String) {
-    Text(
-        text = text,
-        color = Color.White,
-        fontSize = 14.sp,
-        fontWeight = FontWeight.Bold,
-        modifier = modifier
-            .background(Color.Black.copy(alpha = .4f), RoundedCornerShape(50))
-            .padding(8.dp)
-    )
-}