JetPack Compose底部導(dǎo)航欄的實(shí)現(xiàn)方法詳解
1.聲明導(dǎo)航欄數(shù)據(jù)源
主要聲明導(dǎo)航欄label和圖標(biāo)數(shù)組,這里使用的是本地?cái)?shù)據(jù),也可以使用網(wǎng)絡(luò)數(shù)據(jù)。
//導(dǎo)航label數(shù)組 private val labels = arrayOf("首頁(yè)", "房訊", "消息", "我的") //導(dǎo)航默認(rèn)圖標(biāo)集合 private val defImages = arrayOf(R.mipmap.img_index, R.mipmap.img_info, R.mipmap.img_message, R.mipmap.img_preson) //導(dǎo)航選中圖標(biāo)集合 private var selectImages = arrayOf( R.mipmap.img_index_select, R.mipmap.img_info_select, R.mipmap.img_message_select, R.mipmap.img_preson_select ) //導(dǎo)航選中索引 private var selectIndex by mutableStateOf(0)
2.使用Scaffold搭建頁(yè)面結(jié)構(gòu)
Compose給我們提供了Scaffold
腳手架,實(shí)現(xiàn)了Material設(shè)計(jì)的頁(yè)面基本結(jié)構(gòu)。包括標(biāo)題欄、底部欄、SnackBar(類(lèi)似吐司功能)、浮動(dòng)按鈕、抽屜組件、剩余內(nèi)容布局等,讓我們可以快速定義一個(gè)基本的頁(yè)面結(jié)構(gòu)。
setContent { val navController = rememberNavController() Scaffold( //設(shè)置底部導(dǎo)航欄 bottomBar = { BuildBottomBar(labels = labels, navController) }, ) { //設(shè)置頁(yè)面主內(nèi)容區(qū)域,這里通過(guò)NavHost,根據(jù)選中不同的導(dǎo)航欄Tab導(dǎo)航到不同的頁(yè)面。 NavHost(navController = navController, startDestination = labels[selectIndex]) { composable(labels[0]) { //首頁(yè)Compose IndexPage() } composable(labels[1]) { //咨詢Compose InfoPage() } composable(labels[2]) { //消息Compose MessagePage() } composable(labels[3]) { //個(gè)人中心Compose PersonPage() } } } }
3.BottomNavigation的用法
BottomNavigation
中的content可以添加多個(gè)BottomNavigationItem
,用來(lái)構(gòu)建導(dǎo)航欄的樣式,BottomNavigationItem
中可以設(shè)置icon
和label
,選中顏色和未選中顏色等等一些常用的屬性??梢越oitem設(shè)置點(diǎn)擊事件onClick
等。
BottomNavigation(backgroundColor = Color.White, elevation = 6.dp) { for (i in labels.indices) { BottomNavigationItem(selected = selectIndex == i, onClick = { selectIndex = i navController.navigate(labels[i]) }, icon = { Image( painter = painterResource(id = if (selectIndex == i) selectImages[i] else defImages[i]), contentDescription = labels[i], modifier = Modifier.size(25.dp) ) }, label = { Text(text = labels[i], color = if (selectIndex == i) Color.Red else Color.Gray) }) } }
這里用了一個(gè)循環(huán)來(lái)添加BottomNavigationItem
,通過(guò)selectIndex
來(lái)判斷tab是否選中。在點(diǎn)擊事件中設(shè)置選中的索引。 這里要注意的是在Compose中導(dǎo)航主要是用NavHostController
來(lái)進(jìn)行控制。 需要引入單獨(dú)的依賴庫(kù)
通常這個(gè)實(shí)例是用rememberNavController()
來(lái)獲取。
val navController = rememberNavController()
可以通過(guò)navigate
方法來(lái)進(jìn)行導(dǎo)航到具體也面,naviget
傳人的參數(shù)和NavHost
中的startDestination
參數(shù)一致,這樣就可以跳轉(zhuǎn)到指定頁(yè)面中
navController.navigate(labels[i])
到此這篇關(guān)于JetPack Compose底部導(dǎo)航欄的實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)JetPack Compose底部導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實(shí)現(xiàn)音樂(lè)視頻播放
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)音樂(lè)視頻播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Afianl框架里面的FinalBitmap加載網(wǎng)絡(luò)圖片
這篇文章主要介紹了Afianl框架里面的FinalBitmap加載網(wǎng)絡(luò)圖片的相關(guān)資料,需要的朋友可以參考下2015-07-07Android實(shí)現(xiàn)網(wǎng)易新聞客戶端側(cè)滑菜單(1)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)網(wǎng)易新聞客戶端側(cè)滑菜單第一篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Fiddler實(shí)現(xiàn)手機(jī)抓包之小白入門(mén)必看
這篇文章主要介紹了Fiddler實(shí)現(xiàn)手機(jī)抓包之小白入門(mén)必看篇,需要的朋友可以參考下2018-03-03Android手把手教大家制作APP首頁(yè)(下拉刷新、自動(dòng)加載)
這篇文章主要為大家詳細(xì)介紹了Android手把手教大家制作APP首頁(yè),實(shí)現(xiàn)下拉刷新、自動(dòng)加載功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Flutter底部不規(guī)則導(dǎo)航的實(shí)現(xiàn)過(guò)程
這篇文章主要給大家介紹了關(guān)于Flutter底部不規(guī)則導(dǎo)航的實(shí)現(xiàn)過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Android主項(xiàng)目與Module中R類(lèi)的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Android主項(xiàng)目與Module中R類(lèi)的區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02