Skip to content

Commit ccb4200

Browse files
author
iOrchid
committed
BottomNavigationView,BottomAppBar的演示
1 parent 4154d23 commit ccb4200

File tree

3 files changed

+290
-0
lines changed

3 files changed

+290
-0
lines changed

‎compose/build.gradle.kts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ dependencies {
5757

5858
implementation(libs.androidx.compose.ui.util)
5959
implementation(libs.androidx.compose.constraintlayout)
60+
//material的compose的库，与material3的库不同，选择用一种风格即可。
61+
implementation(libs.androidx.compose.material)
6062
implementation(libs.androidx.compose.material.iconsExtended)
6163
implementation(libs.androidx.compose.foundation)
6264
implementation(libs.androidx.compose.foundation.layout)

‎compose/src/main/java/org/zhiwei/compose/model/Screen.kt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ package org.zhiwei.compose.model
33
import androidx.compose.ui.Modifier
44
import org.zhiwei.compose.screen.basic.Box_Column_Row_Screen
55
import org.zhiwei.compose.screen.basic.Surface_Shape_Clickable_Screen
6+
import org.zhiwei.compose.screen.basic.material3.BottomBar_Screen
67
import org.zhiwei.compose.screen.basic.material3.Button_Screen
78
import org.zhiwei.compose.screen.basic.material3.Image_Screen
89
import org.zhiwei.compose.screen.basic.material3.LazyGrid_Screen
@@ -61,6 +62,10 @@ internal object BasicScreenUIs {
6162
"TopAppbar&Tabs",
6263
"material3库中的top AppBar和Tabs相关控件的演示。"
6364
) { TopAppbarTabs_Screen(modifier, onBack) },
65+
CourseItemModel(
66+
"BottomBar",
67+
"BottomNavigationView和BottomAppBar的compose控件的演示。"
68+
) { BottomBar_Screen(modifier) },
6469
)
6570
}
6671

