Skip to content

Commit c7f0b19

Browse files
author
sds100
committed
#35 fix: adapt welcome page for small height screens
Signed-off-by: sds100 <developer.sds100@gmail.com>
1 parent 1c6f90f commit c7f0b19

7 files changed

Lines changed: 358 additions & 129 deletions

File tree

‎app/src/main/java/com/mapcode/MapcodeNavHost.kt‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,11 @@ import com.mapcode.destinations.FavouritesScreenDestination
3434
import com.mapcode.destinations.MapScreenDestination
3535
import com.mapcode.destinations.OnboardingScreenDestination
3636
import com.mapcode.favourites.FavouritesScreen
37-
import com.mapcode.map.LayoutType
3837
import com.mapcode.map.MapScreen
38+
import com.mapcode.map.MapScreenLayoutType
3939
import com.mapcode.map.MapViewModel
4040
import com.mapcode.onboarding.OnboardingScreen
41+
import com.mapcode.onboarding.OnboardingScreenLayoutType
4142
import com.ramcosta.composedestinations.DestinationsNavHost
4243
import com.ramcosta.composedestinations.manualcomposablecalls.composable
4344
import com.ramcosta.composedestinations.scope.resultBackNavigator
@@ -62,18 +63,6 @@ fun MapcodeNavHost(
6263
systemUiController.setNavigationBarColor(color = Color.Black, darkIcons = false)
6364
}
6465

65-
val layoutType: LayoutType = when {
66-
windowSizeClass.heightSizeClass == WindowHeightSizeClass.Compact
67-
&& windowSizeClass.widthSizeClass < WindowWidthSizeClass.Expanded -> LayoutType.VerticalInfoArea
68-
69-
windowSizeClass.heightSizeClass == WindowHeightSizeClass.Compact
70-
&& windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded -> LayoutType.FloatingInfoArea
71-
72-
windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact -> LayoutType.HorizontalInfoArea
73-
windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded -> LayoutType.FloatingInfoArea
74-
else -> LayoutType.HorizontalInfoArea
75-
}
76-
7766
val appViewModel: AppViewModel = hiltViewModel()
7867
val showOnboarding: Boolean by appViewModel.showOnboarding.collectAsState()
7968

@@ -93,7 +82,7 @@ fun MapcodeNavHost(
9382
MapScreen(
9483
Modifier.fillMaxSize(),
9584
mapViewModel,
96-
layoutType = layoutType,
85+
layoutType = determineMapScreenLayout(windowSizeClass),
9786
navigator = destinationsNavigator,
9887
resultRecipient = resultRecipient()
9988
)
@@ -111,8 +100,30 @@ fun MapcodeNavHost(
111100
OnboardingScreen(
112101
modifier = Modifier.fillMaxSize(),
113102
viewModel = appViewModel,
114-
navigator = destinationsNavigator
103+
navigator = destinationsNavigator,
104+
layoutType = determineOnboardingScreenLayout(windowSizeClass)
115105
)
116106
}
117107
}
108+
}
109+
110+
private fun determineOnboardingScreenLayout(windowSizeClass: WindowSizeClass): OnboardingScreenLayoutType {
111+
return when {
112+
windowSizeClass.heightSizeClass == WindowHeightSizeClass.Compact -> OnboardingScreenLayoutType.Horizontal
113+
else -> OnboardingScreenLayoutType.Vertical
114+
}
115+
}
116+
117+
private fun determineMapScreenLayout(windowSizeClass: WindowSizeClass): MapScreenLayoutType {
118+
return when {
119+
windowSizeClass.heightSizeClass == WindowHeightSizeClass.Compact
120+
&& windowSizeClass.widthSizeClass < WindowWidthSizeClass.Expanded -> MapScreenLayoutType.VerticalInfoArea
121+
122+
windowSizeClass.heightSizeClass == WindowHeightSizeClass.Compact
123+
&& windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded -> MapScreenLayoutType.FloatingInfoArea
124+
125+
windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact -> MapScreenLayoutType.HorizontalInfoArea
126+
windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded -> MapScreenLayoutType.FloatingInfoArea
127+
else -> MapScreenLayoutType.HorizontalInfoArea
128+
}
118129
}

