[Jetpack Compose] BottomNavigation

/* 본 게시물은 ' ' 의 내용을 토대로 작성되었습니다. */

참고 자료

[URL] : https://github.com/Gurupreet/ComposeCookBook

---

실행 결과

MainActivity

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import com.example.composecookbookbasic.ui.screen.HomeScreen
import com.example.composecookbookbasic.ui.utils.TestTags

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
                MainAppContent()
            }
        }
    }

@Composable
fun MainAppContent(){
    //초깃값으로 Home으로 설정
    val homeScreenState = remember { mutableStateOf(BottomNavType.Home)}

    Column() {
        HomeScreenContent(
            homeScreen = homeScreenState.value,
            modifier = Modifier.weight(1f)
        )
        //BottomNavigationContent
        BottomNavContent(homeScreenState = homeScreenState, modifier = Modifier.background(Color(R.color.white)))
    }
}

@Composable
fun HomeScreenContent(
    homeScreen: BottomNavType,
    modifier: Modifier
){
    Column(modifier = modifier) {
        Crossfade(homeScreen) { screen ->
            Surface(color = Color(R.color.white)) {
                HomeScreen(screen)
            }
        }



    }
}

@Composable
fun BottomNavContent(
    modifier: Modifier = Modifier,
    homeScreenState: MutableState<BottomNavType>
){
    BottomNavigation(modifier = modifier){
        BottomNavigationItem(
            icon = {
                BottomNavImageIcon(painter = painterResource(id = R.drawable.home))
            },
            selected = homeScreenState.value == BottomNavType.Home,
            onClick = { homeScreenState.value = BottomNavType.Home},
            label = { Text(text = stringResource(id = R.string.navigation_item_home))},
            modifier = Modifier.testTag(TestTags.BOTTOM_NAV_HOME_TEST_TAG)
        )
        BottomNavigationItem(
            icon = {
                BottomNavImageIcon(painter = painterResource(id = R.drawable.home))
            },
            selected = homeScreenState.value == BottomNavType.B,
            onClick = { homeScreenState.value = BottomNavType.B},
            label = { Text(text = stringResource(id = R.string.navigation_b))},
            modifier = Modifier.testTag(TestTags.BOTTOM_NAV_HOME_TEST_TAG)
        )
        BottomNavigationItem(
            icon = {
                BottomNavImageIcon(painter = painterResource(id = R.drawable.home))
            },
            selected = homeScreenState.value == BottomNavType.C,
            onClick = { homeScreenState.value = BottomNavType.C},
            label = { Text(text = stringResource(id = R.string.navigation_c))},
            modifier = Modifier.testTag(TestTags.BOTTOM_NAV_HOME_TEST_TAG)
        )
        BottomNavigationItem(
            icon = {
                BottomNavImageIcon(painter = painterResource(id = R.drawable.home))
            },
            selected = homeScreenState.value == BottomNavType.D,
            onClick = { homeScreenState.value = BottomNavType.D},
            label = { Text(text = stringResource(id = R.string.navigation_d))},
            modifier = Modifier.testTag(TestTags.BOTTOM_NAV_HOME_TEST_TAG)
        )

    }
}

@Composable
fun BottomNavImageIcon(painter: Painter) {
    Icon(
        painter = painter,
        contentDescription = null
    )
}

 

HomeScreen

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.composecookbookbasic.BottomNavType

import com.example.composecookbookbasic.ui.utils.TestTags

@Composable
fun HomeScreen(homeScreen: BottomNavType) {
    Scaffold(
        modifier = Modifier.testTag(TestTags.HOME_SCREEN_ROOT),
        topBar = {
            TopAppBar(
                title = { Text(text = "MainActivity") },
                elevation = 18.dp
                // actions -> icon
            )
        },
        content = {
            HomeScreenContent(homeScreen)
        }
    )

}

@Composable
fun HomeScreenContent(homeScreen: BottomNavType){
    Box(
        modifier = Modifier.fillMaxSize(), Alignment.Center
    ){
        when(homeScreen){
            BottomNavType.Home -> Text( text = "A", fontSize = 30.sp, fontWeight = FontWeight.Bold)
            BottomNavType.B -> Text( text = "B", fontSize = 30.sp, fontWeight = FontWeight.Bold)
            BottomNavType.C -> Text( text = "C", fontSize = 30.sp, fontWeight = FontWeight.Bold)
            else -> Text( text = "D", fontSize = 30.sp, fontWeight = FontWeight.Bold)
        }

    }
}

 

 

BottomNavigation 은 Compose UI에서 제공된다. BottomNavigation의 핵심은 homeScreenState(버튼을 클릭했을 때 상태값 변경)이다.