안드로이드 UI 구현
안드로이드 UI 컴포넌트 레이아웃 및 이벤트 헨들링
작성: zbum
I. 개요
GUI 프로그래밍을 학습할 때, UI컴포넌트 배치 및 이벤트 헨들링은 반드시 거처가야할 과정이다. Android 역시 GUI를 가진 응용프로그램이므로 컴포넌트 레이아웃 및 이벤트 헨들링에 대한 기본 지식을 알아야 할 것이다.
II. 본론
안드로이드 개발을 위한 컴포넌트 배치, 이벤트 헨들러 적용을 순서로 진행한다.
1) UI컴포넌트 배치
EditText와 Button을 위에서 아래 방향으로 배치한 Activity를 구현한다. 목표 하는 어플리케이션의 UI는 아래와 같다.
먼저 안드로이드 프로젝트를 생성한다. 프로젝트 명과 패키지명을 com.jjis.test.event로 입력하고 Activity명과 Application명을 TestEventHandler로 입력한다.
Finish버튼을 클릭하면 기본 프로젝트 프레임이 생성되는데... 여기에서 어플리케이션 실행시 처음 표시되는 Activity인 com.jjis.test.event를 열어본다.
TestEventHandler의 생성시 CallBack되는 onCreate 메서드의 내용에서 setContentView메서드를 이용하여 R.layout.main을 ContentView로 설정한다. 따라서 TestEventHandler 엑티비티가 화면에 표시하는 내용은 <PROJECT>/res/layout/main.xml 에 의해서 결정된다. 결국 <PROJECT>/res/layout/main.xml 을 수정하면 화면이 변경된다는 말이다. (헉헉..똑같은 말을 몇번하는건지... 이런 걸 두고 짬뽕 100 그릇 이라고 하던가?)
이렇게 main.xml만 수정하고 Project를 실행시켜 본다.
유후~!! 목표하던 그림이 나왔다.. 나만 기쁜가?
그림 나왔다고 그냥 만족하고 넘어가면 안된다. 왜 EditText와 Button이 한줄에 하나씩 세로 방향으로 배치되었을까? 여기서 알고 넘어가야 할 것이 있다. 그것은 바로 Layout이다.
Layout
main.xml을 보면 EditText와 Button을 감싸고 있는 LinearLayout가 있다. Layout라는 말에서 컴포넌트 배치 규칙을 의미하는 컴포넌트(?)인 것을 알 수 있다.
Layout 의 종류를 확인해 보자.
- FrameLayout : 레이아웃 관리자 중에서 가장 간단한 형태이다. FrameLayout은 단순히 하위 View를 좌상 코너에 붙여 버린다. 하위 뷰가 멀티인 경우, 무조건 좌상에 붙어 버리므로 , 이전 컴포넌트를 덮어버리는 형식으로 추가된다. 이걸 어디다 쓰라고 만든건지..쩝.
- LinearLayout : LinearLayout은 각 하위 View를 수직 또는 수평으로 직선상에 배치한다. 수직 레이아웃은 하위 View를 추가할 때마다 한개의 행에 한개씩만 배치된다. LinearLayout에서는 하위 View에 대해서 weight 속성을 부여할 수 있다. 이 속성은 View의 상대적인 크기를 결정하게 된다.
- RelativeLayout : RelativeLayout 를 사용하면 각 스크린 경계에 대하여 View의 상대 위치를 지정할 수 있게 된다.
- TableLayout: View를 행과 열방식의 그리드로 배치할 수 있게 한다. 여러개의 행 이나 열을 합할수도 있고 열의 크기를 줄이거나 늘일수도 있다.
- AbsoluteLayout: 각각의 View를 절대 좌표에 위치시킨다.
2) 이벤트 헨들러
화면을 대충 만들었으니 버튼이 동작하도록 만들어 줘야 한다.
Clear 버튼의 기능은 EditText에 입력된 내용을 초기화(삭제)해 주는 기능이다.
먼저 맴버 변수로 두개의 뷰(Button, EditText)를 선언한다.
- private Button clearButton;
private EditText editText;
onCreate안에 뷰의 레퍼런스를 가져와서 맴버 변수에 할당한다.
- editText = (EditText)findViewById(R.id.editText);
clearButton = (Button)findViewById(R.id.clearButton);
clearButton에 setOnClickListener메소드로 이벤트를 달아준다...
- clearButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
editText.setText("");
}
});
아래가 전체 소스 코드이다.
이제 결과를 볼 시간이다. 에뮬레이터에서 Clear 버튼을 클릭하면 입력창의 문자열이 사라짐을 확인 할 수 있다.
III. 결론
UI 컴포넌트의 배치 및 이벤트 처리방법을 확인하였다.