项目作者: opatry

项目描述 :
Week #1 - Puppy adoption app
高级语言: Kotlin
项目地址: git://github.com/opatry/android-dev-challenge-compose-week1.git
创建时间: 2021-02-26T14:49:45Z
项目社区:https://github.com/opatry/android-dev-challenge-compose-week1

开源协议:Apache License 2.0

下载


🐱 Kitty adoption app - Week #1

Workflow result

:scroll: Description

This is a simple master/detail app with a fake list of clickable data displaying more detailed information about it.

:bulb: Motivation and Context

My goal was mainly to see how Jetpack Compose handles Navigation and Multiple form factor/layouts.

I’m proud of my work because I started late (was in holiday when challenge was first announced) and didn’t spent a lot of time on this.
Still, I managed to submit a working version on time implementing Jetpack navigation and dedicated support of tablet.


I used MVVM, Unidirectional Data Flow and UI State pattern.
Each state has its own composable, see CatsScreen.kt.


Show me the code!

kotlin @Composable fun CatsScreen(viewModel: CatsViewModel, selectedCat: CatModel?, onCatSelected: (CatModel) -> Unit) { Scaffold( topBar = { /* */ }, content = { val state by viewModel.catsState.observeAsState(CatsScreenState.Loading) CatsStateDispatcher(uiState = state, selectedCat, onCatSelected) } ) } @Composable fun CatsStateDispatcher(uiState: CatsScreenState, selectedCat: CatModel?, onCatSelected: (CatModel) -> Unit) { when (uiState) { CatsScreenState.Loading -> LoadingCatsContent() is CatsScreenState.Error -> ErrorCatsContent(uiState.cause) CatsScreenState.Empty -> EmptyCatsContent() is CatsScreenState.Loaded -> LoadedCatsContent(uiState.cats, selectedCat, onCatSelected) } }


I implemented a MainLayout composable to choose how to present the UI depending on device configuration, see MainActivity.kt/MainLayout.


Show me the code!

kotlin sealed class NavRoute(val path: String) { object CatsList : NavRoute("cats") object CatDetails : NavRoute("cat.details") } @Composable fun MainLayout(catRepository: CatRepository = (CatRepository((FakeCatDataSource())))) { val catsViewModel = viewModel<CatsViewModel>(factory = CatsViewModelFactory(catRepository)) Surface(color = MaterialTheme.colors.background) { if (booleanResource(R.bool.is_tablet)) { var selectedCatUUID by rememberSaveable { mutableStateOf<UUID?>(null) } val selectedCat = selectedCatUUID?.let { uuid -> catsViewModel.findCatByUUID(uuid) } if (booleanResource(R.bool.is_portrait)) { MainLayoutTabletPortrait(catsViewModel, selectedCat) { cat -> selectedCatUUID = cat.uuid } } else { MainLayoutTabletLandscape(catsViewModel, selectedCat) { cat -> selectedCatUUID = cat.uuid } } } else { val navController = rememberNavController() NavHost(navController, startDestination = NavRoute.CatsList.path) { composable(NavRoute.CatsList.path) { CatsScreen(catsViewModel, null) { cat -> navController.navigate("${NavRoute.CatDetails.path}/${cat.uuid}") } } composable("${NavRoute.CatDetails.path}/{uuid}") { backStackEntry -> val uuid = UUID.fromString(backStackEntry.arguments?.get("uuid") as String) val cat = catsViewModel.findCatByUUID(uuid) CatDetailsScreen(cat) { navController.popBackStack() } } } } } }

I didn’t see guidelines regarding how to handle tablet and side-by-side layouts, maybe there is something better 🤷‍♂️.

:camera_flash: Screenshots

🌞 Light Mode

List Details Tablet


🌚 Dark Mode

List Details Tablet


License

  1. Copyright 2020 The Android Open Source Project
  2. Licensed under the Apache License, Version 2.0 (the "License");
  3. you may not use this file except in compliance with the License.
  4. You may obtain a copy of the License at
  5. https://www.apache.org/licenses/LICENSE-2.0
  6. Unless required by applicable law or agreed to in writing, software
  7. distributed under the License is distributed on an "AS IS" BASIS,
  8. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  9. See the License for the specific language governing permissions and
  10. limitations under the License.