다시 오신 것을 환영합니다
이번 영상에서 AlertDialog를 구축하는 것을 시작하겠습니다. 여기 보이는 상자입니다
이 상자를 만들기 위해 여러 방법이 있습니다
저는 AlertDialog를 사용할 것입니다 기본적으로 사용자에게 무언가를 알리는
composable(컴포저블)입니다 예를 들어 예, 아니오가 있습니다
저희 같은 경우는 화면과 같은 것을 달성하기 위해 이 컴포저블을 '잘못' 사용할 것입니다
여기 보이는 팝업 상자입니다
유감스럽게도 생각할 수 있고 애플리케이션에 필요한 모든 시각적인 아이템이
포장되어 준비되어 있지 않습니다
따라서 간혹 다른 목적으로 사용되는 기능이나 컴포저블을 이용하여
여러분의 필요에 따르게 수정해도 제대로 작동
될 것입니다
비록 사용자에게 알림을 주는 AlertDialog지만 저희도 사용할 수 있습니다
State(상태)를 이용하여 데이터를 확보하고 저장하는 등의 용도로 사용할 수 있습니다
따라서 먼저 dialog가 표시될지 말지에 대한 상태부터 시작하겠습니다
여기 쇼핑 목록 앱 가장 위부터 시작하겠습니다
showDialog라는 변수를 설정합니다 이를 통해
dialog를 사용하거나 사용하지 않는다는 정보를 관리합니다
안에 Boolean(불리언)의 mutableStateOf만 포함합니다
즉, showDialog입니다
이 showDialog가 참이라면 AlertDialog를 보여주고
showDialog가 거짓이라면 가릴 것입니다
이제 이를 Column 바로 아래 넣습니다
따라서 Column 밑으로 이동하여
여기에 넣습니다. 더 잘 볼 수 있도록 닫아 놓았습니다
여기에서 확인합니다 if(showDialog)이 참이라면
AlertDialog를 보여준다고 할 것입니다
전에 말한 것과 같이 AlertDialog는 무언가를 보여주는
컴포저블입니다
이 AlertDiaglog에 onDismissRequest가 있습니다
전에 onDismissRequest를 사용하여 다른 곳을 클릭하면 사라지게 만드는
것을 보았습니다
드롭다운 메뉴를 만들었을 때 봤습니다
이제 넣을 것은 굉장히 간단합니다
showDialog는 onDismissRequest가 사용될 때 거짓으로 설정되어야 합니다
AlertDiaglog가 작동되기 위해서 Opt in for 'ExperimentalMaterial3Api'를
추가해야 합니다
무슨 말일까요?
다시 말하자면 이 dialog가 이와 같이 다양한 기능을 제공하지만 아직 '실험적' 단계에 있다는
의미입니다
즉, 전에 말한 것과 같이
Android 14에 모든 것을 위한 코드가 준비된 것이 아니라는 것입니다
미래에 이것이 변한다면 이 import 또는 문장을 추가할 필요가 없지만
지금은 AlertDiaglog를 사용하기 위해 추가해야 합니다
따라서 @OptIn(ExperimentalMaterial3Api)라고 되어 있습니다
이제 AlertDiaglog를 사용할 수 있습니다
단순화하기 위해 여기에 넣을 유일한 것은
짧은 텍스트라고 합니다
작동되는지 한번 보겠습니다
'I'M AN ALERTDIALOG'를 입력합니다
좋습니다
이 showDialog가 언제 참이기를 원하나요?
즉, AlertDialog가 언제 보이기를 원하나요?
생각해 보시기 바랍니다
우리의 UI를 다시 봤을 때 이것이 언제 나타나야 할까요?
이 Add Item 버튼을 클릭할 때마다 입니다
그럼 이것을 작업해 보겠습니다
여기 Button이 있고 onClick이 있는데 아무것도 도입하지 않았습니다
따라서 버튼을 클릭해도
아무것도 발생하지 않습니다
따라서 버튼을 클릭할 때마다 showDialog 변수가
여기 StateOf 유형인 변수가 열립니다
아니 변수가 참으로 설정됩니다
이해하셨나요?
그러면 dialog가 열리는데 showDialog가 참일 때 AlertDialog가 보이도록 했기 때문입니다
여기 if 문장으로 인해 실행되는 것입니다
그리고 AlertDialog가 아닌 부분을 클릭하면 이 이벤트가 작동됩니다
이 이벤트의 이름은 onDismissRequest입니다 다시 말하자면 showDialog가
거짓이 되는 것이며 AlertDialog가 보이다가 안 보이는 것으로
바꾸는 것입니다
다시 말하자면 이 if 문장이 showDialog가 참인지 물어보고
dialog가 아니라고 한다면
AlertDialog가 보이지 않게 되는 것입니다
이와 같이 모두 빠르게 작동합니다
이래서 Jetpack Compose API가 점점 더 마음에 듭니다
전에 보여드린 이 화면 말고 이제 Add Item을 클릭하고 어떤 AlertDialog가 보이는지
확인해 보겠습니다
여기에 앱을 설명하는 어떠한 UI도 보이지 않지만 클릭하면
다른 곳을 클릭하면 사라집니다
약간의 애니메이션 효과까지 있습니다 보이셨나요?
밑에서 부터 날아오고 클릭하면 위쪽 방향으로
사라집니다
지금까지 간단하게 AlertDialog를 알아봤습니다
다음 영상에서 AlertDialog를 디자인하겠습니다
다음 영상에서 뵙겠습니다