Skip to content

Commit

Permalink
ModalDrawer的初步演示
Browse files Browse the repository at this point in the history
  • Loading branch information
iOrchid committed Apr 18, 2024
1 parent de4aaa5 commit 21b8e10
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 3 deletions.
2 changes: 1 addition & 1 deletion compose/src/main/java/org/zhiwei/compose/model/Screen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ internal object BasicScreenUIs {
) { BottomBar_Screen(modifier) },
CourseItemModel(
"Side Navigation Vs ModalDrawer",
"侧边栏控件"
"侧边栏SideDrawer,还有ModelDrawer的控件演示"
) { SideDrawer_Screen(modifier) },
CourseItemModel(
"BottomSheet",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,58 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.BottomAppBar
import androidx.compose.material.Button
import androidx.compose.material.DrawerState
import androidx.compose.material.DrawerValue
import androidx.compose.material.FabPosition
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.ModalDrawer
import androidx.compose.material.Scaffold
import androidx.compose.material.ScaffoldState
import androidx.compose.material.SnackbarHost
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccessTime
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBackIosNew
import androidx.compose.material.icons.filled.CloudUpload
import androidx.compose.material.icons.filled.Folder
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.OfflineShare
import androidx.compose.material.icons.filled.People
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.filled.Upload
import androidx.compose.material.icons.sharp.Menu
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import org.zhiwei.compose.ui.widget.DrawerButton
import org.zhiwei.compose.ui.widget.ModalDrawerContentHeader

@Composable
internal fun SideDrawer_Screen(modifier: Modifier = Modifier) {
//以下演示,根据需要,选择注释即可,单次开启一个注释,运行看效果
// SideDrawerDemo(modifier)

SideDrawerDemo(modifier)
ModalDrawerDemo(modifier)
}


Expand Down Expand Up @@ -191,9 +210,94 @@ private fun DrawerContent(drawerState: DrawerState, navController: NavController

//endregion

//region ModalDrawer
@Composable
private fun ModalDrawerDemo(modifier: Modifier, drawerValue: DrawerValue = DrawerValue.Closed) {
val selected = remember { mutableIntStateOf(0) }
val drawerState = rememberDrawerState(initialValue = drawerValue)
val coroutineScope = rememberCoroutineScope()
val openDrawer = { coroutineScope.launch { drawerState.open() } }
val closeDrawer = { coroutineScope.launch { drawerState.close() } }
ModalDrawer(
drawerContent = {
ModalDrawerContent(
selectedIndex = selected.value,
onSelected = { selected.value = it },
closeDrawer = { closeDrawer() })
},
drawerState = drawerState
) {
Column(modifier) {
TopAppBar(title = { Text(text = "ModalDrawer") }, navigationIcon = {
IconButton(onClick = { openDrawer.invoke() }) {
Icon(imageVector = Icons.Sharp.Menu, contentDescription = null)
}
})
Image_Screen()
}
}
}


@Composable
private fun ModalDrawerContent(
selectedIndex: Int,
onSelected: (Int) -> Unit,
closeDrawer: () -> Unit,
) {
Column(modifier = Modifier.fillMaxWidth()) {
ModalDrawerContentHeader()
modalDrawerList.forEachIndexed { index, pair ->
val label = pair.first
val imageVector = pair.second
DrawerButton(
icon = imageVector,
label = label,
isSelected = selectedIndex == index,
action = {
onSelected(index)
closeDrawer()
}
)
}
}
}


private val modalDrawerList = listOf(
Pair("My Files", Icons.Filled.Folder),
Pair("Shared with Me", Icons.Filled.People),
Pair("Starred", Icons.Filled.Star),
Pair("Recent", Icons.Filled.AccessTime),
Pair("Offline", Icons.Filled.OfflineShare),
Pair("Uploads", Icons.Filled.Upload),
Pair("Backups", Icons.Filled.CloudUpload),
)


//endregion

@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
private fun SideDrawerPreview() {
SideDrawer_Screen()
SideDrawerDemo(Modifier)
}

//用于预览,提供预览效果的参数
private class DrawerStateProvider : PreviewParameterProvider<DrawerValue> {
override val values: Sequence<DrawerValue>
get() = sequenceOf(
DrawerValue.Closed,
DrawerValue.Open
)
}

//预览中使用了状态参数,所以就会有不同状态下的预览
@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
@Composable
private fun ModalDrawerPreview(
@PreviewParameter(DrawerStateProvider::class)
drawerValue: DrawerValue,
) {
ModalDrawerDemo(Modifier, drawerValue)
}
123 changes: 123 additions & 0 deletions compose/src/main/java/org/zhiwei/compose/ui/widget/DrawerButton.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
package org.zhiwei.compose.ui.widget

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.zhiwei.compose.R

@Composable
internal fun DrawerButton(
icon: ImageVector,
label: String,
isSelected: Boolean,
action: () -> Unit,
modifier: Modifier = Modifier,
) {
val colors = MaterialTheme.colors
val imageAlpha = if (isSelected) {
1f
} else {
0.8f
}
val textIconColor = if (isSelected) {
colors.primary
} else {
colors.onSurface.copy(alpha = 0.9f)
}
val backgroundColor = if (isSelected) {
colors.primary.copy(alpha = 0.12f)
} else {
Color.Transparent
}

val surfaceModifier = modifier
.padding(start = 8.dp, top = 8.dp, end = 8.dp)
.fillMaxWidth()
Surface(
modifier = surfaceModifier,
color = backgroundColor,
shape = MaterialTheme.shapes.small
) {
TextButton(
onClick = action,
modifier = Modifier.fillMaxWidth()
) {
Row(
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
) {
Image(
imageVector = icon,
contentDescription = null, // decorative
colorFilter = ColorFilter.tint(textIconColor),
alpha = imageAlpha
)
Spacer(Modifier.width(16.dp))
Text(
fontWeight = FontWeight.Bold,
text = label,
style = MaterialTheme.typography.body2,
color = textIconColor
)
}
}
}
}

@Composable
internal fun ModalDrawerContentHeader() {
Column(
modifier = Modifier
.fillMaxWidth()
.height(180.dp)
.padding(20.dp)
) {

Image(
modifier = Modifier
.size(60.dp)
.clip(CircleShape),
painter = painterResource(id = R.drawable.img_moto_girl),
contentDescription = null
)
Spacer(modifier = Modifier.weight(1f))
Text(text = "Smart Tool Factory", fontWeight = FontWeight.Bold, fontSize = 22.sp)
Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(text = "smarttoolfactory@icloud.com")
Spacer(modifier = Modifier.weight(1f))
Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = null)
}
}
}
}

0 comments on commit 21b8e10

Please sign in to comment.