‎compose/src/main/java/org/zhiwei/compose/screen/basic/material3/BottomBarScreen.kt

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
package org.zhiwei.compose.screen.basic.material3
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Spacer
6+
import androidx.compose.foundation.layout.WindowInsets
7+
import androidx.compose.foundation.layout.width
8+
import androidx.compose.foundation.shape.CircleShape
9+
import androidx.compose.material.BottomNavigation
10+
import androidx.compose.material.BottomNavigationItem
11+
import androidx.compose.material.ContentAlpha
12+
import androidx.compose.material.FabPosition
13+
import androidx.compose.material.LocalContentAlpha
14+
import androidx.compose.material.MaterialTheme
15+
import androidx.compose.material.Scaffold
16+
import androidx.compose.material.icons.Icons
17+
import androidx.compose.material.icons.filled.Add
18+
import androidx.compose.material.icons.filled.ArrowBack
19+
import androidx.compose.material.icons.filled.ArrowBackIosNew
20+
import androidx.compose.material.icons.filled.FavoriteBorder
21+
import androidx.compose.material.icons.filled.Home
22+
import androidx.compose.material.icons.filled.Map
23+
import androidx.compose.material.icons.filled.MoreVert
24+
import androidx.compose.material.icons.filled.Search
25+
import androidx.compose.material.icons.filled.Settings
26+
import androidx.compose.material3.BottomAppBar
27+
import androidx.compose.material3.FloatingActionButton
28+
import androidx.compose.material3.Icon
29+
import androidx.compose.material3.IconButton
30+
import androidx.compose.material3.Text
31+
import androidx.compose.runtime.Composable
32+
import androidx.compose.runtime.CompositionLocalProvider
33+
import androidx.compose.runtime.getValue
34+
import androidx.compose.runtime.mutableIntStateOf
35+
import androidx.compose.runtime.remember
36+
import androidx.compose.runtime.setValue
37+
import androidx.compose.ui.Modifier
38+
import androidx.compose.ui.graphics.Color
39+
import androidx.compose.ui.graphics.vector.ImageVector
40+
import androidx.compose.ui.tooling.preview.Preview
41+
import androidx.compose.ui.unit.dp
42+
import org.zhiwei.compose.ui.widget.Title_Desc_Text
43+
import org.zhiwei.compose.ui.widget.Title_Sub_Text
44+
import org.zhiwei.compose.ui.widget.Title_Text
45+
46+
//主要演示bottomNavigation，BottomAppBar的控件
47+
48+
@Composable
49+
fun BottomBar_Screen(modifier: Modifier = Modifier) {
50+
MaterialShow(modifier)
51+
}
52+
53+
//region material3的控件演示
54+
@Composable
55+
private fun BottomBarShow() {
56+
//这里面演示了几种BottomNavigationView和BottomAppBar的使用，material的库控件，非material3的
57+
Column(
58+
verticalArrangement = Arrangement.spacedBy(5.dp)
59+
) {
60+
//material3中，没有了BottomNavigationView；这里是material的库中的
61+
Title_Text(title = "BottomBar的演示")
62+
Title_Sub_Text(title = "1、material库中的BottomNavigationView")
63+
Title_Desc_Text(desc = "1.1, 仅显示icon的效果")
64+
IconOnlyBottomNavigationView()
65+
Title_Desc_Text(desc = "1.2, 仅显示Text文本的效果")
66+
TextOnlyBottomNavigationView()
67+
Title_Desc_Text(desc = "1.3, 图标Icon，选中则显示文本")
68+
BottomNavigationComponent()
69+
Title_Desc_Text(desc = "1.4, 图标Icon，选中则显示文本")
70+
BottomNavigationComponent(true)
71+
Title_Sub_Text(title = "2、material库中的BottomAppBar")
72+
MaterialBottomAppBar()
73+
//material3的BottomAppBar
74+
Title_Sub_Text(title = "3、material3库中的BottomAppBar")
75+
BottomBarOne()
76+
BottomBarTwo()
77+
}
78+
}
79+
80+
@Composable
81+
private fun BottomBarOne() {
82+
BottomAppBar(
83+
containerColor = Color.White,
84+
// contentColor = Color.Yellow,
85+
tonalElevation = 0.dp,
86+
windowInsets = WindowInsets(0.dp),
87+
) {
88+
IconButton(onClick = { /*TODO*/ }) {
89+
Icon(imageVector = Icons.Filled.ArrowBackIosNew, contentDescription = null)
90+
}
91+
Text(text = "Material3的BottomAppBar")
92+
Spacer(modifier = Modifier.weight(1f))
93+
IconButton(onClick = { /*TODO*/ }) {
94+
Icon(imageVector = Icons.Filled.FavoriteBorder, contentDescription = null)
95+
}
96+
Spacer(modifier = Modifier.width(20.dp))
97+
IconButton(onClick = { /*TODO*/ }) {
98+
Icon(imageVector = Icons.Filled.MoreVert, contentDescription = null)
99+
}
100+
}
101+
}
102+
103+
@Composable
104+
private fun BottomBarTwo() {
105+
BottomAppBar(actions = {
106+
IconButton(onClick = { /**/ }) {
107+
Icon(imageVector = Icons.Filled.ArrowBackIosNew, contentDescription = null)
108+
}
109+
Text(text = "Material3的BottomAppBar")
110+
Spacer(modifier = Modifier.weight(1f))
111+
IconButton(onClick = { /**/ }) {
112+
Icon(imageVector = Icons.Filled.FavoriteBorder, contentDescription = null)
113+
}
114+
IconButton(onClick = { /**/ }) {
115+
Icon(imageVector = Icons.Filled.MoreVert, contentDescription = null)
116+
}
117+
}, floatingActionButton = {
118+
FloatingActionButton(onClick = { }, shape = CircleShape) {
119+
Icon(imageVector = Icons.Filled.Add, contentDescription = null)
120+
}
121+
})
122+
}
123+
124+
//endregion
125+
126+
@Composable
127+
private fun MaterialShow(modifier: Modifier) {
128+
Scaffold(
129+
modifier = modifier,
130+
bottomBar = {
131+
HoleBottomAppBar()
132+
},
133+
floatingActionButton = {
134+
androidx.compose.material.FloatingActionButton(
135+
onClick = { },
136+
contentColor = Color.Yellow,
137+
backgroundColor = Color.Cyan,
138+
) {
139+
Icon(imageVector = Icons.Filled.Add, contentDescription = null)
140+
}
141+
},
142+
floatingActionButtonPosition = FabPosition.Center,
143+
isFloatingActionButtonDocked = true
144+
) { _ ->
145+
BottomBarShow()
146+
}
147+
}
148+
149+
//region material库的演示
150+
@Composable
151+
private fun MaterialBottomAppBar() {
152+
androidx.compose.material.BottomAppBar(
153+
backgroundColor = Color.White,
154+
elevation = 5.dp,
155+
) {
156+
IconButton(onClick = { /*TODO*/ }) {
157+
Icon(imageVector = Icons.Filled.ArrowBackIosNew, contentDescription = null)
158+
}
159+
Text(text = "BottomAppBar")
160+
Spacer(modifier = Modifier.weight(1f))
161+
IconButton(onClick = { /*TODO*/ }) {
162+
Icon(imageVector = Icons.Filled.FavoriteBorder, contentDescription = null)
163+
}
164+
Spacer(modifier = Modifier.width(20.dp))
165+
IconButton(onClick = { /*TODO*/ }) {
166+
Icon(imageVector = Icons.Filled.MoreVert, contentDescription = null)
167+
}
168+
}
169+
}
170+
171+
@Composable
172+
private fun TextOnlyBottomNavigationView() {
173+
var selectedIndex by remember { mutableIntStateOf(0) }
174+
val list = listOf("Home", "Map", "Settings")
175+
BottomNavigation(
176+
elevation = 2.dp,
177+
backgroundColor = Color(0xff212121)
178+
) {
179+
list.forEachIndexed { index: Int, text: String ->
180+
BottomNavigationItem(
181+
unselectedContentColor = Color(0xffFF6F00),
182+
selectedContentColor = Color(0xffFFE082),
183+
icon = {},
184+
label = { androidx.compose.material.Text(text) },
185+
selected = selectedIndex == index,
186+
onClick = {
187+
selectedIndex = index
188+
}
189+
)
190+
}
191+
}
192+
}
193+
194+
@Composable
195+
private fun IconOnlyBottomNavigationView() {
196+
197+
var selectedIndex by remember { mutableIntStateOf(0) }
198+
val icons = listOf(Icons.Filled.Home, Icons.Filled.Map, Icons.Filled.Settings)
199+
200+
BottomNavigation(
201+
backgroundColor = MaterialTheme.colors.surface,
202+
contentColor = MaterialTheme.colors.onSurface,
203+
elevation = 1.dp
204+
) {
205+
icons.forEachIndexed { index, imageVector: ImageVector ->
206+
BottomNavigationItem(
207+
unselectedContentColor = Color(0xffEF9A9A),
208+
selectedContentColor = Color(0xffD32F2F),
209+
icon = { androidx.compose.material.Icon(imageVector, contentDescription = null) },
210+
label = null,
211+
selected = selectedIndex == index,
212+
onClick = {
213+
selectedIndex = index
214+
}
215+
)
216+
}
217+
}
218+
}
219+
220+
@Composable
221+
private fun BottomNavigationComponent(alwaysShowLabel: Boolean = false) {
222+
var selectedIndex by remember { mutableIntStateOf(0) }
223+
val tabContents = listOf(
224+
"Home" to Icons.Filled.Home,
225+
"Map" to Icons.Filled.Map,
226+
"Settings" to Icons.Filled.Settings
227+
)
228+
229+
BottomNavigation(
230+
backgroundColor = MaterialTheme.colors.surface,
231+
contentColor = MaterialTheme.colors.onSurface,
232+
elevation = 2.dp
233+
) {
234+
tabContents.forEachIndexed { index, pair: Pair<String, ImageVector> ->
235+
BottomNavigationItem(
236+
icon = { androidx.compose.material.Icon(pair.second, contentDescription = null) },
237+
label = { androidx.compose.material.Text(pair.first) },
238+
selected = selectedIndex == index,
239+
alwaysShowLabel = alwaysShowLabel, // 标记是否一直显示label，false的话，只有选中的才显示
240+
onClick = {
241+
selectedIndex = index
242+
}
243+
)
244+
}
245+
}
246+
}
247+
248+
@Composable
249+
private fun HoleBottomAppBar() {
250+
androidx.compose.material.BottomAppBar(
251+
backgroundColor = MaterialTheme.colors.surface,
252+
contentColor = MaterialTheme.colors.onSurface,
253+
elevation = 4.dp,
254+
cutoutShape = CircleShape//该属性，只有在BottomAppBar和FloatingActionButton同时在Scaffold中时候的时候，才生效。就是挖孔效果
255+
) {
256+
// 这个就是提高一下图标的亮度
257+
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
258+
androidx.compose.material.IconButton(
259+
onClick = { }) {
260+
androidx.compose.material.Icon(
261+
Icons.Filled.ArrowBack,
262+
contentDescription = null
263+
)
264+
}
265+
}
266+
Spacer(modifier = Modifier.weight(1f))
267+
androidx.compose.material.IconButton(onClick = { }) {
268+
androidx.compose.material.Icon(Icons.Filled.Search, contentDescription = null)
269+
}
270+
271+
androidx.compose.material.IconButton(onClick = { }) {
272+
androidx.compose.material.Icon(Icons.Filled.MoreVert, contentDescription = null)
273+
}
274+
}
275+
}
276+
277+
//endregion
278+
279+
@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
280+
@Composable
281+
private fun LazyColumnPreview() {
282+
BottomBar_Screen()
283+
}

0 commit comments

Comments
 (0)