[Jetpack Compose] TopAppBar(Toolbar) - 메뉴 클릭 이벤트 (Toast, Alertdialog, Dropdownmenu)

안녕하세요.

 

이번 시간에는 지난시간에 구현한 TopAppBar 컴포넌트의 메뉴에서 다양한 클릭 이벤트를 구현해보도록하겠습니다.

 

Navigation Icon클릭시에는 간단한 Toast 메시지를(나중에 Drawer Layout 구현 예정),

actions의 Share Icon 클릭시에는 AlertDialog를,

마지막으로 MoreVert Icon 클릭시에는 DropDownMenu가 나타나도록 만들어보겠습니다.

 

완성된 화면은 아래와 같습니다.

 

 

 

 

 

STEP 01 : Toast 메시지

private fun showToast(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}

 

@Composable
fun ToolbarSample(name: String) {
    // Context 참조
    val context = LocalContext.current 
    
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
                contentColor = MaterialTheme.colors.primary,
                backgroundColor = Color.Yellow,
                navigationIcon = {
                    IconButton(onClick = {
                    	// 함수호출
                        showToast(context, "Navigation Icon Clicked!")
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Menu"
                        )
                    }
                },
                elevation = 12.dp,
                actions = {
                    IconButton(onClick = {
                        shouldShowDialog = true
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Share,
                            contentDescription = "Share",
                            tint = MaterialTheme.colors.primary
                        )
                    }
                    
                    IconButton(onClick = {
                        dropdownMenuExpanded = true
                    }) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert,
                            contentDescription = "MoreVert",
                            tint = MaterialTheme.colors.primary
                        )
                    }
                }
            )
        }
    ) {

    }
}

 

STEP 02 : AlertDialog

 

@Composable
fun ToolbarSample(name: String) {
    val context = LocalContext.current

	// 
    var shouldShowDialog by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
                contentColor = MaterialTheme.colors.primary,
                backgroundColor = Color.Yellow,
                navigationIcon = {
                    IconButton(onClick = {
                        showToast(context, "Navigation Icon Clicked!")
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Menu"
                        )
                    }
                },
                elevation = 12.dp,
                actions = {
                    IconButton(onClick = {
                    	// 
                        shouldShowDialog = true
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Share,
                            contentDescription = "Share",
                            tint = MaterialTheme.colors.primary
                        )
                    }
                    
                    // 함수호출
                    AlertDialogSample(shouldShowDialog = shouldShowDialog) {
                        shouldShowDialog = false
                    }
                    
                    IconButton(onClick = {
                        dropdownMenuExpanded = true
                    }) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert,
                            contentDescription = "MoreVert",
                            tint = MaterialTheme.colors.primary
                        )
                    }

                }
            )
        }
    ) {

    }
}

 

@Composable
fun AlertDialogSample(
    shouldShowDialog: Boolean,
    onDismiss: () -> Unit
) {
    if (shouldShowDialog) {
        AlertDialog(
            onDismissRequest = onDismiss,
            title = {
                Text(text = "Share")
            },
            text = {
                Text(text = "Do you want to share this content?")
            },
            confirmButton = {
                Button(
                    onClick = onDismiss
                ) {
                    Text(text = "OK")
                }
            }
        )
    }
}

STEP 03 : DropDownMenu

@Composable
fun ToolbarSample(name: String) {
    val context = LocalContext.current

    var shouldShowDialog by remember { mutableStateOf(false) }
    //
    var dropdownMenuExpanded by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = name) },
                contentColor = MaterialTheme.colors.primary,
                backgroundColor = Color.Yellow,
                navigationIcon = {
                    IconButton(onClick = {
                        showToast(context, "Navigation Icon Clicked!")
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Menu"
                        )
                    }
                },
                elevation = 12.dp,
                actions = {
                    IconButton(onClick = {
                        shouldShowDialog = true
                    }) {
                        Icon(
                            imageVector = Icons.Filled.Share,
                            contentDescription = "Share",
                            tint = MaterialTheme.colors.primary
                        )
                    }
                    
                    AlertDialogSample(shouldShowDialog = shouldShowDialog) {
                        shouldShowDialog = false
                    }
                    
                    IconButton(onClick = {
                    	//
                        dropdownMenuExpanded = true
                    }) {
                        Icon(
                            imageVector = Icons.Filled.MoreVert,
                            contentDescription = "MoreVert",
                            tint = MaterialTheme.colors.primary
                        )
                    }

					//
                    DropDownMenuSample(context, dropdownMenuExpanded) {
                        dropdownMenuExpanded = false
                    }
                }
            )
        }
    ) {

    }
}

 

@Composable
fun DropDownMenuSample(
    context: Context,
    dropdownMenuExpanded: Boolean,
    onDismiss: () -> Unit
) {
    DropdownMenu(
        expanded = dropdownMenuExpanded,
        onDismissRequest = onDismiss,
        offset = DpOffset(x = 0.dp, y = 0.dp),
        modifier = Modifier
            .background(color = Color.DarkGray)
    ) {
        DropdownMenuItem(onClick = {
            showToast(context, "My Profile Menu Clicked!")
            onDismiss
        }) {
            Text(text = "My Profile", color = Color.White)
        }
        DropdownMenuItem(onClick = {
            showToast(context, "Settings Menu Clicked!")
            onDismiss
        }) {
            Text(text = "Settings", color = Color.White)
        }
        DropdownMenuItem(onClick = {
            showToast(context, "Delete All Menu Clicked!")
            onDismiss
        }) {
            Text(text = "Delete All", color = Color.White)
        }
    }
}

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetToolbarTheme {
                ToolbarSample(name = "Toolbar Sample")
            }
        }
    }
}