자
돌아오신 것을 환영합니다
저는 방금 전에 맛있는 수프를 먹었고, 이제 buttons(버튼)에 대한 이야기를 마무리할 준비가 되었습니다
1번 button(버튼)을 먼저 살펴보도록 하겠습니다
이 button(버튼)을 클릭했을 때에는 아무 일도 일어나지 않습니다. 이 버튼은
저희의 dropdown menu(드롭다운 메뉴)를 위한 버튼입니다
저희가 하고 싶은 것은 이 iExpanded(입력 확장됨)이
즉 input button(입력 버튼)을 위한 input(입력) expanded(확장됨) 말입니다
심지어는 추가할 수도 있습니다
여기에 input button(입력 버튼)이라고 적고 어떤 button(버튼)이 어떤 button(버튼)인지 파악할 수 있도록 말입니다
여기에 input button(입력 버튼)인 이 것이 있고
여기 안에 넣을 수 있는데 이것은 input box(입력 상자)입니다
그리고 이것을 닫은 후 spacer(스페이서) 뒤에 output box(출력 상자)가 있습니다
이렇게 하면 조금 더 읽기에 좋을 것입니다
그리고 이것은 output button(출력 버튼)이 되겠습니다
그리고 이제 저희가 어떤 것을 수정하고 있는지 이해하기 더 쉬워질 것입니다
여기에 저희의 input button(입력 버튼)이 있고
지금 저희가 하고자 하는 것은 굉장히 간단한 것입니다
그것이 어떻게 보면 Jetpack Compose의 매력입니다
button(버튼)을 클릭했을 때 iExpanded(입력 확장됨)을 True로 세팅하고자 합니다
자
그러고 나면 확장되었으니(expanded) dropdown menu(드롭다운 메뉴)가 무너질 것이고
즉 다음으로 세팅해야 할 것이 iExpanded(입력 확장됨)인 것입니다
이정도면 대강 전부입니다
멋지지 않습니까?
그렇죠?
저희가 지금 사용자 인터페이스(UI)에서 일어나는 것들을 복합적으로 저장하는 변수를 사용하고 있기
때문에
이제 저희의 dropdown menu(드롭다운 메뉴)가 확장될 것입니다
그리고 onDismissRequest(요청 거부시에) 에는
여전히 아무것도 없습니다
네
iExpanded(입력 확장됨)에 그것이 있으니
출력에도 적용해보기 전에 한번 테스트를 해봅시다
가동시켜보겠습니다
준비가 되었고
보시다시피
열 수 있습니다
아직 닫을 수는 없습니다
무엇인가 고를 수는 있지만 닫을 수는 없다는 것을 보실 수 있습니다
즉 이것이 여기서 골라야 할 것이 되겠습니다
dropdown menu(드롭다운 메뉴)의 아이템 중 하나를 클릭했을 때를 위해서 말입니다
방금 전에 저희가 아이템을 열거나 확장할 수 있는 것을 보셨습니다
저희의 dropdown menu(드롭다운 메뉴)에
이것은 button(버튼)을 위한 iExpanded(입력 확장됨)이었고
이젠 다른 button(버튼)인 output button(출력 버튼)을 위해서
같은 것을 반복하면 됩니다
즉 여기가 oExpanded(출력 확장됨)이었고
저희가 Output(출력) expanded(확장됨)을 의미하는 oExpanded(출력 확장됨)라는 변수를 만들었었습니다
그리고 다음으론 output box(출력 상자) 안의 dropdown menu(드롭다운 메뉴)를 위한 expanded(확장된) parameter(매개변수)가
oExpanded(출력 확장됨)이도록 해야 합니다
즉 oExpanded(출력 확장됨)의 값이 바뀔 때까지 기다리고
그것이 발생하면 dropdown menu(드롭다운 메뉴)가 열리는 것입니다
좋습니다
이제는 이 dropdown menu(드롭다운 메뉴)가 False로 설정되어있도록 하는 방법을 다시 한 번
찾아야 합니다
즉 언제가 dropdown menu(드롭다운 메뉴)를 다시 한 번 무너뜨리기에 적절한
때이겠습니까
어떻게 생각하십니까
사실은 이 onDismissRequest(요청 거부시에) 안에 두 가지의 상황이 모두 있습니다
네
왜냐하면 이 request(요청)은 사용자가 메뉴를 닫을 것을 요청했을 때 작동하기 때문입니다
예를 들면 메뉴창 바깥을 터치하는 것처럼 말입니다
즉 화면의 다른 곳을 터치하게 되면 또 다시 무너지게 된다는 말입니다
다시 닫힐 것입니다
즉 매우 간단하게 iExpanded(입력 확장됨)가 다시 False로 설정되어야 한다고 할 수 있습니다
이제 이것을 왼쪽의, 즉 input(입력)으로
테스트해봅시다`
그리고 다음에 오른쪽의 것으로도 테스트해보도록 하겠습니다. 여기에 센티미터, 미터 등이 있는 것을 볼 수 있고
즉 열 수 있다는 말입니다
그리고 메뉴창이 아닌 아무 곳이나 클릭해보면
onDismissRequest(요청 거부시에)가 작동된 것을 볼 수 있습니다. 이것은 저희들의 아이템 바깥을 클릭했을 때에 일어나는
event(이벤트)이기 때문입니다
그리고 저희가 dropdown menu(드롭다운 메뉴) 아이템 중 아무것이나 클릭했을 때에도 같은 일이 일어나야 하겠습니다
메뉴가 닫혀야 합니다
즉 여러가지를 작동시키고 싶은 것입니다
그것이 일어났을 때에 말입니다
저희가 확실히 하고 싶은 것은
여기에 있군요
input unit(입력 단위)가 센티미터로 변경되는 것입니다
여기에 '미터로', '피트로', '밀리미터로'라고도 적혀있습니다
그런데 그 전에 저희의 출력 dropdown menu(드롭다운 메뉴)도 마찬가지로 onDismissRequest(요청 거부시에)
oExpanded(출력 확장됨)=False의 값을 가지도록 해줍시다
됐습니다
멋진 점은 저희가 시각 효과 같은 것을 수동적으로 조정할 필요가 없이
state(상태)만 조절해주면 된다는 점입니다
변수 값을 조정해야 하는 것입니다
그리고 그렇게 하면, 사용자 인터페이스(UI)가 저희의 개입 없이 자동적으로 조정되는 것입니다`
전에 제가 XML의 팬이라고 말씀드린 적이 있는데, 이런 것은 XML과 작업하면
매우 힘들어집니다
그리고 그 점이 Jetpack Compose의 멋진 점입니다
그렇게 말할 수 있습니다
자
이제 위로 스크롤해서 input box(입력 상자) 안의 dropdown menu(드롭다운 메뉴)의 첫번째
dropdown menu(드롭다운 메뉴) 아이템을 봐봅시다
input box(입력 상자)가 있고
그리고 box(상자), button(버튼), 그리고 dropdown menu(드롭다운 메뉴)가 있습니다
이제 이 현재 센티미터라고 하고 있는 dropdown menu(드롭다운 메뉴) 아이템을 클릭했을 때, 저희가 하고자 하는 것들이
몇 가지 있습니다
어떤 것들이냐 하면
저희의 텍스트가
이해를 위해 사용자 인터페이스(UI)를 봐봅시다
제가 이 메뉴를 열고 센티미터를 클릭합니다
즉 제가 사용할 input value(입력값)이
센티미터로 설정되어있기를 바란다는 말이 되겠습니다
그리고 동시에 제 dropdown menu(드롭다운 메뉴)가 무너지도록 해야겠습니다
여기 이 메뉴가 숨겨진다는 말입니다
즉 iExpanded(입력 확장됨)가 False로 설정될 것입니다
이제 그런 것들을 전부 조정해봅시다
iExpanded(입력 확장됨)=False
이것이 첫번째이고
다른 것들이 어떤 것들이 있었습니까
input unit(입력 단위)가 센티미터로 설정되어있어야 하니
여기 이 텍스트를 복사하고 그 다음으로는
conversion value(전환 값), 혹은 conversion factor(전환 요소)가 되겠습니다
그 값을 0.01로 해야 합니다. 왜냐하면 센티미터는 미터의 100분의 1이기 때문입니다
그것이 여기서 하고자 하는 말입니다
즉 미터의 1%이고 저희의 conversion factor(전환 요소)의 값으로 설정하고 있습니다
저희의 conversion factor(전환 요소)는 여기의 이 값이었습니다. boolean(불리언)의 mutable state(가변적인 상태)of 인데
즉 boolean(불리언)을 저장한다는 말입니다
boolean(불리언)을 remembers(리멤버)한다는 말입니다
이것은 일반적으로 사용자가 입력한 것에 적용할 multiplier(승수)가 된다는 말인데
출력값을 요청된 데이터 유형, 혹은 두번째 옵션에 들어맞는 값으로 제공하기 위해서
입니다
지금으로서는 저희는 저희가 고른 두 값인 센티미터에서 미터로
할 것이지만
다른 옵션들도 있습니다
dropdown menu(드롭다운 메뉴) 안을 보시면 피트와 밀리미터도 있습니다
그럼 이제 가동을 시켜보고 아이템 중 하나를 클릭했을 때 iExpanded(입력 확장됨)가 False로 설정되는지 한 번
봐봅시다
센티미터를 제외하고 아무거나 클릭해보도록 하겠습니다
센티미터를 클릭하면 무너지는 것을 볼 수 있습니다
그러나 미터를 클릭하면 아무것도 일어나지 않습니다
왜냐하면 아직 수정되지 않았기 때문입니다. 따라서 저희 dropdown menu(드롭다운 메뉴)의 다른 모든 아이템들에게 같은 과정을 반복해줘야
합니다
그렇게 하기 전에 function(함수)를 하나 만들고 싶은데 이 함수는
아무 아이템이나 클릭했을 때 단위를 자동으로 변환해줄 함수입니다
자, output box(출력 상자)의 dropdown menu(드롭다운 메뉴)가 더 적합할 것 같은데 왜냐하면 그렇게 하고 나서
업데이트를 할 수 있기 때문입니다
그러나 두 방법으로 다 할 수 있겠습니다
오른쪽을 업데이트하거나 왼쪽을 업데이트하거나 말입니다
즉 어느 쪽이든 굉장히 빠르게 할 수 있는 업데이트를 진행할 것입니다
자, 오늘의 강의는 이정도에서 마무리 짓겠습니다
다음 강의에서 뵙겠습니다