Jetpack Compose: BottomNavigation()

Зависимость

implementation "androidx.navigation:navigation-compose:2.6.0-alpha04"

MainScreen.kt

import android.annotation.SuppressLint
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.navigation.compose.rememberNavController

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun MainScreen() {
   val navController = rememberNavController()
    Scaffold(
        bottomBar = {
            BottomNavigation(navController = navController)
        }
    ) {
        NavGraph(navHostController = navController)
    }
}

BottomItem.kt

import com.example.bottomnavigationlesson.R

sealed class BottomItem(val title: String, val iconId: Int, val route: String){
    object Screen1: BottomItem("Screen 1", R.drawable.icon, "screen_1")
    object Screen2: BottomItem("Screen 2", R.drawable.icon, "screen_2")
    object Screen3: BottomItem("Screen 3", R.drawable.icon, "screen_3")
    object Screen4: BottomItem("Screen 4", R.drawable.icon, "screen_4")
}

Screens.kt

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign


@Composable
fun Screen1() {
    Text(
        modifier = Modifier.fillMaxSize().wrapContentHeight(),
        text = "Screen 1",
        textAlign = TextAlign.Center
    )
}
@Composable
fun Screen2() {
    Text(
        modifier = Modifier.fillMaxSize().wrapContentHeight(),
        text = "Screen 2",
        textAlign = TextAlign.Center
    )
}
@Composable
fun Screen3() {
    Text(
        modifier = Modifier.fillMaxSize().wrapContentHeight(),
        text = "Screen 3",
        textAlign = TextAlign.Center
    )
}
@Composable
fun Screen4() {
    Text(
        modifier = Modifier.fillMaxSize().wrapContentHeight(),
        text = "Screen 4",
        textAlign = TextAlign.Center
    )
}

NavGraph.kt

import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable

@Composable
fun NavGraph(
    navHostController: NavHostController
) {
    NavHost(navController = navHostController, startDestination = "screen_1"){
        composable("screen_1"){
            Screen1()
        }
        composable("screen_2"){
            Screen2()
        }
        composable("screen_3"){
            Screen3()
        }
        composable("screen_4"){
            Screen4()
        }
    }
}

BottomNavigation.kt

import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.currentBackStackEntryAsState

@Composable
fun BottomNavigation(
    navController: NavController
) {
    val listItems = listOf(
        BottomItem.Screen1,
        BottomItem.Screen2,
        BottomItem.Screen3,
        BottomItem.Screen4
    )
    androidx.compose.material.BottomNavigation(
        backgroundColor = Color.White
    ) {
       val backStackEntry by navController.currentBackStackEntryAsState()
       val currentRoute = backStackEntry?.destination?.route
       listItems.forEach { item ->
           BottomNavigationItem(
               selected = currentRoute == item.route,
               onClick = {
                  navController.navigate(item.route)
               },
               icon = {
                  Icon(
                      painter = painterResource(id = item.iconId),
                      contentDescription = "Icon"
                  )
               },
               label = {
                   Text(
                       text = item.title,
                       fontSize = 9.sp
                   )
               },
               selectedContentColor = Color.Red,
               unselectedContentColor = Color.Gray
           )
       }
    }
}

MainActivity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.bottomnavigationlesson.botton_navigation.MainScreen
import com.example.bottomnavigationlesson.ui.theme.BottomNavigationLessonTheme

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

themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.BottomNavigationLesson" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/red</item>
    </style>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="red">#D30000</color>
</resources>

3 комментария для “Jetpack Compose: BottomNavigation()”

  1. Сергей

    Привет Сергей и твои гости!
    Постоянно выходят ошибки в BottomNavigation.kt
    Сделал всё так как было в видео пользуюсь последней версией Андроид Студио в этих местах
    как это исправить?
    [url=https://ibb.co/2FHbLb6][img]https://i.ibb.co/mRgxYxB/error.jpg[/img][/url]

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован.