위의 강의에 이어서 진행합니다.
이번 강의에서의 목표는 텍스트를 입력받아 버튼을 누르면 자신이 원하는 텍스트가 화면에 표시되는 예제를 만들어 볼것입니다.
위 와같은 화면을 구성할것입니다.
화면을 구성하기에 앞서 UI 요소에대해 간단한 설명을 먼저 하겠습니다.
TextView라는 위젯으로 글자를 입력할수있는 위젯입니다.
버튼은 클릭을할수있는 위젯입니다.
Plain Text라는 것은 글자를 입력받을수 있는 위젯으로 UI도구에는 PlainText라고 써있지만 EditText라는 이름을 가지고 있습니다.
이밖의 다양한 위젯들을 Drag&Drop하여 경험해보시는것을 권장합니다.
각 위젯들을 클릭하고 드래그 하여 다음과같은 위치로 배열합니다.
text를 입력받고 클릭시 해당 Text가 나와야되는데 이미 글자가 입력되어져 있습니다. 다음과 같은 방법으로 Text를 변경할수있습니다.
변경할 text의 위젯을 더블클릭하여 다음과같은 메뉴를 띄운뒤 수정합니다.
Component Tree에서 변경할 위젯 선택후
아래의 Properties의 Text에서 Text를 변경합니다.
저는 처음의 textview의 Text를 지우고 Button의 Text를 Click으로 변경하였습니다.
이제 준비가 거의다 끝났습니다. 아래의 현재 디바이스 그림 아래에 Design/Text 중 Design이 선택되어있는데 Text를 선택해보도록합니다.
다음과 같은 화면으로 변경 될것입니다. 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가 다음과 같이변경된것을 볼수있습니다.