首页
工具
隐私协议
App Privacy Policy
更多
作品
关于我们
Search
1
android5遇到INSTALL_FAILED_DEXOPT 解决办法
1,667 阅读
2
设置max_connections无效
1,485 阅读
3
FlexboxLayout+recyclerView实现自动换行
1,382 阅读
4
Nginx配置多个域名
1,258 阅读
5
Android P http网络请求失败
1,231 阅读
默认分类
mysql
android
android深入
Jetpack Compose
Android传感器
php
Yii2
windows
webrtc
登录
Search
标签搜索
android
kotlin
webrtc
kurento
mysql
adb
nginx
flutter
rsa
微信
git
Yii2
md5
加密
dart
aes
wechat
windows
小程序
dexopt
Typecho
累计撰写
80
篇文章
累计收到
3
条评论
首页
栏目
默认分类
mysql
android
android深入
Jetpack Compose
Android传感器
php
Yii2
windows
webrtc
页面
工具
隐私协议
App Privacy Policy
作品
关于我们
搜索到
1
篇与
Jetpack Compose
的结果
2021-09-30
Jetpack Compose 底部导航栏
注意:您需要有Android Studio Arctic Fox 及更高版本才能在您的项目中使用Jetpack Compose。添加库转到您的项目级gradle.build文件,并添加以下扩展名:buildscript { ext { compose_version = '1.0.2' } // ... }现在转到应用级gradle.build文件,并添加以下内容:android { // ... kotlinOptions { jvmTarget = '1.8' useIR = true } buildFeatures { // ... compose true } composeOptions { kotlinCompilerExtensionVersion compose_version } } dependencies { // ... implementation "androidx.compose.ui:ui:$compose_version" implementation "androidx.compose.material:material:$compose_version" implementation "androidx.compose.ui:ui-tooling:$compose_version" implementation "androidx.navigation:navigation-compose:2.4.0-alpha08" implementation "androidx.activity:activity-compose:1.3.1" // ... }创建顶部栏打开activity(例如MainActivity.kt),并在类之外添加以下可组合函数以创建topbar@Composable fun TopBar() { TopAppBar( title = { Text(text = stringResource(R.string.app_name), fontSize = 18.sp) }, backgroundColor = colorResource(id = R.color.colorPrimary), contentColor = Color.White ) } @Preview(showBackground = true) @Composable fun TopBarPreview() { TopBar() }创建底部导航栏在创建底部导航栏之前,我们必须准备Item;创建一个Sealed Class并指定NavigationItem作为名称。并使用参数为每个条形项目创建一个模型:route:必须是unique。用来从底部导航栏导航到视图icon : 栏项的图标title : 栏项的名称sealed class NavigationItem(var route: String, var icon: Int, var title: String) { object Home : NavigationItem("home", R.mipmap.ic_home, "首页") object Recommend : NavigationItem("recommend", R.mipmap.ic_recommend, "关注") object Books : NavigationItem("books", R.mipmap.ic_book, "书城") object Profile : NavigationItem("profile", R.mipmap.ic_profile, "我的") }同样,在MainActivity.kt 中,添加以下可组合函数:@Composable fun BottomNavigationBar() { val items = listOf( NavigationItem.Home, NavigationItem.Recommend, NavigationItem.Books, NavigationItem.Profile ) BottomNavigation( backgroundColor = colorResource(id = R.color.colorPrimary), contentColor = Color.White ) { items.forEach { item -> BottomNavigationItem( icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) }, label = { Text(text = item.title) }, selectedContentColor = Color.White, unselectedContentColor = Color.White.copy(0.4f), alwaysShowLabel = true, selected = false, onClick = { /* Add code later */ } ) } } } @Preview(showBackground = true) @Composable fun BottomNavigationBarPreview() { BottomNavigationBar() }创建包含顶部栏和底部导航栏的视图这里我将使用Scaffold,创建一个名为MainScreen()的新组合函数,里面有一个Scaffold布局,并添加我们之前创建的TopBar()和BottomNavigationBar()class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainScreen() } } } @Composable fun MainScreen() { Scaffold( topBar = { TopBar() }, bottomBar = { BottomNavigationBar() } ) { /* Add code later */ } } @Preview(showBackground = true) @Composable fun MainScreenPreview() { MainScreen() }将导航栏与视图连接起来(导航)连接之前,需要先创建Views,我创建了4个名为*Screen的 Kotlin 文件HomeScreen.kt@Composable fun HomeScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Home View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun HomeScreenPreview() { HomeScreen() }RecommendScreen.kt@Composable fun RecommendScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Recommend View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun RecommendScreenPreview() { RecommendScreen() }BooksScreen.kt@Composable fun BooksScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Books View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun BooksScreenPreview() { BooksScreen() }ProfileScreen.kt@Composable fun ProfileScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Profile View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun ProfileScreenPreview() { ProfileScreen() }接下来在BottomNavigationBar中,添加参数navController,并创建navBackStackEntry和currentRoute。使用currentRoute,我们检查是否必须突出显示栏项目,然后使用navigate()方法导航到视图@Composable fun BottomNavigationBar(navController: NavController) { val items = listOf( NavigationItem.Home, NavigationItem.Recommend, NavigationItem.Books, NavigationItem.Profile ) BottomNavigation( backgroundColor = colorResource(id = R.color.colorPrimary), contentColor = Color.White ) { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route items.forEach { item -> BottomNavigationItem( icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) }, label = { Text(text = item.title) }, selectedContentColor = Color.White, unselectedContentColor = Color.White.copy(0.4f), alwaysShowLabel = true, selected = currentRoute == item.route, onClick = { navController.navigate(item.route) { navController.graph.startDestinationRoute?.let { route -> popUpTo(route) { saveState = true } } launchSingleTop = true // 重新选择同一项目时避免同一目的地的多个副本 restoreState = true } } ) } } } @Preview(showBackground = true) @Composable fun BottomNavigationBarPreview() { // BottomNavigationBar() }创建一个新的可组合函数并将其命名为Navigation(),参数为NavHostController类型的参数navController。在这里,我们创建了一个NavHost,我们将Home视图设置为startDestination,我们将每个View的路由设置为可组合的。@Composable fun Navigation(navController: NavHostController) { NavHost(navController, startDestination = NavigationItem.Home.route) { composable(NavigationItem.Home.route) { HomeScreen() } composable(NavigationItem.Recommend.route) { RecommendScreen() } composable(NavigationItem.Books.route) { BooksScreen() } composable(NavigationItem.Profile.route) { ProfileScreen() } } }在MainScreen()中创建NavigationController,并将其传递给BottomNavigationBar和Navigation@Composable fun MainScreen() { val navController = rememberNavController() Scaffold( topBar = { TopBar() }, bottomBar = { BottomNavigationBar(navController) } ) { Navigation(navController) } }
2021年09月30日
603 阅读
0 评论
0 点赞