Skip to content

Commit

Permalink
Design : ScrollableTabRow 컴포넌트 작성
Browse files Browse the repository at this point in the history
  • Loading branch information
DongChyeon committed May 20, 2024
1 parent 4e4ca25 commit ed64ebe
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
package store.newsbriefing.app.core.designsystem

import androidx.compose.foundation.interaction.Interaction
import androidx.compose.foundation.interaction.MutableInteractionSource
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.emptyFlow

class NoRippleInteractionSource : MutableInteractionSource {

override val interactions: Flow<Interaction> = emptyFlow()

override suspend fun emit(interaction: Interaction) {}

override fun tryEmit(interaction: Interaction): Boolean = true

}
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ fun NavGraphBuilder.homeScreen(
route = homeRoute
) {
HomeRoute(
showSnackbar = showSnackbar
showSnackbar = showSnackbar,
navigateToBookmarkRoute = { },
navigateToSettingRoute = { }
)
}
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,119 @@
package store.newsbriefing.app.feature.home

import androidx.annotation.DrawableRes
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
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.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TabRow
import androidx.compose.material3.TabRowDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.navigation.NavHostController
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import store.newsbriefing.app.core.designsystem.theme.BriefingTheme

@Composable
internal fun HomeRoute(
showSnackbar: (String) -> Unit
showSnackbar: (String) -> Unit,
navigateToBookmarkRoute: () -> Unit,
navigateToSettingRoute: () -> Unit
) {
HomeScreen(
showSnackbar = showSnackbar
showSnackbar = showSnackbar,
navigateToBookmarkRoute = navigateToBookmarkRoute,
navigateToSettingRoute = navigateToSettingRoute
)

}

@Composable
@Preview
internal fun HomeScreenPreview(){
BriefingTheme {
HomeScreen()
}
}

val topics = listOf("사회", "과학","글로벌", "경제")

@OptIn(ExperimentalFoundationApi::class)
@Composable
internal fun HomeScreen(
showSnackbar: (String) -> Unit
showSnackbar: (String) -> Unit = { },
navigateToBookmarkRoute: () -> Unit = { },
navigateToSettingRoute: () -> Unit = { }
) {
Column(
modifier = Modifier
.fillMaxSize()
.background(color = BriefingTheme.colorScheme.BackgroundWhite),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 18.dp, end = 28.dp, top = 28.dp, bottom = 28.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "Briefing",
style = BriefingTheme.typography.SubtitleStyleBold,
color = BriefingTheme.colorScheme.PrimaryBlue
)

Row(
modifier = Modifier.align(Alignment.Bottom),
horizontalArrangement = Arrangement.spacedBy(21.dp)
) {
ActionBarButton(iconDrawableRes = R.drawable.ic_action_bar_bookmark,) {
navigateToBookmarkRoute()
}

ActionBarButton(iconDrawableRes = R.drawable.ic_action_bar_setting) {
navigateToSettingRoute()
}
}
}

val pagerState = rememberPagerState(pageCount = { topics.size })
val scope = rememberCoroutineScope()

}
}

@Composable
private fun ActionBarButton(
@DrawableRes iconDrawableRes : Int,
onClick: () -> Unit,
) {
Box(
modifier = Modifier
.size(24.dp)
.clickable { onClick() },
contentAlignment = Alignment.BottomCenter
) {
Icon(
painter = painterResource(id = iconDrawableRes),
tint = Color.Unspecified,
contentDescription = null
)
}
}

0 comments on commit ed64ebe

Please sign in to comment.