You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
5.6 KiB
163 lines
5.6 KiB
2 years ago
|
package org.jetbrains.compose.demo.widgets.ui.screens
|
||
|
|
||
|
import androidx.compose.foundation.Image
|
||
|
import androidx.compose.foundation.layout.*
|
||
|
import androidx.compose.foundation.shape.CircleShape
|
||
|
import androidx.compose.material.*
|
||
|
import androidx.compose.material.icons.Icons
|
||
|
import androidx.compose.material.icons.filled.ArrowBack
|
||
|
import androidx.compose.material.icons.filled.MoreHoriz
|
||
|
import androidx.compose.material.icons.filled.StarBorder
|
||
|
import androidx.compose.material.icons.outlined.*
|
||
|
import androidx.compose.runtime.Composable
|
||
|
import androidx.compose.runtime.mutableStateOf
|
||
|
import androidx.compose.runtime.remember
|
||
|
import androidx.compose.ui.Modifier
|
||
|
import androidx.compose.ui.draw.clip
|
||
|
import androidx.compose.ui.unit.dp
|
||
|
import org.jetbrains.compose.demo.widgets.platform.Res
|
||
1 year ago
|
import org.jetbrains.compose.resources.painterResource
|
||
2 years ago
|
import org.jetbrains.compose.demo.widgets.theme.twitterColor
|
||
|
import org.jetbrains.compose.demo.widgets.ui.utils.SubtitleText
|
||
|
import org.jetbrains.compose.demo.widgets.ui.utils.TitleText
|
||
1 year ago
|
import org.jetbrains.compose.resources.ExperimentalResourceApi
|
||
2 years ago
|
|
||
|
@Composable
|
||
|
internal fun AppBars() {
|
||
|
TopAppBarsDemo()
|
||
|
BottomAppBarDemo()
|
||
|
NavigationBarDemo()
|
||
|
}
|
||
|
|
||
1 year ago
|
@OptIn(ExperimentalResourceApi::class)
|
||
2 years ago
|
@Composable
|
||
|
private fun TopAppBarsDemo() {
|
||
|
SubtitleText(subtitle = "Top App bar")
|
||
|
|
||
|
TopAppBar(
|
||
|
title = { Text(text = "Home") },
|
||
|
elevation = 8.dp,
|
||
|
navigationIcon = {
|
||
|
IconButton(onClick = {}) {
|
||
|
Icon(Icons.Default.ArrowBack, contentDescription = "ArrowBack")
|
||
|
}
|
||
|
}
|
||
|
)
|
||
|
|
||
|
Spacer(modifier = Modifier.height(8.dp))
|
||
|
|
||
|
TopAppBar(
|
||
|
title = { Text(text = "Instagram") },
|
||
|
backgroundColor = MaterialTheme.colors.surface,
|
||
|
contentColor = MaterialTheme.colors.onSurface,
|
||
|
elevation = 8.dp,
|
||
|
navigationIcon = {
|
||
|
IconButton(onClick = {}) {
|
||
|
Icon(painterResource(Res.drawable.ic_instagram), contentDescription = "Instagram")
|
||
|
}
|
||
|
},
|
||
|
actions = {
|
||
|
IconButton(onClick = {}) {
|
||
|
Icon(painterResource(Res.drawable.ic_send), contentDescription = "Send")
|
||
|
}
|
||
|
}
|
||
|
)
|
||
|
|
||
|
Spacer(modifier = Modifier.height(8.dp))
|
||
|
|
||
|
TopAppBar(
|
||
|
title = {
|
||
|
Icon(
|
||
|
painterResource(Res.drawable.ic_twitter),
|
||
|
contentDescription = "Twitter",
|
||
|
tint = twitterColor,
|
||
|
modifier = Modifier.fillMaxWidth()
|
||
|
)
|
||
|
},
|
||
|
backgroundColor = MaterialTheme.colors.surface,
|
||
|
contentColor = MaterialTheme.colors.onSurface,
|
||
|
elevation = 8.dp,
|
||
|
navigationIcon = {
|
||
|
Image(
|
||
|
painterResource(Res.drawable.p6),
|
||
|
contentDescription = "",
|
||
|
modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
|
||
|
.requiredSize(32.dp).clip(CircleShape)
|
||
|
)
|
||
|
},
|
||
|
actions = {
|
||
|
Icon(
|
||
|
Icons.Default.StarBorder,
|
||
|
contentDescription = "",
|
||
|
modifier = Modifier.padding(horizontal = 8.dp)
|
||
|
)
|
||
|
}
|
||
|
)
|
||
|
Spacer(modifier = Modifier.height(8.dp))
|
||
|
}
|
||
|
|
||
|
@Composable
|
||
|
private fun BottomAppBarDemo() {
|
||
|
Spacer(modifier = Modifier.height(16.dp))
|
||
|
SubtitleText("Bottom app bars: Note bottom app bar support FAB cutouts when used with scafolds see demoUI crypto app")
|
||
|
|
||
|
BottomAppBar(
|
||
|
cutoutShape = CircleShape
|
||
|
) {
|
||
|
IconButton(onClick = {}) {
|
||
|
Icon(Icons.Default.MoreHoriz, contentDescription = "")
|
||
|
}
|
||
|
TitleText(title = "Bottom App Bar")
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@Composable
|
||
|
private fun NavigationBarDemo() {
|
||
|
Spacer(modifier = Modifier.height(16.dp))
|
||
|
SubtitleText(subtitle = "Bottom Navigation Bars")
|
||
|
val navItemState = remember { mutableStateOf(NavType.HOME) }
|
||
|
BottomNavigation(backgroundColor = MaterialTheme.colors.surface) {
|
||
|
BottomNavigationItem(
|
||
|
icon = { Icon(Icons.Outlined.Home, contentDescription = "Home") },
|
||
|
selected = navItemState.value == NavType.HOME,
|
||
|
onClick = { navItemState.value = NavType.HOME },
|
||
|
label = { Text(text = Res.string.spotify_nav_home) },
|
||
|
)
|
||
|
BottomNavigationItem(
|
||
|
icon = { Icon(Icons.Outlined.Search, contentDescription = "Search") },
|
||
|
selected = navItemState.value == NavType.SEARCH,
|
||
|
onClick = { navItemState.value = NavType.SEARCH },
|
||
|
label = { Text(text = Res.string.spotify_nav_search) }
|
||
|
)
|
||
|
BottomNavigationItem(
|
||
|
icon = { Icon(Icons.Outlined.LibraryMusic, contentDescription = "LibraryMusic") },
|
||
|
selected = navItemState.value == NavType.LIBRARY,
|
||
|
onClick = { navItemState.value = NavType.LIBRARY },
|
||
|
label = { Text(text = Res.string.spotify_nav_library) }
|
||
|
)
|
||
|
}
|
||
|
|
||
|
Spacer(modifier = Modifier.height(16.dp))
|
||
|
|
||
|
BottomNavigation {
|
||
|
BottomNavigationItem(
|
||
|
icon = { Icon(Icons.Outlined.ReadMore, contentDescription = "ReadMore") },
|
||
|
selected = navItemState.value == NavType.HOME,
|
||
|
onClick = { navItemState.value = NavType.HOME },
|
||
|
)
|
||
|
BottomNavigationItem(
|
||
|
icon = { Icon(Icons.Outlined.Search, contentDescription = "Search") },
|
||
|
selected = navItemState.value == NavType.SEARCH,
|
||
|
onClick = { navItemState.value = NavType.SEARCH },
|
||
|
)
|
||
|
BottomNavigationItem(
|
||
|
icon = { Icon(Icons.Outlined.CleanHands, contentDescription = "CleanHands") },
|
||
|
selected = navItemState.value == NavType.LIBRARY,
|
||
|
onClick = { navItemState.value = NavType.LIBRARY },
|
||
|
)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
private enum class NavType {
|
||
|
HOME, SEARCH, LIBRARY
|
||
|
}
|