Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): large screen support
Browse files Browse the repository at this point in the history
abcghy committed Jan 23, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 9b061e4 commit b24c039
Showing 9 changed files with 119 additions and 17 deletions.
1 change: 1 addition & 0 deletions app/build.gradle
Original file line number Diff line number Diff line change
@@ -159,6 +159,7 @@ dependencies {

// https://developer.android.com/jetpack/androidx/releases/compose-material3
implementation "androidx.compose.material3:material3:$material3"
implementation "androidx.compose.material3:material3-window-size-class:$material3"

// https://github.com/google/accompanist/releases
implementation "com.google.accompanist:accompanist-insets:$accompanist"
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import android.view.WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN
import android.view.WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
import androidx.compose.runtime.CompositionLocalProvider
import androidx.core.view.WindowCompat
import androidx.profileinstaller.ProfileInstallerInitializer
@@ -36,6 +38,7 @@ class MainActivity : ComponentActivity() {
@Inject
lateinit var accountDao: AccountDao

@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
@@ -60,12 +63,13 @@ class MainActivity : ComponentActivity() {
}

setContent {
val widthSizeClass = calculateWindowSizeClass(this).widthSizeClass
CompositionLocalProvider(
LocalImageLoader provides imageLoader,
) {
AccountSettingsProvider(accountDao) {
SettingsProvider {
HomeEntry()
HomeEntry(widthSizeClass = widthSizeClass)
}
}
}
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ import me.ash.reader.ui.theme.palette.onDark
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RYScaffold(
modifier: Modifier = Modifier,
containerColor: Color = MaterialTheme.colorScheme.surface,
topBarTonalElevation: Dp = 0.dp,
containerTonalElevation: Dp = 0.dp,
@@ -27,7 +28,7 @@ fun RYScaffold(
content: @Composable () -> Unit = {},
) {
Scaffold(
modifier = Modifier
modifier = modifier
.background(
MaterialTheme.colorScheme.surfaceColorAtElevation(
topBarTonalElevation,
13 changes: 9 additions & 4 deletions app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import android.util.Log
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.background
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
@@ -21,7 +22,7 @@ import me.ash.reader.infrastructure.preference.LocalReadingDarkTheme
import me.ash.reader.ui.ext.*
import me.ash.reader.ui.page.home.HomeViewModel
import me.ash.reader.ui.page.home.feeds.FeedsPage
import me.ash.reader.ui.page.home.flow.FlowPage
import me.ash.reader.ui.page.home.flow.FlowRoute
import me.ash.reader.ui.page.home.reading.ReadingPage
import me.ash.reader.ui.page.settings.SettingsPage
import me.ash.reader.ui.page.settings.accounts.AccountDetailsPage
@@ -42,6 +43,7 @@ import me.ash.reader.ui.theme.AppTheme
@Composable
fun HomeEntry(
homeViewModel: HomeViewModel = hiltViewModel(),
widthSizeClass: WindowWidthSizeClass,
) {
val context = LocalContext.current
var isReadingPage by rememberSaveable { mutableStateOf(false) }
@@ -55,6 +57,8 @@ fun HomeEntry(
intent?.replaceExtras(null)
}

val isExpandedScreen = widthSizeClass == WindowWidthSizeClass.Expanded

LaunchedEffect(Unit) {
when (context.initialPage) {
1 -> {
@@ -129,13 +133,14 @@ fun HomeEntry(
FeedsPage(navController = navController, homeViewModel = homeViewModel)
}
forwardAndBackwardComposable(route = RouteName.FLOW) {
FlowPage(
FlowRoute(
navController = navController,
homeViewModel = homeViewModel,
isExpandedScreen = isExpandedScreen,
homeViewModel = homeViewModel
)
}
forwardAndBackwardComposable(route = "${RouteName.READING}/{articleId}") {
ReadingPage(navController = navController, homeViewModel = homeViewModel)
ReadingPage(navController = navController, homeViewModel = homeViewModel, isExpandedScreen = isExpandedScreen)
}

// Settings
40 changes: 37 additions & 3 deletions app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ import androidx.work.WorkInfo
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import me.ash.reader.R
import me.ash.reader.domain.model.article.ArticleFlowItem
import me.ash.reader.domain.model.article.ArticleWithFeed
import me.ash.reader.domain.model.general.Filter
import me.ash.reader.domain.model.general.MarkAsReadConditions
import me.ash.reader.infrastructure.preference.*
@@ -32,6 +32,7 @@ import me.ash.reader.ui.component.base.*
import me.ash.reader.ui.ext.collectAsStateValue
import me.ash.reader.ui.page.common.RouteName
import me.ash.reader.ui.page.home.HomeViewModel
import me.ash.reader.ui.page.home.reading.ReadingPage

@OptIn(
com.google.accompanist.pager.ExperimentalPagerApi::class,
@@ -41,6 +42,8 @@ import me.ash.reader.ui.page.home.HomeViewModel
fun FlowPage(
navController: NavHostController,
flowViewModel: FlowViewModel = hiltViewModel(),
isExpandedScreen: Boolean,
onArticleClick: ((ArticleWithFeed) -> Unit)? = null,
homeViewModel: HomeViewModel,
) {
val keyboardController = LocalSoftwareKeyboardController.current
@@ -97,7 +100,9 @@ fun FlowPage(
onSearch = false
}

val width = if (isExpandedScreen) Modifier.width(334.dp) else Modifier
RYScaffold(
modifier = width,
topBarTonalElevation = topBarTonalElevation.value.dp,
containerTonalElevation = articleListTonalElevation.value.dp,
navigationIcon = {
@@ -240,8 +245,12 @@ fun FlowPage(
articleListTonalElevation = articleListTonalElevation.value,
onClick = {
onSearch = false
navController.navigate("${RouteName.READING}/${it.article.id}") {
launchSingleTop = true
if (onArticleClick == null) {
navController.navigate("${RouteName.READING}/${it.article.id}") {
launchSingleTop = true
}
} else {
onArticleClick(it)
}
}
) {
@@ -281,3 +290,28 @@ fun FlowPage(
}
)
}

@Composable
fun FlowWithArticleDetailsScreen(
navController: NavHostController,
isExpandedScreen: Boolean,
homeViewModel: HomeViewModel,
flowViewModel: FlowViewModel,
) {
var articleId : String? by remember {
mutableStateOf(null)
}

Row {
FlowPage(
navController = navController,
isExpandedScreen = isExpandedScreen,
onArticleClick = {
articleId = it.article.id
},
homeViewModel = homeViewModel,
flowViewModel = flowViewModel,
)
ReadingPage(navController = navController, homeViewModel = homeViewModel, isExpandedScreen = isExpandedScreen, articleId = articleId)
}
}
49 changes: 49 additions & 0 deletions app/src/main/java/me/ash/reader/ui/page/home/flow/FlowRoute.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
package me.ash.reader.ui.page.home.flow

import androidx.compose.runtime.Composable
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import me.ash.reader.ui.page.home.HomeViewModel

enum class FlowScreenType {
FlowWithArticleDetails,
Flow,
}

fun getFlowScreenType(isExpanded: Boolean): FlowScreenType = when (isExpanded) {
true -> {
FlowScreenType.FlowWithArticleDetails
}
false -> {
FlowScreenType.Flow
}
}

@Composable
fun FlowRoute(
navController: NavHostController,
isExpandedScreen: Boolean,
homeViewModel: HomeViewModel,
flowViewModel: FlowViewModel = hiltViewModel(),
) {
val flowScreenType = getFlowScreenType(isExpandedScreen)

when (flowScreenType) {
FlowScreenType.FlowWithArticleDetails -> {
FlowWithArticleDetailsScreen(
navController = navController,
isExpandedScreen = isExpandedScreen,
homeViewModel = homeViewModel,
flowViewModel = flowViewModel,
)
}
FlowScreenType.Flow -> {
FlowPage(
navController = navController,
isExpandedScreen = isExpandedScreen,
homeViewModel = homeViewModel,
flowViewModel = flowViewModel,
)
}
}
}
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import kotlinx.coroutines.CoroutineDispatcher
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update
import kotlinx.coroutines.launch
import me.ash.reader.domain.model.general.MarkAsReadConditions
import me.ash.reader.domain.service.RssService
Original file line number Diff line number Diff line change
@@ -30,6 +30,8 @@ import me.ash.reader.ui.page.home.HomeViewModel
fun ReadingPage(
navController: NavHostController,
homeViewModel: HomeViewModel,
isExpandedScreen: Boolean,
articleId: String? = null,
readingViewModel: ReadingViewModel = hiltViewModel(),
) {
val tonalElevation = LocalReadingPageTonalElevation.current
@@ -44,9 +46,10 @@ fun ReadingPage(

val pagingItems = homeUiState.pagingData.collectAsLazyPagingItems().itemSnapshotList

LaunchedEffect(Unit) {
LaunchedEffect(articleId) {
navController.currentBackStackEntryFlow.collect {
it.arguments?.getString("articleId")?.let { articleId ->
val getArticleId : String? = articleId ?: it.arguments?.getString("articleId")
getArticleId?.let { articleId ->
if (readingUiState.articleId != articleId) {
readingViewModel.initData(articleId)
}
@@ -78,6 +81,7 @@ fun ReadingPage(
isShow = isShowToolBar,
title = readerState.title,
link = readerState.link,
isExpandedScreen = isExpandedScreen,
onClose = {
navController.popBackStack()
},
15 changes: 9 additions & 6 deletions app/src/main/java/me/ash/reader/ui/page/home/reading/TopBar.kt
Original file line number Diff line number Diff line change
@@ -34,6 +34,7 @@ fun TopBar(
isShow: Boolean,
title: String? = "",
link: String? = "",
isExpandedScreen: Boolean,
onClose: () -> Unit = {},
) {
val context = LocalContext.current
@@ -51,12 +52,14 @@ fun TopBar(
modifier = Modifier,
windowInsets = WindowInsets(0.dp),
navigationIcon = {
FeedbackIconButton(
imageVector = Icons.Rounded.Close,
contentDescription = stringResource(R.string.close),
tint = MaterialTheme.colorScheme.onSurface
) {
onClose()
if (!isExpandedScreen) {
FeedbackIconButton(
imageVector = Icons.Rounded.Close,
contentDescription = stringResource(R.string.close),
tint = MaterialTheme.colorScheme.onSurface
) {
onClose()
}
}
},
actions = {

0 comments on commit b24c039

Please sign in to comment.