Jetpack Compose: Drawer Menu

MainActivity.kt

import android.annotation.SuppressLint
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Share
import androidx.compose.runtime.Composable
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.unit.dp
import com.example.topappbar.ui.theme.TopAppBarTheme
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TopAppBarTheme {
                MainScreen(applicationContext)
            }
        }
    }
}

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun MainScreen(context: Context) {
    val coroutineScope = rememberCoroutineScope()
    val scaffoldState = rememberScaffoldState()

    Scaffold(
        scaffoldState = scaffoldState,
        snackbarHost = { host ->
                       SnackbarHost(hostState = host){ data ->
                           Snackbar(
                               backgroundColor = Color.White,
                               snackbarData = data,
                               shape = RoundedCornerShape(20.dp),
                               contentColor = Color.Green,
                               modifier = Modifier.padding(bottom = 100.dp)
                           )
                       }
        },
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Menu")
                },
                backgroundColor = Color.White,
                navigationIcon = {
                    IconButton(
                        onClick = {
                            coroutineScope.launch {
                                scaffoldState.drawerState.open()
                            }
                        }
                    ) {
                       Icon(
                           imageVector = Icons.Filled.Menu,
                           contentDescription = "Menu")
                    }
                },
                actions = {
                    IconButton(
                        onClick = {
                            coroutineScope.launch{
                                val result = scaffoldState.snackbarHostState.showSnackbar(
                                    message = "Item deleted!",
                                    actionLabel = "Undone"
                                )
                                if(result == SnackbarResult.ActionPerformed){
                                    Toast.makeText(context, "Item recovered", Toast.LENGTH_SHORT)
                                        .show()
                                }
                            }
                        }
                    ) {
                        Icon(
                            imageVector = Icons.Filled.Delete,
                            contentDescription = "Delete")
                    }
                    IconButton(
                        onClick = {
                            Toast.makeText(context, "Share", Toast.LENGTH_SHORT).show()
                        }
                    ) {
                        Icon(
                            imageVector = Icons.Filled.Share,
                            contentDescription = "Share")
                    }
                }
            )
        },
        drawerContent = {
            DrawerHeader()
            DrawerBody()
        }
    ) {

    }
}

DrawerNavigation.kt

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun DrawerHeader() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .height(170.dp)
            .background(Color.Green),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Header",
            fontSize = 20.sp,
            color = Color.White
        )
    }
}

@Composable
fun DrawerBody(){
    LazyColumn(modifier = Modifier.fillMaxWidth()){
        items(5){
            Text(
                modifier = Modifier.fillMaxWidth().clickable {

                }.padding(10.dp),
                text = "Menu item $it"
            )
        }
    }
}

1 комментарий для “Jetpack Compose: Drawer Menu”

  1. Сергей

    Сергей привет! я добавил в DrawerNavigation.kt в меню разные названия и синий цвет + картинки или же ну правильнее создать отдельный файл типа меню и всё переносить туда?

    дабавил вот так если неверно поправь

    data class MenuItem(val name: String, val icon: Int)
    @Composable
    fun DrawerBody(){
    val menuItems = listOf( //названия только для тест
    MenuItem(“Home”, R.drawable.ic_home),
    MenuItem(“Profile”, R.drawable.ic_profile),
    MenuItem(“Settings”, R.drawable.ic_settings),
    MenuItem(“Messages”, R.drawable.ic_messages),
    MenuItem(“Notifications”, R.drawable.ic_notifications)
    )

    LazyColumn(modifier = Modifier.fillMaxWidth()){
    items(menuItems.size){ index ->
    val menuItem = menuItems[index]
    Row(
    modifier = Modifier.fillMaxWidth().clickable {
    // Здесь можно добавить действие, которое будет выполняться при клике на элемент
    }.padding(10.dp),
    verticalAlignment = Alignment.CenterVertically
    ){
    Icon(
    modifier = Modifier.size(24.dp),
    painter = painterResource(id = menuItem.icon),
    contentDescription = “MenuItem icon”,
    tint = Color.Blue
    )
    Text(
    modifier = Modifier.padding(start = 10.dp),
    text = menuItem.name,
    color = Color.Black
    )
    }
    }
    }
    }

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован.