2 pane support in Interests screen (#1234)
* Add dependency on material3 adaptive Change-Id: Ic49934112a4bdbf15a68c694fbc6b0f23de960a6 * Add InterestsListDetailScreen composable Change-Id: I27e1f6d2e0eeac781baf2b671fa51a864ea5a971 * Store selectedTopicId in InterestsViewModel Change-Id: Id93704335686f171fbf80bdb54865d0f32dc36ce * Pass detail pane composable down Change-Id: I82752d8cfbb3519395f37748fb5f64b769c0c293 * Navigate to initial topic if provided Change-Id: I8998a55a29cdaf90577fa730d55c4ac2f54d6e5b * Lift LDPS up to app module Change-Id: Ibc6e8e598cd0cb62f804f11b2e48d8ae3a81df85 * Fix some navigation behavior Change-Id: Ib6c16aff692b9ce997747a30f2863303cc82fd8b * Navigate to initial topic if provided Change-Id: Iaafe4f876655d51243d7b99be985e9440fe2d4ed * Remove dependency in interests feature module Change-Id: Id517c95e11f93e1c7e17d749a7af0cfdf6085a1f * Hide back arrow when the topics list is visible Change-Id: I8901c3f79b11d35568f0ae779f97fab90e574aa8 * Update interests tests Change-Id: Ie5daf55985fdb53570397cb652abe31bad78f5cd * Highlight selected topic when displaying 2 panes Change-Id: Ifef9fb599f828f58390374b11eacc8be6c280415 * update dependency baselines Change-Id: I90dc21df3337865f4c5368634d3d45fcb0eccc00 * run spotless apply Change-Id: Ib5fb1b7fc26a62bd5e271c2a3721f1c13173f7f8 * Convert isListPaneHidden to isListPaneVisible Change-Id: I6e54f710df7db5ed6f3ec1cb284bc29f2763a657 * Set semantics for selected state Change-Id: I31f27d5036d07c9607909c09ac52a72391f899ca * Use scaffold roles when determining visibility Change-Id: Ib5fe236f182a5eeab20b61692a1cd53c17b68648 * Update multipleBackStackInterests test Change-Id: I1e372f7989817151a6765205291b13b561187fa8pull/1259/head
Jonathan Koren
1 year ago
committed by
GitHub
parent
abe798056e
commit
19f6f9e09a
@ -0,0 +1,35 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2024 The Android Open Source Project
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.google.samples.apps.nowinandroid.ui.interests2pane
|
||||||
|
|
||||||
|
import androidx.lifecycle.SavedStateHandle
|
||||||
|
import androidx.lifecycle.ViewModel
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.interests.navigation.TOPIC_ID_ARG
|
||||||
|
import dagger.hilt.android.lifecycle.HiltViewModel
|
||||||
|
import kotlinx.coroutines.flow.StateFlow
|
||||||
|
import javax.inject.Inject
|
||||||
|
|
||||||
|
@HiltViewModel
|
||||||
|
class Interests2PaneViewModel @Inject constructor(
|
||||||
|
private val savedStateHandle: SavedStateHandle,
|
||||||
|
) : ViewModel() {
|
||||||
|
val selectedTopicId: StateFlow<String?> = savedStateHandle.getStateFlow(TOPIC_ID_ARG, null)
|
||||||
|
|
||||||
|
fun onTopicClick(topicId: String?) {
|
||||||
|
savedStateHandle[TOPIC_ID_ARG] = topicId
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2024 The Android Open Source Project
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.google.samples.apps.nowinandroid.ui.interests2pane
|
||||||
|
|
||||||
|
import androidx.activity.compose.BackHandler
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
|
||||||
|
import androidx.compose.material3.adaptive.ListDetailPaneScaffold
|
||||||
|
import androidx.compose.material3.adaptive.ListDetailPaneScaffoldRole
|
||||||
|
import androidx.compose.material3.adaptive.PaneAdaptedValue
|
||||||
|
import androidx.compose.material3.adaptive.ThreePaneScaffoldNavigator
|
||||||
|
import androidx.compose.material3.adaptive.rememberListDetailPaneScaffoldNavigator
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.LaunchedEffect
|
||||||
|
import androidx.compose.runtime.getValue
|
||||||
|
import androidx.hilt.navigation.compose.hiltViewModel
|
||||||
|
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||||
|
import androidx.navigation.NavGraphBuilder
|
||||||
|
import androidx.navigation.NavType
|
||||||
|
import androidx.navigation.compose.NavHost
|
||||||
|
import androidx.navigation.compose.composable
|
||||||
|
import androidx.navigation.compose.rememberNavController
|
||||||
|
import androidx.navigation.navArgument
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.interests.InterestsRoute
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.interests.navigation.INTERESTS_ROUTE
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.interests.navigation.TOPIC_ID_ARG
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.topic.navigation.TOPIC_ROUTE
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.topic.navigation.navigateToTopic
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.topic.navigation.topicScreen
|
||||||
|
|
||||||
|
private const val DETAIL_PANE_NAVHOST_ROUTE = "detail_pane_route"
|
||||||
|
|
||||||
|
fun NavGraphBuilder.interestsListDetailScreen() {
|
||||||
|
composable(
|
||||||
|
route = INTERESTS_ROUTE,
|
||||||
|
arguments = listOf(
|
||||||
|
navArgument(TOPIC_ID_ARG) {
|
||||||
|
type = NavType.StringType
|
||||||
|
defaultValue = null
|
||||||
|
nullable = true
|
||||||
|
},
|
||||||
|
),
|
||||||
|
) {
|
||||||
|
InterestsListDetailScreen()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
internal fun InterestsListDetailScreen(
|
||||||
|
viewModel: Interests2PaneViewModel = hiltViewModel(),
|
||||||
|
) {
|
||||||
|
val selectedTopicId by viewModel.selectedTopicId.collectAsStateWithLifecycle()
|
||||||
|
InterestsListDetailScreen(
|
||||||
|
selectedTopicId = selectedTopicId,
|
||||||
|
onTopicClick = viewModel::onTopicClick,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
|
||||||
|
@Composable
|
||||||
|
internal fun InterestsListDetailScreen(
|
||||||
|
selectedTopicId: String?,
|
||||||
|
onTopicClick: (String) -> Unit,
|
||||||
|
) {
|
||||||
|
val listDetailNavigator = rememberListDetailPaneScaffoldNavigator<Nothing>()
|
||||||
|
BackHandler(listDetailNavigator.canNavigateBack()) {
|
||||||
|
listDetailNavigator.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
val nestedNavController = rememberNavController()
|
||||||
|
|
||||||
|
fun onTopicClickShowDetailPane(topicId: String) {
|
||||||
|
onTopicClick(topicId)
|
||||||
|
nestedNavController.navigateToTopic(topicId) {
|
||||||
|
popUpTo(DETAIL_PANE_NAVHOST_ROUTE)
|
||||||
|
}
|
||||||
|
listDetailNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
|
||||||
|
}
|
||||||
|
|
||||||
|
ListDetailPaneScaffold(
|
||||||
|
scaffoldState = listDetailNavigator.scaffoldState,
|
||||||
|
listPane = {
|
||||||
|
InterestsRoute(
|
||||||
|
onTopicClick = ::onTopicClickShowDetailPane,
|
||||||
|
highlightSelectedTopic = listDetailNavigator.isDetailPaneVisible(),
|
||||||
|
)
|
||||||
|
},
|
||||||
|
detailPane = {
|
||||||
|
NavHost(
|
||||||
|
navController = nestedNavController,
|
||||||
|
startDestination = TOPIC_ROUTE,
|
||||||
|
route = DETAIL_PANE_NAVHOST_ROUTE,
|
||||||
|
) {
|
||||||
|
topicScreen(
|
||||||
|
showBackButton = !listDetailNavigator.isListPaneVisible(),
|
||||||
|
onBackClick = listDetailNavigator::navigateBack,
|
||||||
|
onTopicClick = ::onTopicClickShowDetailPane,
|
||||||
|
)
|
||||||
|
composable(route = TOPIC_ROUTE) {
|
||||||
|
Box {
|
||||||
|
Text("Placeholder")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
LaunchedEffect(Unit) {
|
||||||
|
if (selectedTopicId != null) {
|
||||||
|
// Initial topic ID was provided when navigating to Interests, so show its details.
|
||||||
|
onTopicClickShowDetailPane(selectedTopicId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
|
||||||
|
private fun <T> ThreePaneScaffoldNavigator<T>.isListPaneVisible(): Boolean =
|
||||||
|
scaffoldState.scaffoldValue[ListDetailPaneScaffoldRole.List] == PaneAdaptedValue.Expanded
|
||||||
|
|
||||||
|
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
|
||||||
|
private fun <T> ThreePaneScaffoldNavigator<T>.isDetailPaneVisible(): Boolean =
|
||||||
|
scaffoldState.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded
|
||||||
Loading…
Reference in new issue