‎app/src/main/java/com/mapcode/map/MapScreen.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ fun MapScreen(
7272
* This option makes instrumentation tests much quicker and easier to implement.
7373
*/
7474
renderGoogleMaps: Boolean = true,
75-
layoutType: LayoutType = LayoutType.HorizontalInfoArea
75+
layoutType: MapScreenLayoutType = MapScreenLayoutType.HorizontalInfoArea
7676
) {
7777
val scope = rememberCoroutineScope()
7878
val scaffoldState = rememberScaffoldState()
@@ -115,7 +115,7 @@ fun MapScreen(
115115
scaffoldState = scaffoldState
116116
) { padding ->
117117
when (layoutType) {
118-
LayoutType.VerticalInfoArea -> VerticalInfoAreaLayout(
118+
MapScreenLayoutType.VerticalInfoArea -> VerticalInfoAreaLayout(
119119
Modifier
120120
.padding(padding)
121121
.fillMaxSize(),
@@ -124,7 +124,7 @@ fun MapScreen(
124124
showSnackbar,
125125
renderGoogleMaps
126126
)
127-
LayoutType.HorizontalInfoArea -> HorizontalInfoAreaLayout(
127+
MapScreenLayoutType.HorizontalInfoArea -> HorizontalInfoAreaLayout(
128128
Modifier
129129
.padding(padding)
130130
.fillMaxSize(),
@@ -133,7 +133,7 @@ fun MapScreen(
133133
showSnackbar,
134134
renderGoogleMaps
135135
)
136-
LayoutType.FloatingInfoArea -> FloatingInfoAreaLayout(
136+
MapScreenLayoutType.FloatingInfoArea -> FloatingInfoAreaLayout(
137137
Modifier.padding(padding),
138138
viewModel,
139139
navigator,

app/src/main/java/com/mapcode/map/LayoutType.kt renamed to app/src/main/java/com/mapcode/map/MapScreenLayoutType.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616

1717
package com.mapcode.map
1818

19-
enum class LayoutType {
19+
enum class MapScreenLayoutType {
2020
VerticalInfoArea, HorizontalInfoArea, FloatingInfoArea
2121
}

‎app/src/main/java/com/mapcode/onboarding/OnboardingScreen.kt‎

Lines changed: 73 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616

1717
package com.mapcode.onboarding
1818

19-
import androidx.compose.foundation.Image
2019
import androidx.compose.foundation.layout.*
2120
import androidx.compose.foundation.rememberScrollState
2221
import androidx.compose.foundation.verticalScroll
@@ -30,11 +29,7 @@ import androidx.compose.ui.Modifier
3029
import androidx.compose.ui.draw.alpha
3130
import androidx.compose.ui.graphics.Color
3231
import androidx.compose.ui.graphics.lerp
33-
import androidx.compose.ui.layout.ContentScale
34-
import androidx.compose.ui.platform.LocalUriHandler
35-
import androidx.compose.ui.res.painterResource
3632
import androidx.compose.ui.res.stringResource
37-
import androidx.compose.ui.text.buildAnnotatedString
3833
import androidx.compose.ui.text.font.FontWeight
3934
import androidx.compose.ui.text.style.TextAlign
4035
import androidx.compose.ui.tooling.preview.Devices
@@ -63,21 +58,27 @@ import kotlin.math.absoluteValue
6358
fun OnboardingScreen(
6459
modifier: Modifier = Modifier,
6560
viewModel: AppViewModel,
66-
navigator: DestinationsNavigator
61+
navigator: DestinationsNavigator,
62+
layoutType: OnboardingScreenLayoutType = OnboardingScreenLayoutType.Vertical
6763
) {
6864
OnboardingScreen(
6965
modifier = modifier,
7066
onFinishOnboarding = {
7167
viewModel.onFinishOnboarding()
7268
navigator.navigate(MapScreenDestination.route)
7369
navigator.popBackStack()
74-
}
70+
},
71+
layoutType = layoutType
7572
)
7673
}
7774

7875
@OptIn(ExperimentalPagerApi::class)
7976
@Composable
80-
private fun OnboardingScreen(modifier: Modifier = Modifier, onFinishOnboarding: () -> Unit) {
77+
private fun OnboardingScreen(
78+
modifier: Modifier = Modifier,
79+
onFinishOnboarding: () -> Unit,
80+
layoutType: OnboardingScreenLayoutType
81+
) {
8182
val pagerState = rememberPagerState()
8283
val pageColors = pageColors(pagerState.currentPage)
8384

@@ -92,22 +93,8 @@ private fun OnboardingScreen(modifier: Modifier = Modifier, onFinishOnboarding:
9293
.fillMaxSize()
9394
.systemBarsPadding()
9495
) {
95-
val pageModifier = Modifier
96-
.padding(start = 32.dp, end = 32.dp, top = 16.dp)
97-
.fillMaxSize()
98-
9996
Box(modifier = Modifier.weight(1f)) {
100-
HorizontalPager(
101-
modifier = Modifier.fillMaxWidth(),
102-
count = 2,
103-
userScrollEnabled = true,
104-
state = pagerState
105-
) { page ->
106-
when (page) {
107-
0 -> WelcomePage(modifier = pageModifier, pageColors = pageColors)
108-
1 -> TerritoriesPage(modifier = pageModifier, pageColors = pageColors)
109-
}
110-
}
97+
Pager(state = pagerState, layoutType = layoutType)
11198

11299
TextButton(
113100
modifier = Modifier
@@ -133,6 +120,49 @@ private fun OnboardingScreen(modifier: Modifier = Modifier, onFinishOnboarding:
133120
}
134121
}
135122

123+
@OptIn(ExperimentalPagerApi::class)
124+
@Composable
125+
private fun Pager(state: PagerState, layoutType: OnboardingScreenLayoutType) {
126+
val pageModifier = Modifier
127+
.padding(start = 32.dp, end = 32.dp, top = 16.dp)
128+
.fillMaxSize()
129+
130+
val pageColors = pageColors(state.currentPage)
131+
132+
HorizontalPager(
133+
modifier = Modifier.fillMaxWidth(),
134+
count = 2,
135+
userScrollEnabled = true,
136+
state = state
137+
) { page ->
138+
when (layoutType) {
139+
OnboardingScreenLayoutType.Vertical ->
140+
when (page) {
141+
0 -> WelcomePageVertical(
142+
modifier = pageModifier,
143+
pageColors = pageColors
144+
)
145+
1 -> TerritoriesPage(
146+
modifier = pageModifier,
147+
pageColors = pageColors
148+
)
149+
}
150+
151+
OnboardingScreenLayoutType.Horizontal ->
152+
when (page) {
153+
0 -> WelcomePageHorizontal(
154+
modifier = pageModifier,
155+
pageColors = pageColors
156+
)
157+
1 -> TerritoriesPage(
158+
modifier = pageModifier,
159+
pageColors = pageColors
160+
)
161+
}
162+
}
163+
}
164+
}
165+
136166
@Composable
137167
private fun calculatePageColor(currentPage: Int, pageOffset: Float): Color {
138168
val currentPageColor = pageColors(currentPage).background
@@ -150,7 +180,11 @@ private fun calculatePageColor(currentPage: Int, pageOffset: Float): Color {
150180
@Composable
151181
private fun OnboardingScreenPreview() {
152182
MapcodeTheme {
153-
OnboardingScreen(modifier = Modifier.fillMaxSize(), onFinishOnboarding = {})
183+
OnboardingScreen(
184+
modifier = Modifier.fillMaxSize(),
185+
onFinishOnboarding = {},
186+
layoutType = OnboardingScreenLayoutType.Vertical
187+
)
154188
}
155189
}
156190

@@ -236,91 +270,6 @@ private fun PreviousPageButton(modifier: Modifier = Modifier, onClick: () -> Uni
236270
}
237271
}
238272

239-
@Composable
240-
private fun PageButton(modifier: Modifier, pageColors: PageColors, onClick: () -> Unit) {
241-
val contentColor = MaterialTheme.colors.contentColorFor(pageColors.backgroundDark)
242-
243-
val buttonColors = ButtonDefaults.buttonColors(
244-
backgroundColor = pageColors.backgroundDark,
245-
contentColor = contentColor
246-
)
247-
248-
Button(
249-
modifier = modifier,
250-
onClick = onClick,
251-
colors = buttonColors
252-
) {
253-
Text(stringResource(R.string.onboarding_welcome_page_learn_more_button))
254-
}
255-
}
256-
257-
@Composable
258-
private fun WelcomePage(modifier: Modifier, pageColors: PageColors) {
259-
Column(modifier) {
260-
Image(
261-
modifier = Modifier
262-
.align(Alignment.CenterHorizontally)
263-
.weight(0.3f),
264-
painter = painterResource(R.mipmap.ic_launcher_foreground),
265-
contentDescription = null,
266-
contentScale = ContentScale.FillHeight
267-
)
268-
269-
Text(
270-
modifier = Modifier
271-
.fillMaxWidth()
272-
.weight(0.1f),
273-
text = stringResource(R.string.onboarding_welcome_page_title),
274-
style = MaterialTheme.typography.h4,
275-
textAlign = TextAlign.Center,
276-
color = pageColors.foreground
277-
)
278-
279-
Column(
280-
modifier = Modifier
281-
.weight(0.4f)
282-
.verticalScroll(state = rememberScrollState())
283-
) {
284-
val text = buildAnnotatedString {
285-
pushStyle(
286-
MaterialTheme.typography.subtitle1
287-
.copy(fontWeight = FontWeight.W600, color = pageColors.foreground)
288-
.toSpanStyle()
289-
)
290-
append(stringResource(R.string.onboarding_welcome_page_text_1))
291-
pop()
292-
293-
append("\n\n")
294-
295-
val normalTextColor = MaterialTheme.colors.contentColorFor(pageColors.background)
296-
val normalTextStyle =
297-
MaterialTheme.typography.body1.copy(color = normalTextColor).toSpanStyle()
298-
299-
pushStyle(normalTextStyle)
300-
append(stringResource(R.string.onboarding_welcome_page_text_2))
301-
pop()
302-
}
303-
304-
Text(
305-
modifier = Modifier.fillMaxWidth(),
306-
text = text,
307-
style = MaterialTheme.typography.body1
308-
)
309-
}
310-
311-
Spacer(Modifier.height(16.dp))
312-
313-
val learnMoreUrl = stringResource(R.string.onboarding_welcome_page_learn_more_url)
314-
val uriHandler = LocalUriHandler.current
315-
316-
PageButton(
317-
modifier = Modifier.align(Alignment.CenterHorizontally),
318-
pageColors = pageColors,
319-
onClick = { uriHandler.openUri(learnMoreUrl) }
320-
)
321-
}
322-
}
323-
324273
@Composable
325274
private fun TerritoriesPage(modifier: Modifier, pageColors: PageColors) {
326275
Column(modifier) {
@@ -378,6 +327,21 @@ private fun TerritoriesPagePreview() {
378327
}
379328
}
380329

330+
@Preview(widthDp = 800, heightDp = 300)
331+
@Composable
332+
private fun TerritoriesPageLandscapePreview() {
333+
MapcodeTheme {
334+
Surface(color = pageColors(1).background) {
335+
TerritoriesPage(
336+
modifier = Modifier
337+
.fillMaxSize()
338+
.padding(16.dp),
339+
pageColors = pageColors(1)
340+
)
341+
}
342+
}
343+
}
344+
381345
@Composable
382346
private fun TerritoriesPageButtons(modifier: Modifier = Modifier, pageColors: PageColors) {
383347
val mapcodes: List<Mapcode> = remember { MapcodeUtils.GoogleHqMapcodes() }

‎app/src/main/java/com/mapcode/onboarding/OnboardingScreenLayoutType.kt‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/*
2+
* Copyright (C) 2022, Stichting Mapcode Foundation (http://www.mapcode.com)
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package com.mapcode.onboarding
18+
19+
enum class OnboardingScreenLayoutType {
20+
Vertical, Horizontal
21+
}

0 commit comments

Comments
 (0)