#04. 예제로 알아보는 GUI 디자인 - (2) 코드 작성하기

저번 강좌에서, 왼쪽의 화면을 띄우도록 레이아웃을 작성하는 것과, 레이아웃의 각 객체 (EditText, ListView)와 코드의 객체들을 연결해주는 것까지 알아보았습니다.

그럼, 이쯤에서 다시 한 번 이 어플리케이션의 목적을 짚고 넘어가보도록 하겠습니다. 이 예제 어플리케이션의 목적은 과연 무엇일까요??

일단, 사용자의 할 일을 알아야 할 것입니다. 그리고, 입력받은 할 일들을 리스트의 형태로 표시하려면 그 내용을 저장하고 있어야 할 테구요.

또한, 사용자가 특정 입력을 수행하면 (가운데 버튼을 누른다던지, 카메라 버튼을 누른다던지 등..) 그를 인식하여 원하는 작업을 수행하게끔 해야 할 것입니다. 여기에서는 사용자로부터 입력받은 할 일을 리스트에 저장하는 일을 하도록 만들어야겠지요.

이러한 일들을 간략하게 정리해 본다면, 다음과 같습니다.

1. 사용자로부터 할 일을 입력받는다.
2. 입력받은 할 일을 리스트에 저장한다.
3. 저장된 리스트로부터 정보를 불러와 
    화면에 해당 정보를 표시한다.
4. 추가로 사용자의 입력이 있을 경우,
    입력을 받고 새로운 내용을 리스트에 추가한다.

이렇게 해 놓고 보니, 아직 1번 단계까지밖에 오지 못하였네요. 안습 -_-..... 자, 그럼 빨리 다음 단계로 넘어가보도록 하죠.

다음 단계는 입력받은 일을 리스트에 저장해야 합니다. 즉, 리스트에 입력받은 내용을 추가해야하는 것이죠.

사실, 이 단계 자체가 리스트에 저장하는 것 뿐 아니라, 리스트에 저장을 하려면 일단 사용자의 요구가 있어야 하기에 사용자의 입력을 감지하는 리스너(Listener)를 추가해줘야 합니다. 뭐, 그건 조금 후에 따로 다룰 것이니 일단은 리스트에 추가하는 부분부터 보도록 하겠습니다.

일단, 이전의 코드에서 다음과 같이 코드를 추가합니다.

package com.androidhuman.ToDoList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.EditText;
import java.util.ArrayList; // ArrayList를 사용하기 위해 import 합니다.
import android.widget.ArrayAdapter; // ArrayAdapter를 사용하기 위해 import 합니다.

public class HelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ListView myListView = (ListView)findViewById(R.id.myListView);
        final EditText myEditText = (EditText)findViewById(R.id.myEditText);
       
        final ArrayList<String> todoItems = new ArrayList<String>(); // 할일을 저장할 ArrayList를 생성합니다.
        
        final ArrayAdapter<String> aa; // (1) ArrayList의 내용을 ListView와 연동시켜주는 ArrayAdapter를 정의합니다.
        aa=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, todoItems);// (2) ArrayAdapter 설정

        myListView.setAdapter(aa);// (3) ListView와 ArrayAdapter를 연결합니다.
        
        }
}

조금 생소한 것이 나왔을지 모르겠네요. 여기서 중점으로 봐야 할 것은 바로 ArrayAdapter입니다.
안드로이드의 ListView에 원하는 항목을 표시해주기 위해서는 표시해 줄 데이터가 필요합니다. 이러한 "원본 데이터"와 GUI상의 ListView 객체를 서로 연결해주는 역할을 하는 것이 바로 ArrayAdapter 입니다.

이 예제에서는 사용자로부터 입력받은 할 일 데이터를 ArrayList에 저장하였으므로 그 리스트를 ListView와 연결시키기 위하여 aa라는 ArrayAdapter를 생성하였습니다. ArrayAdapter의 생성자는 여러 가지가 있는데, 여기에서 사용된 생성자는 다음과 같습니다.

public ArrayAdapter (Context context, int resource, T[] objects) 


context	현재 컨텍스트(액티비티)를 뜻합니다.
resource	ListView에서 사용할 리스트의 유형입니다.
objects	ListView에 표시될 데이터 원본 (ArrayList) 입니다.

 현재 ArrayList는 사용자의 할 일, 즉 String을 저장하므로 String형 ArrayList를 선언하였으며, ArrayAdapter 또한 이와 동일하게 선언하였습니다(주석 1번). ArrayAdapter를 설정하면서, 연결해줄 List로 todoItems를 선택하였으며, 리스트 유형은 기본 유형을 선택하였습니다 (주석 2번). 마지막으로, ListView 객체와 ArrayAdapter를 연결해주었습니다(주석 3번).

이로서 ArrayList와 ListView의 연결이 완료되었습니다. 이 상태에서 ArrayList에 데이터가 들어가게 되면, 그 내용이 ListView에 표시되게 됩니다.

그렇다면, 이제 ArrayList에 데이터를 입력할 수 있게끔 해야하겠지요?
지금 우리가 원하는 것은 사용자가 EditText에 할 일을 입력하면, 입력받은 것을 ArrayList에 저장하고, 그것이 ListView에 표시됨으로서 화면에 표시되게끔 하는 것입니다.

그렇다면, 이 과정을 위해 무엇이 필요할까요? 사용자가 특정 버튼을 눌렀을 때에만 할일이 저장하게끔 해야겠지요?? (사용자가 아무 버튼이나 눌러도 입력이 된다면 대략 낭패겠지요.....)
 
아무튼, 이를 위해서는 사용자의 입력을 받는 리스너(Listener)가 필요한데, 이 예제에서는 사용자의 키 입력을 통해 EditText의 내용을 ArrayList로 전달하도록 하겠습니다. 즉, KeyListener를 사용할 것입니다. KeyListener를 추가시켜 최종적으로 어플리케이션을 완성하는 것은 다음 강좌에서 다루도록 하겠습니다.