공부/Android
Compose : JetNews 분석
데자와 맛있다
2023. 7. 29. 15:56
100% 컴포즈 프로젝트 진행중
어떻게 SAA를 컴포즈에서할까??????
https://github.com/android/compose-samples/tree/main/JetNews
이친구를 분석해보려고한다 (시간이 없긴하지만)
https://whyprogrammer.tistory.com/652
[Jetpack Compose] 컴포즈에서 Navigation 사용하는 방법 정리
RallyDestinations 이번 코드랩에서 배울 내용 Basics of using Jetpack Navigation with Jetpack Compose Navigating between composables Integrating a custom tab bar composable into your navigation hierarchy Navigating with arguments Navigating using
whyprogrammer.tistory.com
이 블로그 글도 함께 봐야 할듯
이렇게 생긴넘이다
전체 구조
data : 화면에 표시할 데이터들과 관련된것이겠죠?
glance : 얜뭐지?
model : DTO 모임인듯
ui : 화면 관련
utils : 전체적으로 공통으로 쓸수있는애들 모음
넘나 넘나 시간이 없으므로 ui부분만 보도록 하겟삼
일단 화면별로 디렉터리를 나눴고 MainActivity하나 있다
매니페스트를 보니 액티비티는 이친구 하나뿐이다
SAA인듯
Mainactivity는 이런데
뭔가 appContainer라는걸 만들고
setContent라는거 안에다가 JetnewsApp을 설정?하네
/*
* Copyright 2020 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.example.jetnews.ui
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.add
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.systemBars
import androidx.compose.material3.DrawerState
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.rememberDrawerState
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.example.jetnews.data.AppContainer
import com.example.jetnews.ui.components.AppNavRail
import com.example.jetnews.ui.theme.JetnewsTheme
import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun JetnewsApp(
appContainer: AppContainer,
widthSizeClass: WindowWidthSizeClass,
) {
JetnewsTheme {
val navController = rememberNavController()
val navigationActions = remember(navController) {
JetnewsNavigationActions(navController)
}
val coroutineScope = rememberCoroutineScope()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute =
navBackStackEntry?.destination?.route ?: JetnewsDestinations.HOME_ROUTE
val isExpandedScreen = widthSizeClass == WindowWidthSizeClass.Expanded
val sizeAwareDrawerState = rememberSizeAwareDrawerState(isExpandedScreen)
ModalNavigationDrawer(
drawerContent = {
AppDrawer(
currentRoute = currentRoute,
navigateToHome = navigationActions.navigateToHome,
navigateToInterests = navigationActions.navigateToInterests,
closeDrawer = { coroutineScope.launch { sizeAwareDrawerState.close() } }
)
},
drawerState = sizeAwareDrawerState,
// Only enable opening the drawer via gestures if the screen is not expanded
gesturesEnabled = !isExpandedScreen
) {
Row {
if (isExpandedScreen) {
AppNavRail(
currentRoute = currentRoute,
navigateToHome = navigationActions.navigateToHome,
navigateToInterests = navigationActions.navigateToInterests,
)
}
JetnewsNavGraph(
appContainer = appContainer,
isExpandedScreen = isExpandedScreen,
navController = navController,
openDrawer = { coroutineScope.launch { sizeAwareDrawerState.open() } },
)
}
}
}
}
/**
* Determine the drawer state to pass to the modal drawer.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun rememberSizeAwareDrawerState(isExpandedScreen: Boolean): DrawerState {
val drawerState = rememberDrawerState(DrawerValue.Closed)
return if (!isExpandedScreen) {
// If we want to allow showing the drawer, we use a real, remembered drawer
// state defined above
drawerState
} else {
// If we don't want to allow the drawer to be shown, we provide a drawer state
// that is locked closed. This is intentionally not remembered, because we
// don't want to keep track of any changes and always keep it closed
DrawerState(DrawerValue.Closed)
}
}
/**
* Determine the content padding to apply to the different screens of the app
*/
@Composable
fun rememberContentPaddingForScreen(
additionalTop: Dp = 0.dp,
excludeTop: Boolean = false
) =
WindowInsets.systemBars
.only(if (excludeTop) WindowInsetsSides.Bottom else WindowInsetsSides.Vertical)
.add(WindowInsets(top = additionalTop))
.asPaddingValues()
아마.. 가장 겉에는 이 앱이 옆에 서랍(이름뭐더라 ㅋㅋ) 이 잇기땜에 AppDrawer로 하나 만들어주는듯 우리 앱은 이거없으니깐 치우고
row 로 가로로 쌓기 하나 만들어주고
만약에 isExpandedScreen이면 AppNavRail을 넣어준다
아마 이 앱은 태블릿 화면도 지원하기 위해서 저런거 해준듯 우리앱은 저거 없으니깐 치우고
다음 JetnewsNavGraph가 있는데 이름만봐도 네비게이션 그래프임
오.. 생각보다 구조가............................................... ㅎㅎ 큰일났네?
JetNewsNavGraph는 이렇삼
안에 NavHost있고 그 안에 여러개의 composable이 있는데
그안에 HomeRoute등 Route들이 있고 Route에 viewmodel을 넣고있다
HomeRoute는 HomeScreenType에 따라 Screen들을 골라서 보여주고있다
home안에서도 여러 타입이 나뉜듯 한데 우리 앱은 그딴거 없으므로 바로 Screen을 넣어줘도될듯함
/*
* Copyright 2021 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.example.jetnews.ui.home
import android.content.Context
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import android.widget.Toast
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Divider
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarResult
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.material3.TopAppBarState
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.jetnews.R
import com.example.jetnews.data.Result
import com.example.jetnews.data.posts.impl.BlockingFakePostsRepository
import com.example.jetnews.model.Post
import com.example.jetnews.model.PostsFeed
import com.example.jetnews.ui.article.postContentItems
import com.example.jetnews.ui.article.sharePost
import com.example.jetnews.ui.components.JetnewsSnackbarHost
import com.example.jetnews.ui.modifiers.interceptKey
import com.example.jetnews.ui.rememberContentPaddingForScreen
import com.example.jetnews.ui.theme.JetnewsTheme
import com.example.jetnews.ui.utils.BookmarkButton
import com.example.jetnews.ui.utils.FavoriteButton
import com.example.jetnews.ui.utils.ShareButton
import com.example.jetnews.ui.utils.TextSettingsButton
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import kotlinx.coroutines.currentCoroutineContext
import kotlinx.coroutines.isActive
import kotlinx.coroutines.runBlocking
/**
* The home screen displaying the feed along with an article details.
*/
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomeFeedWithArticleDetailsScreen(
uiState: HomeUiState,
showTopAppBar: Boolean,
onToggleFavorite: (String) -> Unit,
onSelectPost: (String) -> Unit,
onRefreshPosts: () -> Unit,
onErrorDismiss: (Long) -> Unit,
onInteractWithList: () -> Unit,
onInteractWithDetail: (String) -> Unit,
openDrawer: () -> Unit,
homeListLazyListState: LazyListState,
articleDetailLazyListStates: Map<String, LazyListState>,
snackbarHostState: SnackbarHostState,
modifier: Modifier = Modifier,
onSearchInputChanged: (String) -> Unit,
) {
HomeScreenWithList(
uiState = uiState,
showTopAppBar = showTopAppBar,
onRefreshPosts = onRefreshPosts,
onErrorDismiss = onErrorDismiss,
openDrawer = openDrawer,
snackbarHostState = snackbarHostState,
modifier = modifier,
) { hasPostsUiState, contentModifier ->
val contentPadding = rememberContentPaddingForScreen(
additionalTop = if (showTopAppBar) 0.dp else 8.dp,
excludeTop = showTopAppBar
)
Row(contentModifier) {
PostList(
postsFeed = hasPostsUiState.postsFeed,
favorites = hasPostsUiState.favorites,
showExpandedSearch = !showTopAppBar,
onArticleTapped = onSelectPost,
onToggleFavorite = onToggleFavorite,
contentPadding = contentPadding,
modifier = Modifier
.width(334.dp)
.notifyInput(onInteractWithList),
state = homeListLazyListState,
searchInput = hasPostsUiState.searchInput,
onSearchInputChanged = onSearchInputChanged,
)
// Crossfade between different detail posts
Crossfade(targetState = hasPostsUiState.selectedPost) { detailPost ->
// Get the lazy list state for this detail view
val detailLazyListState by remember {
derivedStateOf {
articleDetailLazyListStates.getValue(detailPost.id)
}
}
// Key against the post id to avoid sharing any state between different posts
key(detailPost.id) {
LazyColumn(
state = detailLazyListState,
contentPadding = contentPadding,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxSize()
.notifyInput {
onInteractWithDetail(detailPost.id)
}
) {
stickyHeader {
val context = LocalContext.current
PostTopBar(
isFavorite = hasPostsUiState.favorites.contains(detailPost.id),
onToggleFavorite = { onToggleFavorite(detailPost.id) },
onSharePost = { sharePost(detailPost, context) },
modifier = Modifier
.fillMaxWidth()
.wrapContentWidth(Alignment.End)
)
}
postContentItems(detailPost)
}
}
}
}
}
}
/**
* A [Modifier] that tracks all input, and calls [block] every time input is received.
*/
private fun Modifier.notifyInput(block: () -> Unit): Modifier =
composed {
val blockState = rememberUpdatedState(block)
pointerInput(Unit) {
while (currentCoroutineContext().isActive) {
awaitPointerEventScope {
awaitPointerEvent(PointerEventPass.Initial)
blockState.value()
}
}
}
}
/**
* The home screen displaying just the article feed.
*/
@Composable
fun HomeFeedScreen(
uiState: HomeUiState,
showTopAppBar: Boolean,
onToggleFavorite: (String) -> Unit,
onSelectPost: (String) -> Unit,
onRefreshPosts: () -> Unit,
onErrorDismiss: (Long) -> Unit,
openDrawer: () -> Unit,
homeListLazyListState: LazyListState,
snackbarHostState: SnackbarHostState,
modifier: Modifier = Modifier,
searchInput: String = "",
onSearchInputChanged: (String) -> Unit,
) {
HomeScreenWithList(
uiState = uiState,
showTopAppBar = showTopAppBar,
onRefreshPosts = onRefreshPosts,
onErrorDismiss = onErrorDismiss,
openDrawer = openDrawer,
snackbarHostState = snackbarHostState,
modifier = modifier
) { hasPostsUiState, contentModifier ->
PostList(
postsFeed = hasPostsUiState.postsFeed,
favorites = hasPostsUiState.favorites,
showExpandedSearch = !showTopAppBar,
onArticleTapped = onSelectPost,
onToggleFavorite = onToggleFavorite,
contentPadding = rememberContentPaddingForScreen(
additionalTop = if (showTopAppBar) 0.dp else 8.dp,
excludeTop = showTopAppBar
),
modifier = contentModifier,
state = homeListLazyListState,
searchInput = searchInput,
onSearchInputChanged = onSearchInputChanged
)
}
}
/**
* A display of the home screen that has the list.
*
* This sets up the scaffold with the top app bar, and surrounds the [hasPostsContent] with refresh,
* loading and error handling.
*
* This helper functions exists because [HomeFeedWithArticleDetailsScreen] and [HomeFeedScreen] are
* extremely similar, except for the rendered content when there are posts to display.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun HomeScreenWithList(
uiState: HomeUiState,
showTopAppBar: Boolean,
onRefreshPosts: () -> Unit,
onErrorDismiss: (Long) -> Unit,
openDrawer: () -> Unit,
snackbarHostState: SnackbarHostState,
modifier: Modifier = Modifier,
hasPostsContent: @Composable (
uiState: HomeUiState.HasPosts,
modifier: Modifier
) -> Unit
) {
val topAppBarState = rememberTopAppBarState()
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(topAppBarState)
Scaffold(
snackbarHost = { JetnewsSnackbarHost(hostState = snackbarHostState) },
topBar = {
if (showTopAppBar) {
HomeTopAppBar(
openDrawer = openDrawer,
topAppBarState = topAppBarState
)
}
},
modifier = modifier
) { innerPadding ->
val contentModifier = Modifier
.padding(innerPadding)
.nestedScroll(scrollBehavior.nestedScrollConnection)
LoadingContent(
empty = when (uiState) {
is HomeUiState.HasPosts -> false
is HomeUiState.NoPosts -> uiState.isLoading
},
emptyContent = { FullScreenLoading() },
loading = uiState.isLoading,
onRefresh = onRefreshPosts,
content = {
when (uiState) {
is HomeUiState.HasPosts -> hasPostsContent(uiState, contentModifier)
is HomeUiState.NoPosts -> {
if (uiState.errorMessages.isEmpty()) {
// if there are no posts, and no error, let the user refresh manually
TextButton(
onClick = onRefreshPosts,
modifier.fillMaxSize()
) {
Text(
stringResource(id = R.string.home_tap_to_load_content),
textAlign = TextAlign.Center
)
}
} else {
// there's currently an error showing, don't show any content
Box(contentModifier.fillMaxSize()) { /* empty screen */ }
}
}
}
}
)
}
// Process one error message at a time and show them as Snackbars in the UI
if (uiState.errorMessages.isNotEmpty()) {
// Remember the errorMessage to display on the screen
val errorMessage = remember(uiState) { uiState.errorMessages[0] }
// Get the text to show on the message from resources
val errorMessageText: String = stringResource(errorMessage.messageId)
val retryMessageText = stringResource(id = R.string.retry)
// If onRefreshPosts or onErrorDismiss change while the LaunchedEffect is running,
// don't restart the effect and use the latest lambda values.
val onRefreshPostsState by rememberUpdatedState(onRefreshPosts)
val onErrorDismissState by rememberUpdatedState(onErrorDismiss)
// Effect running in a coroutine that displays the Snackbar on the screen
// If there's a change to errorMessageText, retryMessageText or snackbarHostState,
// the previous effect will be cancelled and a new one will start with the new values
LaunchedEffect(errorMessageText, retryMessageText, snackbarHostState) {
val snackbarResult = snackbarHostState.showSnackbar(
message = errorMessageText,
actionLabel = retryMessageText
)
if (snackbarResult == SnackbarResult.ActionPerformed) {
onRefreshPostsState()
}
// Once the message is displayed and dismissed, notify the ViewModel
onErrorDismissState(errorMessage.id)
}
}
}
/**
* Display an initial empty state or swipe to refresh content.
*
* @param empty (state) when true, display [emptyContent]
* @param emptyContent (slot) the content to display for the empty state
* @param loading (state) when true, display a loading spinner over [content]
* @param onRefresh (event) event to request refresh
* @param content (slot) the main content to show
*/
@Composable
private fun LoadingContent(
empty: Boolean,
emptyContent: @Composable () -> Unit,
loading: Boolean,
onRefresh: () -> Unit,
content: @Composable () -> Unit
) {
if (empty) {
emptyContent()
} else {
SwipeRefresh(
state = rememberSwipeRefreshState(loading),
onRefresh = onRefresh,
content = content,
)
}
}
/**
* Display a feed of posts.
*
* When a post is clicked on, [onArticleTapped] will be called.
*
* @param postsFeed (state) the feed to display
* @param onArticleTapped (event) request navigation to Article screen
* @param modifier modifier for the root element
*/
@Composable
private fun PostList(
postsFeed: PostsFeed,
favorites: Set<String>,
showExpandedSearch: Boolean,
onArticleTapped: (postId: String) -> Unit,
onToggleFavorite: (String) -> Unit,
modifier: Modifier = Modifier,
contentPadding: PaddingValues = PaddingValues(0.dp),
state: LazyListState = rememberLazyListState(),
searchInput: String = "",
onSearchInputChanged: (String) -> Unit,
) {
LazyColumn(
modifier = modifier,
contentPadding = contentPadding,
state = state
) {
if (showExpandedSearch) {
item {
HomeSearch(
Modifier.padding(horizontal = 16.dp),
searchInput = searchInput,
onSearchInputChanged = onSearchInputChanged,
)
}
}
item { PostListTopSection(postsFeed.highlightedPost, onArticleTapped) }
if (postsFeed.recommendedPosts.isNotEmpty()) {
item {
PostListSimpleSection(
postsFeed.recommendedPosts,
onArticleTapped,
favorites,
onToggleFavorite
)
}
}
if (postsFeed.popularPosts.isNotEmpty() && !showExpandedSearch) {
item {
PostListPopularSection(
postsFeed.popularPosts, onArticleTapped
)
}
}
if (postsFeed.recentPosts.isNotEmpty()) {
item { PostListHistorySection(postsFeed.recentPosts, onArticleTapped) }
}
}
}
/**
* Full screen circular progress indicator
*/
@Composable
private fun FullScreenLoading() {
Box(
modifier = Modifier
.fillMaxSize()
.wrapContentSize(Alignment.Center)
) {
CircularProgressIndicator()
}
}
/**
* Top section of [PostList]
*
* @param post (state) highlighted post to display
* @param navigateToArticle (event) request navigation to Article screen
*/
@Composable
private fun PostListTopSection(post: Post, navigateToArticle: (String) -> Unit) {
Text(
modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp),
text = stringResource(id = R.string.home_top_section_title),
style = MaterialTheme.typography.titleMedium
)
PostCardTop(
post = post,
modifier = Modifier.clickable(onClick = { navigateToArticle(post.id) })
)
PostListDivider()
}
/**
* Full-width list items for [PostList]
*
* @param posts (state) to display
* @param navigateToArticle (event) request navigation to Article screen
*/
@Composable
private fun PostListSimpleSection(
posts: List<Post>,
navigateToArticle: (String) -> Unit,
favorites: Set<String>,
onToggleFavorite: (String) -> Unit
) {
Column {
posts.forEach { post ->
PostCardSimple(
post = post,
navigateToArticle = navigateToArticle,
isFavorite = favorites.contains(post.id),
onToggleFavorite = { onToggleFavorite(post.id) }
)
PostListDivider()
}
}
}
/**
* Horizontal scrolling cards for [PostList]
*
* @param posts (state) to display
* @param navigateToArticle (event) request navigation to Article screen
*/
@Composable
private fun PostListPopularSection(
posts: List<Post>,
navigateToArticle: (String) -> Unit
) {
Column {
Text(
modifier = Modifier.padding(16.dp),
text = stringResource(id = R.string.home_popular_section_title),
style = MaterialTheme.typography.titleLarge
)
LazyRow(
contentPadding = PaddingValues(horizontal = 16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(posts) { post ->
PostCardPopular(
post,
navigateToArticle
)
}
}
Spacer(Modifier.height(16.dp))
PostListDivider()
}
}
/**
* Full-width list items that display "based on your history" for [PostList]
*
* @param posts (state) to display
* @param navigateToArticle (event) request navigation to Article screen
*/
@Composable
private fun PostListHistorySection(
posts: List<Post>,
navigateToArticle: (String) -> Unit
) {
Column {
posts.forEach { post ->
PostCardHistory(post, navigateToArticle)
PostListDivider()
}
}
}
/**
* Full-width divider with padding for [PostList]
*/
@Composable
private fun PostListDivider() {
Divider(
modifier = Modifier.padding(horizontal = 14.dp),
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f)
)
}
/**
* Expanded search UI - includes support for enter-to-send on the search field
*/
@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
private fun HomeSearch(
modifier: Modifier = Modifier,
searchInput: String = "",
onSearchInputChanged: (String) -> Unit,
) {
val context = LocalContext.current
val focusManager = LocalFocusManager.current
val keyboardController = LocalSoftwareKeyboardController.current
OutlinedTextField(
value = searchInput,
onValueChange = onSearchInputChanged,
placeholder = { Text(stringResource(R.string.home_search)) },
leadingIcon = { Icon(Icons.Filled.Search, null) },
modifier = modifier
.fillMaxWidth()
.interceptKey(Key.Enter) {
// submit a search query when Enter is pressed
submitSearch(onSearchInputChanged, context)
keyboardController?.hide()
focusManager.clearFocus(force = true)
},
singleLine = true,
// keyboardOptions change the newline key to a search key on the soft keyboard
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
// keyboardActions submits the search query when the search key is pressed
keyboardActions = KeyboardActions(
onSearch = {
submitSearch(onSearchInputChanged, context)
keyboardController?.hide()
}
)
)
}
/**
* Stub helper function to submit a user's search query
*/
private fun submitSearch(
onSearchInputChanged: (String) -> Unit,
context: Context
) {
onSearchInputChanged("")
Toast.makeText(
context,
"Search is not yet implemented",
Toast.LENGTH_SHORT
).show()
}
/**
* Top bar for a Post when displayed next to the Home feed
*/
@Composable
private fun PostTopBar(
isFavorite: Boolean,
onToggleFavorite: () -> Unit,
onSharePost: () -> Unit,
modifier: Modifier = Modifier
) {
Surface(
shape = RoundedCornerShape(8.dp),
border = BorderStroke(Dp.Hairline, MaterialTheme.colorScheme.onSurface.copy(alpha = .6f)),
modifier = modifier.padding(end = 16.dp)
) {
Row(Modifier.padding(horizontal = 8.dp)) {
FavoriteButton(onClick = { /* Functionality not available */ })
BookmarkButton(isBookmarked = isFavorite, onClick = onToggleFavorite)
ShareButton(onClick = onSharePost)
TextSettingsButton(onClick = { /* Functionality not available */ })
}
}
}
/**
* TopAppBar for the Home screen
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun HomeTopAppBar(
openDrawer: () -> Unit,
modifier: Modifier = Modifier,
topAppBarState: TopAppBarState = rememberTopAppBarState(),
scrollBehavior: TopAppBarScrollBehavior? =
TopAppBarDefaults.enterAlwaysScrollBehavior(topAppBarState)
) {
val context = LocalContext.current
val title = stringResource(id = R.string.app_name)
CenterAlignedTopAppBar(
title = {
Image(
painter = painterResource(R.drawable.ic_jetnews_wordmark),
contentDescription = title,
contentScale = ContentScale.Inside,
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onBackground),
modifier = Modifier.fillMaxWidth()
)
},
navigationIcon = {
IconButton(onClick = openDrawer) {
Icon(
painter = painterResource(R.drawable.ic_jetnews_logo),
contentDescription = stringResource(R.string.cd_open_navigation_drawer),
tint = MaterialTheme.colorScheme.primary
)
}
},
actions = {
IconButton(onClick = {
Toast.makeText(
context,
"Search is not yet implemented in this configuration",
Toast.LENGTH_LONG
).show()
}) {
Icon(
imageVector = Icons.Filled.Search,
contentDescription = stringResource(R.string.cd_search)
)
}
},
scrollBehavior = scrollBehavior,
modifier = modifier
)
}
@Preview("Home list drawer screen")
@Preview("Home list drawer screen (dark)", uiMode = UI_MODE_NIGHT_YES)
@Preview("Home list drawer screen (big font)", fontScale = 1.5f)
@Composable
fun PreviewHomeListDrawerScreen() {
val postsFeed = runBlocking {
(BlockingFakePostsRepository().getPostsFeed() as Result.Success).data
}
JetnewsTheme {
HomeFeedScreen(
uiState = HomeUiState.HasPosts(
postsFeed = postsFeed,
selectedPost = postsFeed.highlightedPost,
isArticleOpen = false,
favorites = emptySet(),
isLoading = false,
errorMessages = emptyList(),
searchInput = ""
),
showTopAppBar = false,
onToggleFavorite = {},
onSelectPost = {},
onRefreshPosts = {},
onErrorDismiss = {},
openDrawer = {},
homeListLazyListState = rememberLazyListState(),
snackbarHostState = SnackbarHostState(),
onSearchInputChanged = {}
)
}
}
@Preview("Home list navrail screen", device = Devices.NEXUS_7_2013)
@Preview(
"Home list navrail screen (dark)",
uiMode = UI_MODE_NIGHT_YES,
device = Devices.NEXUS_7_2013
)
@Preview("Home list navrail screen (big font)", fontScale = 1.5f, device = Devices.NEXUS_7_2013)
@Composable
fun PreviewHomeListNavRailScreen() {
val postsFeed = runBlocking {
(BlockingFakePostsRepository().getPostsFeed() as Result.Success).data
}
JetnewsTheme {
HomeFeedScreen(
uiState = HomeUiState.HasPosts(
postsFeed = postsFeed,
selectedPost = postsFeed.highlightedPost,
isArticleOpen = false,
favorites = emptySet(),
isLoading = false,
errorMessages = emptyList(),
searchInput = ""
),
showTopAppBar = true,
onToggleFavorite = {},
onSelectPost = {},
onRefreshPosts = {},
onErrorDismiss = {},
openDrawer = {},
homeListLazyListState = rememberLazyListState(),
snackbarHostState = SnackbarHostState(),
onSearchInputChanged = {}
)
}
}
@Preview("Home list detail screen", device = Devices.PIXEL_C)
@Preview("Home list detail screen (dark)", uiMode = UI_MODE_NIGHT_YES, device = Devices.PIXEL_C)
@Preview("Home list detail screen (big font)", fontScale = 1.5f, device = Devices.PIXEL_C)
@Composable
fun PreviewHomeListDetailScreen() {
val postsFeed = runBlocking {
(BlockingFakePostsRepository().getPostsFeed() as Result.Success).data
}
JetnewsTheme {
HomeFeedWithArticleDetailsScreen(
uiState = HomeUiState.HasPosts(
postsFeed = postsFeed,
selectedPost = postsFeed.highlightedPost,
isArticleOpen = false,
favorites = emptySet(),
isLoading = false,
errorMessages = emptyList(),
searchInput = ""
),
showTopAppBar = true,
onToggleFavorite = {},
onSelectPost = {},
onRefreshPosts = {},
onErrorDismiss = {},
onInteractWithList = {},
onInteractWithDetail = {},
openDrawer = {},
homeListLazyListState = rememberLazyListState(),
articleDetailLazyListStates = postsFeed.allPosts.associate { post ->
key(post.id) {
post.id to rememberLazyListState()
}
},
snackbarHostState = SnackbarHostState(),
onSearchInputChanged = {}
)
}
}이게 HomeScreen인데
미리보기로 보면
이 화면임 아마 이렇게 Screen을 만들고 안에 있는 요소들은 각각 재활용 가능한게 컴포넌트로 만들어주면될듯
그리고 각각의 Screen을 navgraph로 네비게이션 처리하고
MainActivity에 때려넣으면 될듯
나중에 우리 앱에 시도해보고 추가로 포스팅 작성하겟삼 끝