diff --git a/examples/imageviewer/README.md b/examples/imageviewer/README.md index f5c6e45ccf..090e0d53ab 100755 --- a/examples/imageviewer/README.md +++ b/examples/imageviewer/README.md @@ -1 +1,4 @@ -An example of image gallery for remote server image viewing, based on Jetpack Compose UI library (desktop). +An example of image gallery for remote server image viewing, based on Jetpack Compose UI library (desktop and android). + +To run desktop application execute in terminal: ./gradlew desktop:run +To run android application you will need to open project in Intellij IDEA or Android Studio and run "android" configuration diff --git a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/model/ContentState.kt b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/model/ContentState.kt index 9a26915889..493683dfa3 100755 --- a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/model/ContentState.kt +++ b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/model/ContentState.kt @@ -159,7 +159,6 @@ object ContentState { } // application content initialization - // @Composable fun initData() { if (isAppUIReady.value) return @@ -228,9 +227,18 @@ object ContentState { return MainImageWrapper.isEmpty() } + fun fullscreen(picture: Picture) { + isAppUIReady.value = false + AppState.screenState(ScreenType.FullscreenImage) + setMainImage(picture) + } + fun setMainImage(picture: Picture) { - if (MainImageWrapper.getId() == picture.id) + if (MainImageWrapper.getId() == picture.id) { + if (!isContentReady()) + isAppUIReady.value = true return + } executor.execute { if (isInternetAvailable()) { @@ -240,6 +248,7 @@ object ContentState { handler.post { wrapPictureIntoMainImage(fullSizePicture) + isAppUIReady.value = true } } else { handler.post { diff --git a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/AppUI.kt b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/AppUI.kt index c51a1b63df..fa8d6d25e5 100755 --- a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/AppUI.kt +++ b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/AppUI.kt @@ -37,11 +37,7 @@ fun BuildAppUI(content: ContentState) { ) { when (AppState.screenState()) { ScreenType.Main -> { - if (content.isContentReady()) { - setMainScreen(content) - } else { - setLoadingScreen(content) - } + setMainScreen(content) } ScreenType.FullscreenImage -> { setImageFullScreen(content) diff --git a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/FullImageScreen.kt b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/FullImageScreen.kt index a1b07c621f..4bc91d2e27 100755 --- a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/FullImageScreen.kt +++ b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/FullImageScreen.kt @@ -29,22 +29,27 @@ import androidx.compose.foundation.shape.CircleShape import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageAsset import androidx.compose.ui.graphics.asImageAsset +import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.MaterialTheme +import androidx.compose.foundation.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.Stack import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.preferredHeight import androidx.compose.foundation.layout.preferredSize import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.RowScope.gravity +import androidx.compose.foundation.layout.RowScope.align import androidx.compose.material.Surface import androidx.compose.ui.unit.dp import example.imageviewer.core.FilterType import example.imageviewer.model.AppState import example.imageviewer.model.ContentState import example.imageviewer.model.ScreenType +import example.imageviewer.style.DarkGray +import example.imageviewer.style.DarkGreen import example.imageviewer.style.Foreground import example.imageviewer.style.MiniatureColor import example.imageviewer.style.Transparent @@ -56,7 +61,6 @@ import example.imageviewer.style.icFilterPixelOff import example.imageviewer.style.icFilterBlurOn import example.imageviewer.style.icFilterBlurOff import example.imageviewer.style.icFilterUnknown -import example.imageviewer.style.DarkGray import example.imageviewer.utils.displayHeight import example.imageviewer.utils.displayWidth import example.imageviewer.utils.getDisplayBounds @@ -69,10 +73,29 @@ import kotlin.math.roundToInt fun setImageFullScreen( content: ContentState ) { + if (content.isContentReady()) { + Column { + setToolBar(content.getSelectedImageName(), content) + setImage(content) + } + } else { + setLoadingScreen() + } +} - Column { - setToolBar(content.getSelectedImageName(), content) - setImage(content) +@Composable +private fun setLoadingScreen() { + + Stack { + Surface(color = MiniatureColor, modifier = Modifier.preferredHeight(44.dp)) {} + Box(modifier = Modifier.align(Alignment.Center)) { + Surface(color = DarkGray, elevation = 4.dp, shape = CircleShape) { + CircularProgressIndicator( + modifier = Modifier.preferredSize(50.dp).padding(3.dp, 3.dp, 4.dp, 4.dp), + color = DarkGreen + ) + } + } } } @@ -86,7 +109,7 @@ fun setToolBar( Row(modifier = Modifier.padding(end = 30.dp)) { Surface( color = Transparent, - modifier = Modifier.padding(start = 20.dp).gravity(Alignment.CenterVertically), + modifier = Modifier.padding(start = 20.dp).align(Alignment.CenterVertically), shape = CircleShape ) { Clickable( @@ -107,14 +130,14 @@ fun setToolBar( color = Foreground, maxLines = 1, modifier = Modifier.padding(start = 30.dp).weight(1f) - .gravity(Alignment.CenterVertically), + .align(Alignment.CenterVertically), style = MaterialTheme.typography.body1 ) Surface( color = Color(255, 255, 255, 40), modifier = Modifier.preferredSize(154.dp, 38.dp) - .gravity(Alignment.CenterVertically), + .align(Alignment.CenterVertically), shape = CircleShape ) { ScrollableRow { @@ -133,11 +156,11 @@ fun setToolBar( fun FilterButton( content: ContentState, type: FilterType, - modifier: Modifier = Modifier.gravity(Alignment.CenterVertically).preferredSize(38.dp) + modifier: Modifier = Modifier.align(Alignment.CenterVertically).preferredSize(38.dp) ) { Surface( color = Transparent, - modifier = Modifier.gravity(Alignment.CenterVertically), + modifier = Modifier.align(Alignment.CenterVertically), shape = CircleShape ) { Clickable( diff --git a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/MainScreen.kt b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/MainScreen.kt index 22850700c9..bb0fcccf4f 100755 --- a/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/MainScreen.kt +++ b/examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/MainScreen.kt @@ -65,9 +65,13 @@ import example.imageviewer.R @Composable fun setMainScreen(content: ContentState) { - Column { - setTopContent(content) - setScrollableArea(content) + if (content.isContentReady()) { + Column { + setTopContent(content) + setScrollableArea(content) + } + } else { + setLoadingScreen(content) } } @@ -78,7 +82,7 @@ fun setLoadingScreen(content: ContentState) { Column { setTopContent(content) } - Box(modifier = Modifier.gravity(Alignment.Center)) { + Box(modifier = Modifier.align(Alignment.Center)) { Surface(color = DarkGray, elevation = 4.dp, shape = CircleShape) { CircularProgressIndicator( modifier = Modifier.preferredSize(50.dp).padding(4.dp), @@ -88,7 +92,7 @@ fun setLoadingScreen(content: ContentState) { } Text( text = content.getString(R.string.loading), - modifier = Modifier.gravity(Alignment.Center).offset(0.dp, 70.dp), + modifier = Modifier.align(Alignment.Center).offset(0.dp, 70.dp), style = MaterialTheme.typography.body1, color = Foreground ) @@ -117,11 +121,11 @@ fun setTitleBar(text: String, content: ContentState) { Text( text, color = Foreground, - modifier = Modifier.weight(1f).gravity(Alignment.CenterVertically) + modifier = Modifier.weight(1f).align(Alignment.CenterVertically) ) Surface( color = Transparent, - modifier = Modifier.padding(end = 20.dp).gravity(Alignment.CenterVertically), + modifier = Modifier.padding(end = 20.dp).align(Alignment.CenterVertically), shape = CircleShape ) { Clickable( @@ -185,8 +189,7 @@ fun setMiniatureUI( Row(modifier = Modifier.padding(end = 30.dp)) { Clickable( onClick = { - content.setMainImage(picture) - AppState.screenState(ScreenType.FullscreenImage) + content.fullscreen(picture) } ) { Image( @@ -200,7 +203,7 @@ fun setMiniatureUI( Text( text = picture.name, color = Foreground, - modifier = Modifier.weight(1f).gravity(Alignment.CenterVertically).padding(start = 16.dp), + modifier = Modifier.weight(1f).align(Alignment.CenterVertically).padding(start = 16.dp), style = MaterialTheme.typography.body1 ) diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt index 5e2e3f51e5..a0fa47f812 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt @@ -124,9 +124,7 @@ class ContentState( } // application content initialization - @Composable fun initData() { - println("app") if (isAppUIReady.value) return @@ -193,12 +191,18 @@ class ContentState( return mainImageWrapper.isEmpty() } - fun setMainImage(picture: Picture) { - if (mainImageWrapper.getId() == picture.id) - return - + fun fullscreen(picture: Picture) { isAppUIReady.value = false AppState.screenState(ScreenType.FullscreenImage) + setMainImage(picture) + } + + fun setMainImage(picture: Picture) { + if (mainImageWrapper.getId() == picture.id) { + if (!isContentReady()) + isAppUIReady.value = true + return + } executor.execute { if (isInternetAvailable()) { diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt index f7b3e4aeac..417ea57ee8 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt @@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.asImageAsset import androidx.compose.ui.layout.ContentScale import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.MaterialTheme +import androidx.compose.foundation.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Stack -import androidx.compose.foundation.Box import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.preferredHeight @@ -47,6 +47,7 @@ import example.imageviewer.core.FilterType import example.imageviewer.model.AppState import example.imageviewer.model.ContentState import example.imageviewer.model.ScreenType +import example.imageviewer.style.DarkGray import example.imageviewer.style.DarkGreen import example.imageviewer.style.Foreground import example.imageviewer.style.MiniatureColor @@ -59,7 +60,6 @@ import example.imageviewer.style.icFilterPixelOff import example.imageviewer.style.icFilterBlurOn import example.imageviewer.style.icFilterBlurOff import example.imageviewer.style.icFilterUnknown -import example.imageviewer.style.DarkGray import example.imageviewer.utils.displayHeight import example.imageviewer.utils.displayWidth import example.imageviewer.utils.getDisplayBounds diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt index 1d027e0fbd..b93c35d92e 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt @@ -187,7 +187,7 @@ fun setMiniatureUI( Row(modifier = Modifier.padding(end = 30.dp)) { Clickable( onClick = { - content.setMainImage(picture) + content.fullscreen(picture) } ) { Image(