Joren/pokesearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace nav with a functional bottom anv

Browse Source
This commit is contained in:
Joren
2024-04-28 16:03:35 +02:00
parent 28bab67641
commit 8ea27a59bc
7 changed files with 140 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/src/main/java/com/ti/mobpo/MainActivity.kt
View File

@@ -1,23 +1,48 @@
package com.ti.mobpo
import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
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.outlined.Favorite
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Person
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.navigation
import androidx.navigation.compose.rememberNavController
import com.ti.mobpo.ui.theme.MobileSecurityTheme
data class BottomNavigationItem(
val title: String,
val selectedIcon: ImageVector,
val unselectedItem: ImageVector,
val route: String
)
class MainActivity : ComponentActivity() {
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MobileSecurityTheme {
// A surface container using the 'background' color from the theme
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
Navigation()
}
Navigation()
}
}
}

55
app/src/main/java/com/ti/mobpo/NavBar.kt
View File

@@ -1,55 +0,0 @@
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)
}
}

102
app/src/main/java/com/ti/mobpo/Navigation.kt
View File

@@ -1,44 +1,112 @@
package com.ti.mobpo
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
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.outlined.Favorite
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Person
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
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
import com.ti.mobpo.screens.Favourites
import com.ti.mobpo.screens.PokeSearch
import com.ti.mobpo.screens.Profile
@Composable
fun Navigation() {
val items = listOf(
BottomNavigationItem(
title = "Home",
selectedIcon = Icons.Filled.Home,
unselectedItem = Icons.Outlined.Home,
route = Screen.PokeSearch.route
),
BottomNavigationItem(
title = "Favourites",
selectedIcon = Icons.Filled.Favorite,
unselectedItem = Icons.Outlined.Favorite,
route = Screen.Favourites.route
),
BottomNavigationItem(
title = "Profile",
selectedIcon = Icons.Filled.Person,
unselectedItem = Icons.Outlined.Person,
route = Screen.Profile.route
),
)
var selectedItemIndex by rememberSaveable {
mutableStateOf(0)
}
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
Scaffold (
bottomBar = {
NavigationBar {
items.forEachIndexed { index, item ->
NavigationBarItem(
selected = selectedItemIndex == index,
onClick = {
selectedItemIndex = index
println("Navigating to ${item.route}")
navController.navigate(item.route)
},
label = { Text(item.title) },
alwaysShowLabel = true,
icon = {
if (index == selectedItemIndex) {
item.selectedIcon
} else {
item.unselectedItem
}
}
)
}
}
},
content = { innerPadding ->
Surface(
modifier = Modifier.fillMaxSize().padding(innerPadding),
color = MaterialTheme.colorScheme.background,
content = {
NavHost(navController = navController, startDestination = Screen.PokeSearch.route) {
composable(route = Screen.PokeSearch.route) {
PokeSearch()
}
composable(route = Screen.Favourites.route) {
Favourites()
}
composable(route = Screen.Profile.route) {
Profile()
}
}
}
)
}
}
)
}
@Preview(showBackground = true)
@Composable
fun NavigationPreview() {
val navController = rememberNavController()
Surface {
TopBar(navController = navController, false)
PokeSearch(navController = navController){}
PokeSearch()
}
}

1
app/src/main/java/com/ti/mobpo/Screen.kt
View File

@@ -4,4 +4,5 @@ sealed class Screen (val route: String) {
object PokeSearch : Screen("default_screen")
object TopNav : Screen("navigation_bar")
object Favourites : Screen("favourites_page")
object Profile : Screen("profile_page")
}

10
app/src/main/java/com/ti/mobpo/screens/Favourites.kt Normal file
View File

@@ -0,0 +1,10 @@
package com.ti.mobpo.screens
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@Composable
fun Favourites() {
println("Favourites")
Text("Favourites Page")
}

16
app/src/main/java/com/ti/mobpo/PokeSearch.kt → app/src/main/java/com/ti/mobpo/screens/PokeSearch.kt
View File

@@ -1,4 +1,4 @@
package com.ti.mobpo
package com.ti.mobpo.screens
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -16,20 +15,18 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.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
import com.ti.mobpo.R
@Composable
fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
fun PokeSearch() {
var value by remember { mutableStateOf("") }
println("Search page")
Row(
modifier = Modifier.fillMaxSize().wrapContentSize(),
verticalAlignment = Alignment.CenterVertically,
@@ -43,7 +40,7 @@ fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
)
Button(
onClick = {
onButtonPressed()
/*TODO*/
},
modifier = Modifier.padding(start = 8.dp)
) {
@@ -54,6 +51,5 @@ fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
@Preview(showBackground = true)
@Composable
fun PokeSearchApp(){
val navController = rememberNavController()
PokeSearch(navController = navController){}
PokeSearch()
}

9
app/src/main/java/com/ti/mobpo/screens/Profile.kt Normal file
View File

@@ -0,0 +1,9 @@
package com.ti.mobpo.screens
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@Composable
fun Profile(){
Text("Profile Page")
}