From 28bab67641a4fe0686763c1dc1e07e617331b59a Mon Sep 17 00:00:00 2001 From: Joren Date: Sun, 28 Apr 2024 00:29:28 +0200 Subject: [PATCH] Add NAVbar --- app/build.gradle.kts | 2 + .../main/java/com/ti/mobpo/MainActivity.kt | 17 +----- app/src/main/java/com/ti/mobpo/NavBar.kt | 55 +++++++++++++++++++ app/src/main/java/com/ti/mobpo/Navigation.kt | 44 +++++++++++++++ app/src/main/java/com/ti/mobpo/PokeSearch.kt | 15 +++-- app/src/main/java/com/ti/mobpo/Screen.kt | 7 +++ app/src/main/res/values/strings.xml | 1 + 7 files changed, 120 insertions(+), 21 deletions(-) create mode 100644 app/src/main/java/com/ti/mobpo/NavBar.kt create mode 100644 app/src/main/java/com/ti/mobpo/Navigation.kt create mode 100644 app/src/main/java/com/ti/mobpo/Screen.kt diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 820ca48..b5611c1 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -47,6 +47,7 @@ android { } dependencies { + val nav_version = "2.7.7" implementation(libs.androidx.core.ktx) implementation(libs.androidx.lifecycle.runtime.ktx) @@ -63,4 +64,5 @@ dependencies { androidTestImplementation(libs.androidx.ui.test.junit4) debugImplementation(libs.androidx.ui.tooling) debugImplementation(libs.androidx.ui.test.manifest) + implementation("androidx.navigation:navigation-compose:$nav_version") } \ No newline at end of file diff --git a/app/src/main/java/com/ti/mobpo/MainActivity.kt b/app/src/main/java/com/ti/mobpo/MainActivity.kt index 901ab5f..879604f 100644 --- a/app/src/main/java/com/ti/mobpo/MainActivity.kt +++ b/app/src/main/java/com/ti/mobpo/MainActivity.kt @@ -3,25 +3,10 @@ package com.ti.mobpo import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent -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.padding -import androidx.compose.foundation.layout.wrapContentSize -import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Surface -import androidx.compose.material3.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.res.stringResource -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import com.ti.mobpo.ui.theme.MobileSecurityTheme class MainActivity : ComponentActivity() { @@ -31,7 +16,7 @@ class MainActivity : ComponentActivity() { MobileSecurityTheme { // A surface container using the 'background' color from the theme Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) { - PokeSearchApp() + Navigation() } } } diff --git a/app/src/main/java/com/ti/mobpo/NavBar.kt b/app/src/main/java/com/ti/mobpo/NavBar.kt new file mode 100644 index 0000000..8385adf --- /dev/null +++ b/app/src/main/java/com/ti/mobpo/NavBar.kt @@ -0,0 +1,55 @@ +package com.ti.mobpo + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowBack +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Surface +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.navigation.NavController +import androidx.navigation.compose.rememberNavController + +@Composable +fun TopBar(navController: NavController, showBack: Boolean) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(16.dp) + .wrapContentHeight(Alignment.Top), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + if (showBack) { + IconButton(onClick = { navController.navigateUp() + println("Pressed") + }) { + Icon(Icons.Default.ArrowBack, contentDescription = "Back") + } + } else { + IconButton(onClick = {}) { + } + } + Text(text = stringResource(R.string.app_title), fontWeight = FontWeight.Bold) + } +} + +@Preview(showBackground = true) +@Composable +fun TopBarPreview() { + val navController = rememberNavController() + Surface { + TopBar(navController = navController, true) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/ti/mobpo/Navigation.kt b/app/src/main/java/com/ti/mobpo/Navigation.kt new file mode 100644 index 0000000..adb51a0 --- /dev/null +++ b/app/src/main/java/com/ti/mobpo/Navigation.kt @@ -0,0 +1,44 @@ +package com.ti.mobpo + +import androidx.compose.material3.Surface +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.tooling.preview.Preview +import androidx.navigation.compose.NavHost +import androidx.navigation.compose.composable +import androidx.navigation.compose.navigation +import androidx.navigation.compose.rememberNavController + + + + + +@Composable +fun Navigation() { + val navController = rememberNavController() + var showBackButton by remember { mutableStateOf(false) } + + NavHost(navController = navController, startDestination = "Home"){ + navigation(startDestination = Screen.PokeSearch.route, route = "Home"){ + composable(route = Screen.PokeSearch.route) { + TopBar(navController = navController, showBackButton) + PokeSearch(navController = navController) { + showBackButton = true + } + } + } + } +} + +@Preview(showBackground = true) +@Composable +fun NavigationPreview() { + val navController = rememberNavController() + Surface { + TopBar(navController = navController, false) + PokeSearch(navController = navController){} + } +} \ No newline at end of file diff --git a/app/src/main/java/com/ti/mobpo/PokeSearch.kt b/app/src/main/java/com/ti/mobpo/PokeSearch.kt index 6b62bad..fc3bd3b 100644 --- a/app/src/main/java/com/ti/mobpo/PokeSearch.kt +++ b/app/src/main/java/com/ti/mobpo/PokeSearch.kt @@ -22,14 +22,16 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.navigation.NavController +import androidx.navigation.Navigation +import androidx.navigation.compose.rememberNavController @Composable -fun PokeSearch(modifier: Modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopCenter)) { +fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) { var value by remember { mutableStateOf("") } - Row( - modifier = modifier, + modifier = Modifier.fillMaxSize().wrapContentSize(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center ) { @@ -40,7 +42,9 @@ fun PokeSearch(modifier: Modifier = Modifier.fillMaxSize().wrapContentSize(Align modifier = Modifier.weight(1f).padding(horizontal = 16.dp, vertical = 8.dp) ) Button( - onClick = { /*TODO*/ }, + onClick = { + onButtonPressed() + }, modifier = Modifier.padding(start = 8.dp) ) { Text(stringResource(R.string.input_search_button)) @@ -50,5 +54,6 @@ fun PokeSearch(modifier: Modifier = Modifier.fillMaxSize().wrapContentSize(Align @Preview(showBackground = true) @Composable fun PokeSearchApp(){ - PokeSearch() + val navController = rememberNavController() + PokeSearch(navController = navController){} } \ No newline at end of file diff --git a/app/src/main/java/com/ti/mobpo/Screen.kt b/app/src/main/java/com/ti/mobpo/Screen.kt new file mode 100644 index 0000000..6e34227 --- /dev/null +++ b/app/src/main/java/com/ti/mobpo/Screen.kt @@ -0,0 +1,7 @@ +package com.ti.mobpo + +sealed class Screen (val route: String) { + object PokeSearch : Screen("default_screen") + object TopNav : Screen("navigation_bar") + object Favourites : Screen("favourites_page") +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index ae775ad..250f302 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,5 +1,6 @@ MobileSecurity + Pokemon Helper Search Enter Pokémon Name \ No newline at end of file