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
4 months 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