좋습니다
이제 애플리케이션에 AlertDialog가 생겼으니 이와 같이 보이도록 만들겠습니다
약간의 배경이 있습니다
모서리가 약간 둥글고
텍스트가 있습니다
그리고 텍스트 입력 창이 있고 텍스트 입력 창이 또 있고 그 사이 약간의 공간이
있습니다
그 다음 양 옆에 버튼이 있습니다
이를 달성하기 위해 composables(컴포저블)을 몇 개 만들어야 합니다
I'M AN ALERT DIALOG 텍스트를 대체하는 것입니다
이를 어떻게 할 수 있을까요?
먼저 dialog에, AlertDialog를 수정할 때 추가할 것은
제목을 부여하는 것입니다
실수로 올바른 AlertDialog를 사용하지 않은 것을 발견했습니다
여기 보시면 AlertDialog를 위한 다양한 선택 사항이 있는 것이 보입니다
android.app 아래의 AlertDialog가 있고
또 이 4개 파라미터가 있는 것도 보이는데 request modifier(요청 제어자) 속성과 내용에
있습니다
그리고 파라미터가 아주 많은 것도 있습니다
아이콘, 제목, 텍스트, 모양, 컨테이너 색상 등 다양한 속성을
설정할 수 있습니다
사실 저는 이 AlertDialog를 사용하려고 합니다
전에 설정한 것을 사용하는 것이 아닙니다
이해하셨나요?
이와 같이 간혹 같은 기능을 위해 다른 도입 방법이 있습니다
지금 새로 사용하려는 AlertDialog의 경우
confirmButton이 필요합니다
클릭할 수 있는 버튼이 필요합니다
여기 다른 AlertDialog는 버튼이 필요 없습니다
onDismissRequest만 필요합니다
지난 영상에서 설정한 AlertDialog를 삭제하고
대신 새로운 것을 사용합니다
여전히 onDismissRequest가 요청될 때 showDialog가 거짓으로 설정되었는지
확인해야 합니다
이제 confirmButton이 생겼습니다
지금은 놔두겠습니다
이제 title이라는 속성을 정의할 수 있습니다
여기에 Add Shopping Item이라는 텍스트를 설정합니다
그 다음 텍스트 내용이 무엇일지 설정할 수 있습니다
그 전에 여기에 괄호를 닫아야 합니다
이제 여기에 이와 같은 텍스트 속성이 있습니다
여기에서 텍스트를 '틀리게' 사용할 것입니다
여기에 텍스트만 사용하는 것이 아니고
더 넓게 사용할 것인데 보시면 텍스트가 컴포저블을 수락합니다
즉 AlertDialog의 내용은 텍스트도 가능하지만 컴포저블이라고 되어 있으므로
다양한 종류의 컴포저블을 사용할 수 있다는 의미입니다
이해하셨나요?
속성 이름과 달리 텍스트로 제한되는 것이
아닙니다
이해하셨나요?
대신에 Column을 사용할 것입니다
이 Column에서 OutlinedTextField를 사용합니다
이전에 사용했던 것과 동일합니다
좋습니다
여기 onValueChange와 value(값)이 있습니다
OutlinedTextField의 값을 무엇으로 해야 할까요?
저는 항목의 이름이라고 생각합니다
하나의 창이 있고
프로젝트를 확인해 보겠습니다
이 부분이 항목의 이름이 될 것이고
이 부분은 수량이 될 것입니다
따라서 이름과 수량을 알아야 합니다
여기 var showDialog가 있습니다
이제 itemName을 위한 var가 필요합니다
by remember로 하고 빈 string(스트링)을 추가합니다
그리고 빈 스트링을 닫습니다
이것이 항목 이름이 됩니다
그리고 itemQuantity를 넣습니다
여기도 스트링을 사용합니다
수량은 보통 숫자이지만
수정 텍스트 창에 넣는 것이기 때문에
여기에도 스트링을 사용합니다
따라서 이 OutlinedTextField에서 값이 필요하다고 불평합니다
따라서 value를 itemName으로 설정하고 onValueChange에
즉 값이 바뀔 때마다
잠시만요
여기 테두리가 있는 입력 창에
보시다시피 테두리가 있습니다
테두리로 감싸져 있습니다
항목 이름을 변경하게 됩니다
onValueChange에 중괄호를 넣고
itemName을 it라고 설정합니다
그렇다면 it이 무엇일까요?
it는 onValueChange가 제공하는 것입니다
잘 보이도록 줄에 따로 넣겠습니다
스트링이라고 되어있습니다
즉, 스트링을 제공하는 것입니다
테두리가 있는 텍스트 입력 창에 값을 변경할 때마다
테두리가 있는 텍스트 입력 창에 있는 스트링을 의미합니다
이제 입력 창을 조금 더 디자인해 보겠습니다
이를 각자 별도의 줄에 넣어서 더 잘 읽힐 수 있도록 합니다
이제 OutlinedTextField를 어떻게 더 바꿀 수 있을까요?
singleLine 입력만 가능하게 만들 것입니다
즉, 테두리 있는 입력 창에 다중 줄을 허용하지 않는 것입니다
그 다음 외형을 수정하기 위해 제어자를
Modifier.fillMaxWidth로 설정합니다
사용 가능한 넓이 모두를 사용할 수 있게 됩니다
그리고 모든 방향에서 약간의 padding(패딩)을 추가합니다 저는 8 dp로 설정할 것입니다
모든 방향에서 약간의 공간을 달라는 것입니다
이제 재실행하면 AlertDialog에
한 입력 창이 보일 것입니다
테두리가 있는 텍스트 입력 창입니다
로딩될 때까지 조금 기다려 보겠습니다
시간이 조금 걸렸는데
1분 정도 걸린 것 같습니다만 이제 준비되었습니다
이제 Add Item을 클릭하면 AlertDialog에 기본 설정으로 파란 배경 색상이 추가된 것이 보입니다
Add Shopping Item 텍스트 크기도 기본 설정 크기입니다
이것이 우리가 추가한 입력 창입니다
이제 클릭하여 작동하는지 확인합니다
이제 테두리가 있는 텍스트 입력 창에 텍스트를 입력하면 사용자 인터페이스가 바로 업데이트
됩니다
또한 옆을 클릭하면 사라지는 것도
보입니다
Add Item을 클릭하고
다른 곳을 클릭하면 사라집니다
한 가지 주목하실 점이 있습니다
이제 다른 AlertDialog를 사용하고 있으니 더 이상 OptIn(ExperimentalMaterial
3Api가 필요 없어졌습니다
이를 알려드리려고 한 것입니다
전에는 사용했으나 더 이상 필요 없습니다
좋습니다
다음 영상으로 가기 전에 다른 OutlinedTextField도 추가하겠습니다
여기 밑에 추가하겠습니다
다른 입력 창에는 itemName이 아닌 itemQuantity,가 들어가야 합니다
onValueChange는 itemQuantity로 설정합니다
나머지는 동일할 것입니다
이제 다시 실행하며 사용자 인터페이스가 이와 같이 보일 것입니다
여기 있습니다
이제 텍스트 입력 창이 두 개 추가된 것이 보입니다
다음 영상에서 뵙겠습니다