brunch

빠르게 배우는 안드로이드-4 ClickEvent -1

by 윤형도




위의 강의에 이어서 진행합니다.

이번 강의에서의 목표는 텍스트를 입력받아 버튼을 누르면 자신이 원하는 텍스트가 화면에 표시되는 예제를 만들어 볼것입니다.

1*rY6-D5Cw-XKlgNixbqEPZg.png

위 와같은 화면을 구성할것입니다.

화면을 구성하기에 앞서 UI 요소에대해 간단한 설명을 먼저 하겠습니다.

1*Ei9IyGHtZhVbvEGKWPXSWQ.png

TextView라는 위젯으로 글자를 입력할수있는 위젯입니다.

1*wXsHUrb0U_9eRTbF6c2DYg.png

버튼은 클릭을할수있는 위젯입니다.

1*CZtaYRBHROWSETn4GRaigA.png

Plain Text라는 것은 글자를 입력받을수 있는 위젯으로 UI도구에는 PlainText라고 써있지만 EditText라는 이름을 가지고 있습니다.

이밖의 다양한 위젯들을 Drag&Drop하여 경험해보시는것을 권장합니다.

각 위젯들을 클릭하고 드래그 하여 다음과같은 위치로 배열합니다.

1*wyLEURUMySrW1aMetfd_Fg.png
1*MHiLcZ2ByV4VAEeJpimi_Q.png

text를 입력받고 클릭시 해당 Text가 나와야되는데 이미 글자가 입력되어져 있습니다. 다음과 같은 방법으로 Text를 변경할수있습니다.

1*2kLXdGnzyqXD6zbs150ZAw.png

변경할 text의 위젯을 더블클릭하여 다음과같은 메뉴를 띄운뒤 수정합니다.

1*flQ5enDiZhp7WWi4_1bboA.png

Component Tree에서 변경할 위젯 선택후

아래의 Properties의 Text에서 Text를 변경합니다.

1*1FHXgRQ73jI50LORqpmcUg.png

저는 처음의 textview의 Text를 지우고 Button의 Text를 Click으로 변경하였습니다.

1*8nFh1oKaUqujVMFcHyry8A.png

이제 준비가 거의다 끝났습니다. 아래의 현재 디바이스 그림 아래에 Design/Text 중 Design이 선택되어있는데 Text를 선택해보도록합니다.

1*o7aa8XMKW5nxj033ZYAfLQ.png

다음과 같은 화면으로 변경 될것입니다. Designer를 통해 UI를 배치하고 속성을 변경한것들이 XML형식의 코드로 구성되어져있음을 확인 할수있습니다.
디자인이 불편하시다면 위의 Text Mode를 통해서 도 UI수정이 가능합니다.

안드로이드에서는 위의 XML을 저장시 자동으로 자바코드로 변경합니다.
여러분이 하실일은 이 위젯이 어떤 위젯인지를 알기위해 ID를 등록해야 자바코드에서 여러분이 호출한 위젯을 활용할수있습니다.

다시 Design으로 돌아가 id를 변경하도록합니다 id의 변경방법은 text의 변경방법과 동일합니다 단지text부분이 아닌 id부분을 변경하시면됩니다.

TextView의 id를 display_textview
Button의 id를 click_Btn
EditText(위젯에서는 plainText)의 id를 input_editText로 변경하겠습니다.



Component Tree가 다음과 같이변경된것을 볼수있습니다.

1*P886o9BeSqS1HmN8jXugqA.png


keyword
매거진의 이전글빠르게 배우는 안드로이드-3 HelloWorld -2