Feature: Navigation Bar

This commit is contained in:
ArtemEmelyanov 2023-09-27 16:58:47 +04:00
parent cb8684b5d3
commit f4b684e093
11 changed files with 294 additions and 49 deletions

View File

@ -5,12 +5,12 @@ plugins {
android {
namespace = "com.example.android_programming"
compileSdk = 33
compileSdk = 34
defaultConfig {
applicationId = "com.example.android_programming"
minSdk = 24
targetSdk = 33
targetSdk = 34
versionCode = 1
versionName = "1.0"
@ -51,14 +51,14 @@ android {
dependencies {
implementation("androidx.core:core-ktx:1.9.0")
implementation("androidx.core:core-ktx:1.12.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
implementation("androidx.activity:activity-compose:1.7.2")
implementation(platform("androidx.compose:compose-bom:2023.03.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
implementation("androidx.compose.material:material")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
@ -66,4 +66,6 @@ dependencies {
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
implementation("androidx.navigation:navigation-compose:2.7.3")
}

View File

@ -3,44 +3,13 @@ package com.example.android_programming
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.android_programming.ui.theme.AndroidProgrammingTheme
import com.example.android_programming.Navigation.Navigate
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AndroidProgrammingTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting("Android")
}
}
Navigate()
}
}
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
text = "Hello $name!",
modifier = modifier
)
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
AndroidProgrammingTheme {
Greeting("Android")
}
}

View File

@ -0,0 +1,31 @@
package com.example.android_programming.Navigation
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import com.example.android_programming.Screens.HomeScreen
import com.example.android_programming.Screens.LikeScreen
import com.example.android_programming.Screens.OrderScreen
import com.example.android_programming.Screens.ProfileScreen
@Composable
fun NavController(navController: NavHostController){
NavHost(
navController = navController,
startDestination = NavItem.Home.route
){
composable(NavItem.Home.route){
HomeScreen()
}
composable(NavItem.Like.route){
LikeScreen()
}
composable(NavItem.Order.route){
OrderScreen()
}
composable(NavItem.Profile.route){
ProfileScreen()
}
}
}

View File

@ -0,0 +1,15 @@
package com.example.android_programming.Navigation
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.ui.graphics.vector.ImageVector
sealed class NavItem (val route: String, val icon: ImageVector){
object Home : NavItem("home", Icons.Default.Home)
object Like : NavItem("like", Icons.Default.Favorite)
object Order : NavItem("order", Icons.Default.ShoppingCart)
object Profile : NavItem("profile", Icons.Default.Person)
}

View File

@ -0,0 +1,82 @@
package com.example.android_programming.Navigation
import android.annotation.SuppressLint
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun Navigate(){
val navController = rememberNavController()
val listItem = listOf(
NavItem.Home,
NavItem.Like,
NavItem.Order,
NavItem.Profile,
)
Scaffold(bottomBar = {
BottomNavigation(
backgroundColor = Color.White
) {
val navBackStackEntry = navController.currentBackStackEntryAsState()
val currentState = navBackStackEntry.value
listItem.forEach { it ->
val isSelected = currentState?.destination?.route == it.route
BottomNavigationItem(
selected = isSelected,
onClick = {
if(!isSelected){
navController.graph.startDestinationRoute?.let {
navController.popBackStack(it, inclusive = true)
}
navController.navigate(it.route){
launchSingleTop
}
}
navController.navigate(it.route)
},
icon = {
val iconModifier = if (isSelected) {
Modifier
.background(color = Color.LightGray, shape = CircleShape)
.padding(8.dp)
} else {
Modifier
}
Icon(
imageVector = it.icon,
contentDescription = null,
modifier = iconModifier.then(Modifier.size(24.dp))
)
}
)
}
}
}) {
NavController(navController = navController)
}
}
@Composable
@Preview
fun NavigatePreview(){
Navigate()
}

View File

@ -0,0 +1,37 @@
package com.example.android_programming.Screens
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun HomeScreen() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = "Home",
fontSize = MaterialTheme.typography.h3.fontSize,
fontWeight = FontWeight.Bold,
color = Color.Black
)
}
}
@Composable
@Preview
fun HomeScreenPreview(){
HomeScreen()
}

View File

@ -0,0 +1,36 @@
package com.example.android_programming.Screens;
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable;
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun LikeScreen() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = "Like",
fontSize = MaterialTheme.typography.h3.fontSize,
fontWeight = FontWeight.Bold,
color = Color.Black
)
}
}
@Composable
@Preview
fun LikeScreenPreview(){
LikeScreen()
}

View File

@ -0,0 +1,36 @@
package com.example.android_programming.Screens
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun OrderScreen() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = "Order",
fontSize = MaterialTheme.typography.h3.fontSize,
fontWeight = FontWeight.Bold,
color = Color.Black
)
}
}
@Composable
@Preview
fun OrderScreenPreview(){
OrderScreen()
}

View File

@ -0,0 +1,36 @@
package com.example.android_programming.Screens;
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable;
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun ProfileScreen() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
contentAlignment = Alignment.Center
) {
Text(
text = "Profile",
fontSize = MaterialTheme.typography.h3.fontSize,
fontWeight = FontWeight.Bold,
color = Color.Black
)
}
}
@Composable
@Preview
fun ProfileScreenPreview(){
ProfileScreen()
}

View File

@ -1,13 +1,9 @@
/*
package com.example.android_programming.ui.theme
import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.toArgb
@ -26,7 +22,8 @@ private val LightColorScheme = lightColorScheme(
secondary = PurpleGrey40,
tertiary = Pink40
/* Other default colors to override
*/
/* Other default colors to override
background = Color(0xFFFFFBFE),
surface = Color(0xFFFFFBFE),
onPrimary = Color.White,
@ -34,7 +31,8 @@ private val LightColorScheme = lightColorScheme(
onTertiary = Color.White,
onBackground = Color(0xFF1C1B1F),
onSurface = Color(0xFF1C1B1F),
*/
*//*
)
@Composable
@ -67,4 +65,4 @@ fun AndroidProgrammingTheme(
typography = Typography,
content = content
)
}
}*/

View File

@ -1,6 +1,7 @@
/*
package com.example.android_programming.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
@ -15,7 +16,8 @@ val Typography = Typography(
lineHeight = 24.sp,
letterSpacing = 0.5.sp
)
/* Other default text styles to override
*/
/* Other default text styles to override
titleLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
@ -30,5 +32,6 @@ val Typography = Typography(
lineHeight = 16.sp,
letterSpacing = 0.5.sp
)
*/
)
*//*
)*/