├── app
├── .gitignore
├── src
│ ├── main
│ │ ├── res
│ │ │ ├── values
│ │ │ │ ├── strings.xml
│ │ │ │ ├── colors.xml
│ │ │ │ └── themes.xml
│ │ │ ├── drawable
│ │ │ │ ├── image0.webp
│ │ │ │ ├── image1.webp
│ │ │ │ └── ic_launcher_background.xml
│ │ │ ├── mipmap-hdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-mdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-xhdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-xxhdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-xxxhdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-anydpi-v26
│ │ │ │ ├── ic_launcher.xml
│ │ │ │ └── ic_launcher_round.xml
│ │ │ ├── values-night
│ │ │ │ └── themes.xml
│ │ │ └── drawable-v24
│ │ │ │ └── ic_launcher_foreground.xml
│ │ ├── java
│ │ │ └── com
│ │ │ │ └── juniperphoton
│ │ │ │ └── flipperlayoutjetpackcompose
│ │ │ │ ├── ui
│ │ │ │ └── theme
│ │ │ │ │ ├── Color.kt
│ │ │ │ │ ├── Shape.kt
│ │ │ │ │ ├── Type.kt
│ │ │ │ │ └── Theme.kt
│ │ │ │ ├── flipper
│ │ │ │ └── FlipperLayout.kt
│ │ │ │ └── MainActivity.kt
│ │ └── AndroidManifest.xml
│ ├── test
│ │ └── java
│ │ │ └── com
│ │ │ └── juniperphoton
│ │ │ └── flipperlayoutjetpackcompose
│ │ │ └── ExampleUnitTest.kt
│ └── androidTest
│ │ └── java
│ │ └── com
│ │ └── juniperphoton
│ │ └── flipperlayoutjetpackcompose
│ │ └── ExampleInstrumentedTest.kt
├── proguard-rules.pro
└── build.gradle
├── doc
└── demo.gif
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── .gitignore
├── settings.gradle
├── gradle.properties
├── README.md
├── gradlew.bat
└── gradlew
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/doc/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/doc/demo.gif
--------------------------------------------------------------------------------
/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | FlipperLayoutJetpackCompose
3 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/app/src/main/res/drawable/image0.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/drawable/image0.webp
--------------------------------------------------------------------------------
/app/src/main/res/drawable/image1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/drawable/image1.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuniperPhoton/FlipperLayoutJetpackCompose/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Mon Aug 09 00:02:46 CST 2021
2 | distributionBase=GRADLE_USER_HOME
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-bin.zip
4 | distributionPath=wrapper/dists
5 | zipStorePath=wrapper/dists
6 | zipStoreBase=GRADLE_USER_HOME
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .gradle
3 | /local.properties
4 | /.idea/caches
5 | /.idea/libraries
6 | /.idea/modules.xml
7 | /.idea/workspace.xml
8 | /.idea/navEditor.xml
9 | /.idea/assetWizardSettings.xml
10 | .DS_Store
11 | /build
12 | /captures
13 | .externalNativeBuild
14 | .cxx
15 | local.properties
16 |
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/ui/theme/Color.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose.ui.theme
2 |
3 | import androidx.compose.ui.graphics.Color
4 |
5 | val Purple200 = Color(0xFFBB86FC)
6 | val Purple500 = Color(0xFF6200EE)
7 | val Purple700 = Color(0xFF3700B3)
8 | val Teal200 = Color(0xFF03DAC5)
--------------------------------------------------------------------------------
/settings.gradle:
--------------------------------------------------------------------------------
1 | dependencyResolutionManagement {
2 | repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
3 | repositories {
4 | google()
5 | mavenCentral()
6 | jcenter() // Warning: this repository is going to shut down soon
7 | }
8 | }
9 | rootProject.name = "FlipperLayoutJetpackCompose"
10 | include ':app'
11 |
--------------------------------------------------------------------------------
/app/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #FFBB86FC
4 | #FF6200EE
5 | #FF3700B3
6 | #FF03DAC5
7 | #FF018786
8 | #FF000000
9 | #FFFFFFFF
10 |
--------------------------------------------------------------------------------
/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/ui/theme/Shape.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose.ui.theme
2 |
3 | import androidx.compose.foundation.shape.RoundedCornerShape
4 | import androidx.compose.material.Shapes
5 | import androidx.compose.ui.unit.dp
6 |
7 | val Shapes = Shapes(
8 | small = RoundedCornerShape(4.dp),
9 | medium = RoundedCornerShape(4.dp),
10 | large = RoundedCornerShape(0.dp)
11 | )
--------------------------------------------------------------------------------
/app/src/test/java/com/juniperphoton/flipperlayoutjetpackcompose/ExampleUnitTest.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose
2 |
3 | import org.junit.Test
4 |
5 | import org.junit.Assert.*
6 |
7 | /**
8 | * Example local unit test, which will execute on the development machine (host).
9 | *
10 | * See [testing documentation](http://d.android.com/tools/testing).
11 | */
12 | class ExampleUnitTest {
13 | @Test
14 | fun addition_isCorrect() {
15 | assertEquals(4, 2 + 2)
16 | }
17 | }
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/juniperphoton/flipperlayoutjetpackcompose/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose
2 |
3 | import androidx.test.platform.app.InstrumentationRegistry
4 | import androidx.test.ext.junit.runners.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22 | assertEquals("com.juniperphoton.flipperlayoutjetpackcompose", appContext.packageName)
23 | }
24 | }
--------------------------------------------------------------------------------
/app/src/main/res/values-night/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
--------------------------------------------------------------------------------
/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/ui/theme/Type.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose.ui.theme
2 |
3 | import androidx.compose.material.Typography
4 | import androidx.compose.ui.text.TextStyle
5 | import androidx.compose.ui.text.font.FontFamily
6 | import androidx.compose.ui.text.font.FontWeight
7 | import androidx.compose.ui.unit.sp
8 |
9 | // Set of Material typography styles to start with
10 | val Typography = Typography(
11 | body1 = TextStyle(
12 | fontFamily = FontFamily.Default,
13 | fontWeight = FontWeight.Normal,
14 | fontSize = 16.sp
15 | )
16 | /* Other default text styles to override
17 | button = TextStyle(
18 | fontFamily = FontFamily.Default,
19 | fontWeight = FontWeight.W500,
20 | fontSize = 14.sp
21 | ),
22 | caption = TextStyle(
23 | fontFamily = FontFamily.Default,
24 | fontWeight = FontWeight.Normal,
25 | fontSize = 12.sp
26 | )
27 | */
28 | )
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 | # IDE (e.g. Android Studio) users:
3 | # Gradle settings configured through the IDE *will override*
4 | # any settings specified in this file.
5 | # For more details on how to configure your build environment visit
6 | # http://www.gradle.org/docs/current/userguide/build_environment.html
7 | # Specifies the JVM arguments used for the daemon process.
8 | # The setting is particularly useful for tweaking memory settings.
9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
10 | # When configured, Gradle will run in incubating parallel mode.
11 | # This option should only be used with decoupled projects. More details, visit
12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
13 | # org.gradle.parallel=true
14 | # AndroidX package structure to make it clearer which packages are bundled with the
15 | # Android operating system, and which are packaged with your app"s APK
16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
17 | android.useAndroidX=true
18 | # Automatically convert third-party libraries to use AndroidX
19 | android.enableJetifier=true
20 | # Kotlin code style for this project: "official" or "obsolete":
21 | kotlin.code.style=official
--------------------------------------------------------------------------------
/app/src/main/res/values/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/ui/theme/Theme.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose.ui.theme
2 |
3 | import androidx.compose.foundation.isSystemInDarkTheme
4 | import androidx.compose.material.MaterialTheme
5 | import androidx.compose.material.darkColors
6 | import androidx.compose.material.lightColors
7 | import androidx.compose.runtime.Composable
8 |
9 | private val DarkColorPalette = darkColors(
10 | primary = Purple200,
11 | primaryVariant = Purple700,
12 | secondary = Teal200
13 | )
14 |
15 | private val LightColorPalette = lightColors(
16 | primary = Purple500,
17 | primaryVariant = Purple700,
18 | secondary = Teal200
19 |
20 | /* Other default colors to override
21 | background = Color.White,
22 | surface = Color.White,
23 | onPrimary = Color.White,
24 | onSecondary = Color.Black,
25 | onBackground = Color.Black,
26 | onSurface = Color.Black,
27 | */
28 | )
29 |
30 | @Composable
31 | fun FlipperLayoutJetpackComposeTheme(
32 | darkTheme: Boolean = isSystemInDarkTheme(),
33 | content: @Composable() () -> Unit
34 | ) {
35 | val colors = if (darkTheme) {
36 | DarkColorPalette
37 | } else {
38 | LightColorPalette
39 | }
40 |
41 | MaterialTheme(
42 | colors = colors,
43 | typography = Typography,
44 | shapes = Shapes,
45 | content = content
46 | )
47 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
15 |
18 |
21 |
22 |
23 |
24 |
30 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | plugins {
2 | id 'com.android.application'
3 | id 'kotlin-android'
4 | }
5 |
6 | android {
7 | compileSdk 30
8 |
9 | defaultConfig {
10 | applicationId "com.juniperphoton.flipperlayoutjetpackcompose"
11 | minSdk 21
12 | targetSdk 30
13 | versionCode 1
14 | versionName "1.0"
15 |
16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
17 | vectorDrawables {
18 | useSupportLibrary true
19 | }
20 | }
21 |
22 | buildTypes {
23 | release {
24 | minifyEnabled false
25 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
26 | }
27 | }
28 | compileOptions {
29 | sourceCompatibility JavaVersion.VERSION_1_8
30 | targetCompatibility JavaVersion.VERSION_1_8
31 | }
32 | kotlinOptions {
33 | jvmTarget = '1.8'
34 | useIR = true
35 | }
36 | buildFeatures {
37 | compose true
38 | }
39 | composeOptions {
40 | kotlinCompilerExtensionVersion compose_version
41 | kotlinCompilerVersion '1.5.10'
42 | }
43 | packagingOptions {
44 | resources {
45 | excludes += '/META-INF/{AL2.0,LGPL2.1}'
46 | }
47 | }
48 | }
49 |
50 | dependencies {
51 |
52 | implementation 'androidx.core:core-ktx:1.6.0'
53 | implementation 'androidx.appcompat:appcompat:1.3.1'
54 | implementation 'com.google.android.material:material:1.4.0'
55 | implementation "androidx.compose.ui:ui:$compose_version"
56 | implementation "androidx.compose.material:material:$compose_version"
57 | implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
58 | implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
59 | implementation 'androidx.activity:activity-compose:1.3.0'
60 | testImplementation 'junit:junit:4.+'
61 | androidTestImplementation 'androidx.test.ext:junit:1.1.3'
62 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
63 | androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
64 | debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
65 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # FlipperLayout for Jetpack Compose
2 | Jetpack Compose version of [FlipperControl for UWP](https://github.com/JuniperPhoton/FlipperControlUWP) and [FlipperView for Android](https://github.com/JuniperPhoton/FlipperLayout).
3 |
4 | A composable that uses flip transition to change two states: front and back.
5 |
6 | 
7 |
8 | ## How to use
9 |
10 | > Currently you have to copy the source file [FlipperLayout.kt](https://github.com/JuniperPhoton/FlipperLayoutJetpackCompose/blob/main/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/flipper/FlipperLayout.kt) to your project and make it work. Since it's quite simple I have no plan to publish to maven.
11 |
12 | It's as simple as Jetpack Compose is:
13 |
14 | First, define your composable function with your own content. Here we hoist event so this composable function is for displaying the right state.
15 |
16 | ```
17 | @Composable
18 | fun FlipperContent(
19 | flipperSide: FlipperLayoutSide,
20 | onFlipperSideChanged: () -> Unit
21 | ) {
22 | FlipperLayout(
23 | modifier = Modifier.clickable {
24 | onFlipperSideChanged()
25 | },
26 | flipperSide = flipperSide,
27 | animationSpec = tween(300)
28 | ) {
29 | val text = if (it == FlipperLayoutSide.Front) "Front" else "Back"
30 | Box(
31 | Modifier
32 | .fillMaxWidth(0.5f)
33 | .aspectRatio(1f)
34 | ) {
35 | Image(
36 | painter = painterResource(
37 | if (it == FlipperLayoutSide.Front) {
38 | R.drawable.image0
39 | } else {
40 | R.drawable.image1
41 | }
42 | ),
43 | contentDescription = text,
44 | contentScale = ContentScale.Crop
45 | )
46 | Text(
47 | text.uppercase(),
48 | modifier = Modifier.padding(12.dp),
49 | fontWeight = FontWeight.Bold,
50 | color = Color.White
51 | )
52 | }
53 | }
54 | }
55 | ```
56 |
57 | Then we remember and control the state:
58 |
59 | ```
60 | var flipperSide by remember {
61 | mutableStateOf(FlipperLayoutSide.Front)
62 | }
63 |
64 | FlipperContent(flipperSide) {
65 | flipperSide = flipperSide.flip()
66 | }
67 | ```
68 |
69 | And that's it!
70 |
--------------------------------------------------------------------------------
/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto execute
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto execute
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :execute
68 | @rem Setup the command line
69 |
70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
71 |
72 |
73 | @rem Execute Gradle
74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
75 |
76 | :end
77 | @rem End local scope for the variables with windows NT shell
78 | if "%ERRORLEVEL%"=="0" goto mainEnd
79 |
80 | :fail
81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
82 | rem the _cmd.exe /c_ return code!
83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
84 | exit /b 1
85 |
86 | :mainEnd
87 | if "%OS%"=="Windows_NT" endlocal
88 |
89 | :omega
90 |
--------------------------------------------------------------------------------
/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/flipper/FlipperLayout.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose.flipper
2 |
3 | import androidx.compose.animation.core.*
4 | import androidx.compose.foundation.layout.Box
5 | import androidx.compose.runtime.*
6 | import androidx.compose.ui.Modifier
7 | import androidx.compose.ui.graphics.graphicsLayer
8 |
9 | /**
10 | * @author JuniperPhoton
11 | * @since 2021-08-09
12 | */
13 | enum class FlipperLayoutSide {
14 | Front,
15 | Back
16 | }
17 |
18 | fun FlipperLayoutSide.flip(): FlipperLayoutSide {
19 | return when (this) {
20 | FlipperLayoutSide.Front -> FlipperLayoutSide.Back
21 | else -> FlipperLayoutSide.Front
22 | }
23 | }
24 |
25 | private data class AnimationItem(
26 | val side: FlipperLayoutSide,
27 | val content: @Composable () -> Unit
28 | )
29 |
30 | /**
31 | * A layout uses flipping animation on [flipperSide] changed.
32 | *
33 | * You can specify the animation using [animationSpec] like duration. And describe your
34 | * composable content using [content], which you can use different composable content
35 | * based on the [flipperSide] in the [content] block.
36 | *
37 | * The caller side should like this:
38 | *
39 | * ```
40 | * var flipperSide by remember {
41 | * mutableStateOf(FlipperLayoutSide.Front)
42 | * }
43 | *
44 | * FlipperContent(flipperSide) {
45 | * flipperSide = flipperSide.flip()
46 | * }
47 | *
48 | * @Composable
49 | * fun FlipperContent(
50 | * flipperSide: FlipperLayoutSide,
51 | * onFlipperSideChanged: () -> Unit
52 | * ) {
53 | * val interactionSource = remember { MutableInteractionSource() }
54 | *
55 | * FlipperLayout(
56 | * modifier = Modifier.clickable(interactionSource = interactionSource, indication = null) {
57 | * onFlipperSideChanged()
58 | * },
59 | * flipperSide = flipperSide,
60 | * animationSpec = tween(300)
61 | * ) {
62 | * // your content
63 | * }
64 | * }
65 | * ```
66 | */
67 | @Composable
68 | fun FlipperLayout(
69 | flipperSide: FlipperLayoutSide,
70 | modifier: Modifier = Modifier,
71 | animationSpec: FiniteAnimationSpec = tween(),
72 | content: @Composable (FlipperLayoutSide) -> Unit
73 | ) {
74 | val items = remember { mutableStateListOf() }
75 |
76 | val transitionState = remember { MutableTransitionState(flipperSide) }
77 | val targetChanged = (flipperSide != transitionState.targetState)
78 | transitionState.targetState = flipperSide
79 |
80 | val transition = updateTransition(transitionState, label = "")
81 |
82 | if (targetChanged || items.isEmpty()) {
83 | // Only manipulate the list when the state is changed, or in the first run.
84 | items.clear()
85 | FlipperLayoutSide.values().mapTo(items) { s ->
86 | AnimationItem(s) {
87 | val rotationX by transition.animateFloat(
88 | transitionSpec = { animationSpec }, label = ""
89 | ) { side ->
90 | when (s) {
91 | FlipperLayoutSide.Front -> {
92 | if (side == s) 0f else 180f
93 | }
94 | FlipperLayoutSide.Back -> {
95 | if (side == s) 0f else -180f
96 | }
97 | }
98 | }
99 |
100 | val alpha by transition.animateFloat(
101 | transitionSpec = { animationSpec },
102 | label = ""
103 | ) { side ->
104 | if (s == side) {
105 | 1f
106 | } else {
107 | 0f
108 | }
109 | }
110 |
111 | Box(Modifier.graphicsLayer {
112 | this.rotationX = rotationX
113 | this.alpha = alpha
114 | }) {
115 | content(s)
116 | }
117 | }
118 | }
119 | } else if (transitionState.currentState == transitionState.targetState) {
120 | // Remove all the intermediate items from the list once the animation is finished.
121 | items.removeAll { it.side != transitionState.targetState }
122 | }
123 |
124 | Box(modifier) {
125 | items.forEach {
126 | key(it.side) {
127 | it.content()
128 | }
129 | }
130 | }
131 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/juniperphoton/flipperlayoutjetpackcompose/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.juniperphoton.flipperlayoutjetpackcompose
2 |
3 | import android.os.Bundle
4 | import androidx.activity.ComponentActivity
5 | import androidx.activity.compose.setContent
6 | import androidx.compose.animation.core.tween
7 | import androidx.compose.foundation.Image
8 | import androidx.compose.foundation.clickable
9 | import androidx.compose.foundation.interaction.MutableInteractionSource
10 | import androidx.compose.foundation.layout.*
11 | import androidx.compose.material.*
12 | import androidx.compose.runtime.*
13 | import androidx.compose.ui.Alignment
14 | import androidx.compose.ui.Modifier
15 | import androidx.compose.ui.graphics.Color
16 | import androidx.compose.ui.layout.ContentScale
17 | import androidx.compose.ui.res.painterResource
18 | import androidx.compose.ui.text.font.FontWeight
19 | import androidx.compose.ui.tooling.preview.Preview
20 | import androidx.compose.ui.unit.dp
21 | import com.juniperphoton.flipperlayoutjetpackcompose.flipper.FlipperLayout
22 | import com.juniperphoton.flipperlayoutjetpackcompose.flipper.FlipperLayoutSide
23 | import com.juniperphoton.flipperlayoutjetpackcompose.flipper.flip
24 | import com.juniperphoton.flipperlayoutjetpackcompose.ui.theme.FlipperLayoutJetpackComposeTheme
25 |
26 | class MainActivity : ComponentActivity() {
27 | override fun onCreate(savedInstanceState: Bundle?) {
28 | super.onCreate(savedInstanceState)
29 | setContent {
30 | FlipperLayoutJetpackComposeTheme {
31 | // A surface container using the 'background' color from the theme
32 | Surface(color = MaterialTheme.colors.background) {
33 | Scaffold(topBar = {
34 | TopAppBar(title = {
35 | Text("FlipperLayout Sample")
36 | })
37 | }) {
38 | FlipperLayoutSample()
39 | }
40 | }
41 | }
42 | }
43 | }
44 | }
45 |
46 | @Composable
47 | fun FlipperLayoutSample() {
48 | Box(
49 | contentAlignment = Alignment.Center,
50 | modifier = Modifier
51 | .fillMaxWidth()
52 | .fillMaxHeight()
53 | ) {
54 | Column(horizontalAlignment = Alignment.CenterHorizontally) {
55 | var flipperSide by remember {
56 | mutableStateOf(FlipperLayoutSide.Front)
57 | }
58 |
59 | Spacer(modifier = Modifier.height(12.dp))
60 |
61 | FlipperContent(flipperSide) {
62 | flipperSide = flipperSide.flip()
63 | }
64 |
65 | Spacer(modifier = Modifier.height(12.dp))
66 | Row {
67 | Text("Click the view to flip content")
68 | Spacer(modifier = Modifier.width(20.dp))
69 | Switch(checked = flipperSide == FlipperLayoutSide.Back, onCheckedChange = {
70 | flipperSide = flipperSide.flip()
71 | })
72 | }
73 |
74 | Spacer(modifier = Modifier.height(12.dp))
75 | }
76 | }
77 |
78 | }
79 |
80 | @Composable
81 | fun FlipperContent(
82 | flipperSide: FlipperLayoutSide,
83 | onFlipperSideChanged: () -> Unit
84 | ) {
85 | val interactionSource = remember { MutableInteractionSource() }
86 |
87 | FlipperLayout(
88 | modifier = Modifier.clickable(interactionSource = interactionSource, indication = null) {
89 | onFlipperSideChanged()
90 | },
91 | flipperSide = flipperSide,
92 | animationSpec = tween(300)
93 | ) {
94 | val text = if (it == FlipperLayoutSide.Front) "Front" else "Back"
95 | Box(
96 | Modifier
97 | .fillMaxWidth(0.5f)
98 | .aspectRatio(1f)
99 | ) {
100 | Image(
101 | painter = painterResource(
102 | if (it == FlipperLayoutSide.Front) {
103 | R.drawable.image0
104 | } else {
105 | R.drawable.image1
106 | }
107 | ),
108 | contentDescription = text,
109 | contentScale = ContentScale.Crop
110 | )
111 | Text(
112 | text.uppercase(),
113 | modifier = Modifier.padding(12.dp),
114 | fontWeight = FontWeight.Bold,
115 | color = Color.White
116 | )
117 | }
118 | }
119 | }
120 |
121 | @Preview(showBackground = true)
122 | @Composable
123 | fun DefaultPreview() {
124 | FlipperLayoutJetpackComposeTheme {
125 | FlipperLayoutSample()
126 | }
127 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable/ic_launcher_background.xml:
--------------------------------------------------------------------------------
1 |
2 |
7 |
10 |
15 |
20 |
25 |
30 |
35 |
40 |
45 |
50 |
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
95 |
100 |
105 |
110 |
115 |
120 |
125 |
130 |
135 |
140 |
145 |
150 |
155 |
160 |
165 |
170 |
171 |
--------------------------------------------------------------------------------
/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 |
86 | # Determine the Java command to use to start the JVM.
87 | if [ -n "$JAVA_HOME" ] ; then
88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
89 | # IBM's JDK on AIX uses strange locations for the executables
90 | JAVACMD="$JAVA_HOME/jre/sh/java"
91 | else
92 | JAVACMD="$JAVA_HOME/bin/java"
93 | fi
94 | if [ ! -x "$JAVACMD" ] ; then
95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
96 |
97 | Please set the JAVA_HOME variable in your environment to match the
98 | location of your Java installation."
99 | fi
100 | else
101 | JAVACMD="java"
102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
103 |
104 | Please set the JAVA_HOME variable in your environment to match the
105 | location of your Java installation."
106 | fi
107 |
108 | # Increase the maximum file descriptors if we can.
109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
110 | MAX_FD_LIMIT=`ulimit -H -n`
111 | if [ $? -eq 0 ] ; then
112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
113 | MAX_FD="$MAX_FD_LIMIT"
114 | fi
115 | ulimit -n $MAX_FD
116 | if [ $? -ne 0 ] ; then
117 | warn "Could not set maximum file descriptor limit: $MAX_FD"
118 | fi
119 | else
120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
121 | fi
122 | fi
123 |
124 | # For Darwin, add options to specify how the application appears in the dock
125 | if $darwin; then
126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
127 | fi
128 |
129 | # For Cygwin or MSYS, switch paths to Windows format before running java
130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
133 |
134 | JAVACMD=`cygpath --unix "$JAVACMD"`
135 |
136 | # We build the pattern for arguments to be converted via cygpath
137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
138 | SEP=""
139 | for dir in $ROOTDIRSRAW ; do
140 | ROOTDIRS="$ROOTDIRS$SEP$dir"
141 | SEP="|"
142 | done
143 | OURCYGPATTERN="(^($ROOTDIRS))"
144 | # Add a user-defined pattern to the cygpath arguments
145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
147 | fi
148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
149 | i=0
150 | for arg in "$@" ; do
151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
153 |
154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
156 | else
157 | eval `echo args$i`="\"$arg\""
158 | fi
159 | i=`expr $i + 1`
160 | done
161 | case $i in
162 | 0) set -- ;;
163 | 1) set -- "$args0" ;;
164 | 2) set -- "$args0" "$args1" ;;
165 | 3) set -- "$args0" "$args1" "$args2" ;;
166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
172 | esac
173 | fi
174 |
175 | # Escape application args
176 | save () {
177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
178 | echo " "
179 | }
180 | APP_ARGS=`save "$@"`
181 |
182 | # Collect all arguments for the java command, following the shell quoting and substitution rules
183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
184 |
185 | exec "$JAVACMD" "$@"
186 |
--------------------------------------------------------------------------------