2670008040.안드로이드 UI 구현26561282009-04-17T14:31:49Zhttp://zbum.springnote.com/pages/26700082009-02-09T07:27:28Z<h1 style="TEXT-ALIGN: center;">안드로이드 UI 구현</h1>
<h2 style="TEXT-ALIGN: center;">안드로이드 UI 컴포넌트 레이아웃 및 이벤트 헨들링</h2>
<p style="TEXT-ALIGN: right;">작성: zbum</p>
<h3>I. 개요</h3>
<p>GUI 프로그래밍을 학습할 때, UI컴포넌트 배치 및 이벤트 헨들링은 반드시 거처가야할 과정이다. Android 역시 GUI를 가진 응용프로그램이므로 컴포넌트 레이아웃 및 이벤트 헨들링에 대한 기본 지식을 알아야 할 것이다.</p>
<h3>II. 본론</h3>
<p>안드로이드 개발을 위한 컴포넌트 배치, 이벤트 헨들러 적용을 순서로 진행한다.</p>
<h4>1) UI컴포넌트 배치</h4>
<p>EditText와 Button을 위에서 아래 방향으로 배치한 Activity를 구현한다. 목표 하는 어플리케이션의 UI는 아래와 같다.</p>
<p><img title="UI컴포넌트_배치.jpg" class="attachment" src="/pages/2670008/attachments/1168836" alt="UI컴포넌트_배치.jpg" /></p>
<p>먼저 안드로이드 프로젝트를 생성한다. 프로젝트 명과 패키지명을 com.jjis.test.event로 입력하고 Activity명과 Application명을 TestEventHandler로 입력한다.</p>
<p>Finish버튼을 클릭하면 기본 프로젝트 프레임이 생성되는데... 여기에서 어플리케이션 실행시 처음 표시되는 Activity인 com.jjis.test.event를 열어본다.</p>
<p><img title="TestEventHandler.jpg" class="attachment" src="/pages/2670008/attachments/1168848" alt="TestEventHandler.jpg" /></p>
<p>TestEventHandler의 생성시 CallBack되는 onCreate 메서드의 내용에서 setContentView메서드를 이용하여 R.layout.main을 ContentView로 설정한다. 따라서 TestEventHandler 엑티비티가 화면에 표시하는 내용은 <PROJECT>/res/layout/main.xml 에 의해서 결정된다. 결국 <PROJECT>/res/layout/main.xml 을 수정하면 화면이 변경된다는 말이다. (헉헉..똑같은 말을 몇번하는건지... 이런 걸 두고 짬뽕 100 그릇 이라고 하던가?)</p>
<p><img title="main_xml.jpg" class="attachment" src="/pages/2670008/attachments/1168858" alt="main_xml.jpg" /></p>
<p> </p>
<p>이렇게 main.xml만 수정하고 Project를 실행시켜 본다.</p>
<p>유후~!! 목표하던 그림이 나왔다.. 나만 기쁜가? </p>
<p> </p>
<p>그림 나왔다고 그냥 만족하고 넘어가면 안된다. 왜 EditText와 Button이 한줄에 하나씩 세로 방향으로 배치되었을까? 여기서 알고 넘어가야 할 것이 있다. 그것은 바로 Layout이다.</p>
<p> </p>
<h5>Layout</h5>
<p>main.xml을 보면 EditText와 Button을 감싸고 있는 LinearLayout가 있다. Layout라는 말에서 컴포넌트 배치 규칙을 의미하는 컴포넌트(?)인 것을 알 수 있다.</p>
<p>Layout 의 종류를 확인해 보자.</p>
<ul class="list-type-5">
<li>FrameLayout : 레이아웃 관리자 중에서 가장 간단한 형태이다. FrameLayout은 단순히 하위 View를 좌상 코너에 붙여 버린다. 하위 뷰가 멀티인 경우, 무조건 좌상에 붙어 버리므로 , 이전 컴포넌트를 덮어버리는 형식으로 추가된다. 이걸 어디다 쓰라고 만든건지..쩝.</li>
<li>LinearLayout : LinearLayout은 각 하위 View를 수직 또는 수평으로 직선상에 배치한다. 수직 레이아웃은 하위 View를 추가할 때마다 한개의 행에 한개씩만 배치된다. LinearLayout에서는 하위 View에 대해서 weight 속성을 부여할 수 있다. 이 속성은 View의 상대적인 크기를 결정하게 된다.</li>
<li>RelativeLayout : RelativeLayout 를 사용하면 각 스크린 경계에 대하여 View의 상대 위치를 지정할 수 있게 된다.</li>
<li>TableLayout: View를 행과 열방식의 그리드로 배치할 수 있게 한다. 여러개의 행 이나 열을 합할수도 있고 열의 크기를 줄이거나 늘일수도 있다.</li>
<li>AbsoluteLayout: 각각의 View를 절대 좌표에 위치시킨다.</li>
</ul>
<p> </p>
<h4>2) 이벤트 헨들러</h4>
<p>화면을 대충 만들었으니 버튼이 동작하도록 만들어 줘야 한다.</p>
<p>Clear 버튼의 기능은 EditText에 입력된 내용을 초기화(삭제)해 주는 기능이다.</p>
<p> </p>
<p>먼저 맴버 변수로 두개의 뷰(Button, EditText)를 선언한다.</p>
<ol class="code">
<li> private Button clearButton;<br />
private EditText editText;</li>
</ol>
<p> </p>
<p>onCreate안에 뷰의 레퍼런스를 가져와서 맴버 변수에 할당한다.</p>
<ol class="code">
<li> editText = (EditText)findViewById(R.id.editText);<br />
clearButton = (Button)findViewById(R.id.clearButton);</li>
</ol>
<p> </p>
<p>clearButton에 setOnClickListener메소드로 이벤트를 달아준다...</p>
<ol class="code">
<li> clearButton.setOnClickListener(new OnClickListener(){<br />
@Override<br />
public void onClick(View v) {<br />
editText.setText("");<br />
}<br />
});</li>
</ol>
<p> </p>
<p>아래가 전체 소스 코드이다.</p>
<p><img title="스크린샷-Java_-_com.jjis.test.event-src-com-jjis-test-event-TestEventHandler.java_-_Eclipse_Platform_.png" class="attachment" src="/pages/2670008/attachments/1169836" alt="스크린샷-Java_-_com.jjis.test.event-src-com-jjis-test-event-TestEventHandler.java_-_Eclipse_Platform_.png" /></p>
<p> </p>
<p>이제 결과를 볼 시간이다. 에뮬레이터에서 Clear 버튼을 클릭하면 입력창의 문자열이 사라짐을 확인 할 수 있다.</p>
<p><object height="364" width="445"><param name="movie" value="http://www.youtube.com/v/dnjJDzyNjE4&hl=ko&fs=1&border=1" /><param name="allowFullScreen" value="true" /><embed src="http://www.youtube.com/v/dnjJDzyNjE4&hl=ko&fs=1&border=1" type="application/x-shockwave-flash" height="364" width="445" /></object></p>
<h3>III. 결론</h3>
<p>UI 컴포넌트의 배치 및 이벤트 처리방법을 확인하였다.</p>
<p> </p>
<p> </p>
zbumzbum95보고서