Jetpack Compose - Bottom Navigation Bar로 움직이기

앱 바  |  Jetpack Compose  |  Android Developers

 

앱 바  |  Jetpack Compose  |  Android Developers

Indication 및 Ripple API로 이전  |  Jetpack Compose  |  Android Developers

Indication 및 Ripple API로 이전  |  Jetpack Compose  |  Android Developers

Compose를 사용한 탐색  |  Jetpack Compose  |  Android Developers

Compose를 사용한 탐색  |  Jetpack Compose  |  Android Developers

[Jetpack Compose] clickable 클릭 효과 커스텀 하게 설정하기 : Custom Indication 구현하기 — 조세영의 Kotlin World

[Jetpack Compose] clickable 클릭 효과 커스텀 하게 설정하기 : Custom Indication 구현하기

 

---

 

바텀 네비게이션 바를 사용하려면

앱수준의 build.gradle에서

dependencies {
    val nav_version = "2.7.7"

    implementation("androidx.navigation:navigation-compose:$nav_version")
}

추가 헤줘야 한다.

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Test1Theme {
                val navController = rememberNavController()
                NavHost(
                    navController = navController,
                    startDestination = "home") {
                    composable("home") {
                        BasicScreen(navController=navController,topAppBarTitle="homeScreen") {
                            HomeScreen(navController = navController)
                        }
                    }
                    composable("second") {
                        BasicScreen(navController=navController,topAppBarTitle="secondScreen") {
                            SecondScreen(navController = navController)
                        }
                    }
                    composable("third") {
                        BasicScreen(navController=navController,topAppBarTitle="thirdScreen") {
                            ThirdScreen(navController = navController)
                        }
                    }
                }

            }
        }
    }
}

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun BasicScreen(
    navController: NavController,
    topAppBarTitle: String,
    content:@Composable (NavController) -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    Scaffold(
        topBar = {
            TopAppBar(
                title = {Text(text =topAppBarTitle)},
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color.Gray,
                    titleContentColor = Color.Blue
                ))
        },
        content = {
            ScreenContent(navController = navController) {
                content(navController)
            }
        },
        bottomBar = {
            BottomAppBar(
                modifier = Modifier.background(Color.Red),
                contentPadding = PaddingValues(20.dp)
            ) {
                IconButton(
                    onClick = { navController.navigate("home") },
                    modifier = Modifier
                        .weight(1f)
                        .clickable(
                            interactionSource = interactionSource,
                            indication = rememberRipple(color = Color.Gray, radius = 24.dp),
                            onClick = { navController.navigate("home") }
                        ),
                    content = {
                        Icon(
                            imageVector = Icons.Default.Home,
                            contentDescription = "Home",
                            tint = if (isPressed) Color.Red else Color.Blue
                        )
                    }
                )
                IconButton(
                    onClick = { navController.navigate("second") },
                    modifier = Modifier
                        .weight(1f)
                        .clickable(
                            onClick = {
                                navController.navigate("second")
                            },
                            indication = rememberRipple(
                                color = Color.Gray,
                                radius = 24.dp
                            ),
                            interactionSource = interactionSource,

                            )
                ) {
                    Icon(
                        imageVector = Icons.Default.Menu,
                        contentDescription = "Menu",
                        tint = Color.Blue

                    )
                }
                IconButton(
                    onClick = { navController.navigate("third") },
                    modifier = Modifier
                        .weight(1f)
                        .clickable(
                            onClick = {
                                navController.navigate("third")
                            },
                            indication = rememberRipple(
                                color = Color.Gray,
                                radius = 24.dp,
                            ),
                            interactionSource = interactionSource
                        ),

                ) {
                    Icon(
                        imageVector = Icons.Default.Settings,
                        contentDescription = "Settings",
                        tint = Color.Blue
                    )
                }
            }
        }
    )
}
@Composable
private fun ScreenContent(navController: NavController, content: @Composable (NavController) -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        content(navController)
    }
}

@Composable
fun HomeScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text="첫 화면")
    }
}


@Composable
fun SecondScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text="두번째 화면")
    }
}


@Composable
fun ThirdScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text="세번째 화면")
    }
}

**Clickable()은 다음과 같이 구성되어있고

fun Modifier.clickable(
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
)
출처: https://kotlinworld.com/452?category=973269 [조세영의 Kotlin World:티스토리]

 

잘 쓰려면 interactionSoucre,indication,Onclick이 중요하다고 하는데

이번시간에는 원하는 효과를 못줬으니까 다음에 잘 써보도록 하겠다.

 

---

어제 쓰다가 컴퓨터 블루 스크린 떠서 종료했다..;

흠 그나저나 버튼 눌렸을 때 색깔이 바껴야 하는거 같은데 왜 안바뀌는지 모르겠다.

지난 시간에 버튼의 배치를 해결하는 방법은 weight를 주는것이었다.

그리고 하나 더 이상한건 공홈에는 ripple이 deprecated됐다고 나오는데 왜 쓸수 있는건지 모르겠다.

내 버전이 더 낮은건가...?

 

다음 시간에는 이번에 해결못한거 해결(버튼 클릭하면 색깔 바뀌게, 찾아보니 ripple 효과라고 하는거 같다),

Fragment 도입, 코드를 좀 나눠 보려고 한다.가독성이 꽝이다.

 

+ 가능하다면 MVVM 패턴 도입까지 해보겠다.