돌아오신 것을 환영합니다
이번 동영상에서는 dropdown menu(드롭다운 메뉴)를 생성하는 것을 가능하게 해 주는 box layout(박스 레이아웃)을 들여다보겠습니다
이런 결과물을 얻을 것입니다
여기 dropdown menu(드롭다운 메뉴)가 있습니다
dropdown(드롭다운)은 클릭하여야 표시되기 때문에
지금 보이지 않습니다
하지만 이 작은 화살표로 dropdown이라는 것은 알 수 있습니다
Box와 Button을 이용하여 dropdown UI 요소를 직접 만들어 보겠습니다
좋습니다
이제 만들기를 시작하겠습니다
그러므로 애플리케이션으로 돌아오도록 하겠습니다
onClick과 Toast(토스트) implementation(구현)은 없애도록 하겠습니다
지금으로서는 필요 없습니다
Button(버튼)의 모양새와 기능에 대해 알려드리기 위해 만들었던 것입니다
정확히는 버튼과 상호작용이 가능하다는 것을 보여드리려 하였습니다
좋습니다
Button은 완전히 삭제하겠습니다
잠시 후에 새로운 Button을 추가할 것입니다
이제 이 Row 안에 Box를 추가하고자 합니다
Box라는 Composable(컴포저블)이 있습니다
이것은 modifier(수정자)에 따라 레이아웃을 그리거나
포인터 입력이 가능한, 내용 없는 상자입니다
이 Box를 사용할 것입니다
그 다음 중괄호( {} )를 입력합니다
이제 Box를 import하여야 합니다
Import function 'Box'를 클릭합니다
Box를 한 번 더 만듭니다
왜 계속 import를 해야 하는 것인지 궁금하실 수도 있습니다
이 윗부분 어딘가에 Box가 추가되었을 것입니다
여기 어디에 있어야 하는데... 찾았습니다 layout.Box입니다
이유는 애플리케이션의 용량을 최대한 작게 하여야 하기 때문에
사용하지 않을지도 모르는 패키지를 다운받지 않도록 하기 위함입니다
실제로 사용할 import들만 받는 것이 훨씬 더 효율적입니다
예를 들어, 더 이상 Toast는 사용하지 않을 것입니다
Button도 마찬가지이며
LocalContext도 사용하지 않을 것 같습니다
이것들은 사실상 class 또는 코드 조각 아니면 class들의 summary(개요)/library(라이브러리)이며
당연히 저장 공간을 차지합니다
그러므로 많은 것들을 import할수록 애플리케이션은 저장 공간을 더 많이 필요로 합니다
마지막에 사용자의 스마트폰에 설치되었을 때
효율을 최대로 하여 사용자의 저장 공간을 낭비하지 않도록 하여야 합니다
Box에 대하여 이야기하였습니다
box(상자)는 행이나 열과 같은 레이아웃 요소입니다
Composable(컴포저블)들을 정렬하고 세로로 나열한다는 점에서 차이가 있습니다
보통 복잡한 레이아웃이나 커스텀 레이아웃을 만드는 데 사용됩니다
dropdown 메뉴는 홀로 존재할 수 없고 위치를 정해 주는 부모가 필요하기 때문입니다
구글에서 아직 부모 없이 dropdown 메뉴를 존재하게 하는 법을
개발하지 못한 것 뿐일 수 있습니다
미래에는 바뀔 수도 있다고 생각합니다
하지만 현재로서는 이러한 방식을 사용합니다
먼저 Row에 Box를 둔 다음, 그 내부에 클릭하면
selector(셀렉터)를 display(표시)하는 Button을 생성합니다
각각의 selector는 Box를 하나 가집니다
trigger(트리거)되었을 때 표시됩니다
Box 두 개를 추가하였으니 Button도 추가합시다
Row 안의 Box 내부입니다
이곳에 Button을 이렇게 추가할 것입니다
자동으로 생성되었습니다
content(내용)으로는 Text를 입력합니다
텍스트는
"Select"라고 입력하겠습니다
좋습니다
이것이 text입니다
그런데 Button에는 Icon이라는 것도 추가할 수 있습니다
Icon은 import하여야 합니다
Icon 위에 커서를 올린 다음 Import를 선택합시다
지금은 Composable을 사용하고 있기 때문에 @Composable Icon을 import하도록 하겠습니다
android.graphics.drawable이 아닌 @Composable Icon입니다
그리고 Icon에게도 정보를 주어야 합니다
그러지 않으면 문제가 발생할 것입니다
제가 사용하려는 아이콘은 작은 화살표입니다
summary(개요) 또는 class(클래스)의 일종인 Icons.에서
Icons.도 import하여야 하네요
Icons.Default.ArrowDropDown을 import합시다
이 창의 왼쪽에 보이듯이
화살표들의 모양이 표시됩니다
Android(안드로이드)에 기본적으로 있는 항목들입니다
이것들은 수동으로 import하여야 하는 icon(아이콘)이 아닙니다
이것이 제가 사용하려고 하는 icon입니다
Icon에게는 기본적으로 parameter(매개변수) 등의 부가적인 정보가 필요합니다
아이콘 모양과 contentDescription이 필요하다고 되어 있습니다
contentDescription은 비어 있는 채로 둘 것입니다
contentDescription이 무엇이냐면
'접근성 서비스가 이 아이콘이 무엇을 상징하는지 설명할 때 사용하는 텍스트'라고 합니다
'이것은 항상 제공되어야 합니다' 왜 gprovided라고 써 있는지 모르겠습니다
'사용자가 의미 있는 동작을 취하는 데 이용되지 않는 장식 목적의 아이콘일 때를 제외하고'
'이 텍스트는 stringResource 등을 이용하여 현지화되어야 합니다'
이것이 무슨 뜻이나면, 이곳에 텍스트를 추가하면
그 텍스트는 시각장애인 등에게 화면에 무엇이 있는지 음성으로 설명하는 데 사용된다는 것입니다
시각에 장애가 있어 접근성 서비스를 사용하고 있는데
아이콘이 무슨 기능을 하는지 모르겠으며 애플리케이션에서도 설명이 제공되지 않을 때
contentDescription이 그 역할을 하는 것입니다
누군가 이 아이콘 위에 커서를 두고 있거나, Android의 접근성 서비스가
화면에 있는 것들을 알려주고 있을 때 무슨 말을 할 지 여러분이 정하실 수 있습니다
Button, Text, text, Select, Icon, 그 다음 contentDescription에 적힌 내용을 말할 것입니다
예를 들어 'Arrow Down(아래 화살표)'라고 말할 수 있겠습니다
접근성을 이용하고 싶으시다면 이렇게 추가할 수 있습니다
그 다음 이 내용을 현지화하여
여러 언어로 접근이 가능하도록 하려면
훨씬 나중에 강좌에서 다룰 Android의 현지화 기능을 사용하여야 합니다
지금은 입력하지 않아도 괜찮습니다
이제 아이콘이 있습니다
Select 다음에 아래로 향하는 화살표가 있는 것이 보입니다
두 번째 Box에도 똑같이 해 주겠습니다
이곳에 붙여 넣겠습니다
이 버튼도 Select라고 되어 있습니다
이제 항목 두 개가 있습니다
Button 블록이 가진 요소가 하나가 아닌 두 개가 되었다는 점에 주목하십시오
이것이 Button(버튼)인지 레이아웃인지 헷갈리실 수도 있습니다
레이아웃은 아닙니다만, Composable(컴포저블)들은 유연하여
기본적이지 않은 인터페이스에 맞추어 수정될 수 있습니다
그러므로 원하는 모습으로 커스터마이징 할 수 있습니다
정석적인 dropdown(드롭다운)이 아닌 Button(버튼)이지만
Button인 상태로 이용할 것입니다
지금 사용자 인터페이스는 꽤 그럴듯 하지만, 스마트폰에서의 모습을 한 번 보면
모든 객체들이 애플리케이션 화면의 왼쪽 위에
몰려 있어서 보기 좋지 않습니다
다음 동영상에서는 이 문제를 해결하도록 하겠습니다
다음 영상에서 뵙겠습니다