역시 이론적인 공부는 나랑 맞지 않는 것 같다.
앞으로는 Tutorial 위주로 공부를 하다 중요한 개념이 나오면 따로 포스팅을 하는 방식으로 바꿔야겠다.

 Tutorial 첫 번째의 내용은 화면 전환이다. 첫 번째 화면에서 이름을 입력 받아 두 번째 화면에서 이름과 함께 메세지를 출력하는 애플리케이션을 만들어 볼 것이다. 화면의 흐름을 그림으로 그리자면 아래 그림과 같다.

 이제 애플리케이션을 만들어보자.

1. Eclipse를 실행하여 새로운 아래와 같이 설정하고 Android Project를 만든다.
   

   Project name : HelloWorldExt Application name : Hello World Extension Package name : com.bbare.helloworldext Create Activity : HelloWolrdExt Build Target : Android 2.1 API 7

   
   
2. 프로젝트가 만들어지면 아래와 같은 구조를 가지고 있을 것이다.
   

   res/layout 폴더 아래에 main.xml 파일이 보일 것이다. 이 Tutorial에선 필요없으니 헷갈리지 않게 삭제해버리자.

   
   
3. res/layout 폴더에 layout 설정이 들어갈 xml 파일을 2개 만든다.
   

   xml 파일을 추가하는 방법은 아래 그림과 같이 도구모음에서 아이콘을 누르는 방법이 있고,

   layout 폴더에서 마우스 오른쪽을 클릭한 다음 New->Other.. 를 클릭하고 Android->Android XML file을 선택하여 추가하는 방법이 있다.

   위의 방법 중 하나를 따라해보면 New Android XML File이라는 창이 나온다. Project : HelloWorldExt File : firstview.xml What type of resource would you like to create? : Layout Select the root element for the XML file : RelativeLayout 위의 항목을 입력하거나 선택한 다음 Finish 버튼을 눌러 XML 파일을 생성한다. ※. xml 파일 이름에 대문자로 쓰지말자. 아래와 같은 유효하지 않다는 메시지를 볼 수 있을것이다.     Invalid file name: must contain only [a-z0-9_.]

   firstview.xml을 만들었다면 아래와 같은 설정으로 secondview.xml 파일을 하나 더 만들자 Project : HelloWorldExt File : secondview.xml What type of resource would you like to create? : Layout Select the root element for the XML file : LinearLayout

   firstview.xml 파일에 아래와 같이 xml 코드를 추가한다. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/tvMsg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="이름을 입력하세요" /> <EditText android:id="@+id/etName" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/tvMsg" /> <Button android:id="@+id/btnOk" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_marginLeft="10px" android:layout_below="@id/etName" android:text="OK" /> </RelativeLayout>

   secondview.xml 파일에도 아래와 같이 xml 코드를 추가한다. <?xml version="1.0" encoding="utf-8"?> <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent">   <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tvHelloMsg" android:text="Welcome" android:textStyle="bold" android:gravity="center" />   </LinearLayout>

   RootElement(Layout) 위에서 레이아웃으로 쓰인 RelativeLayout이나 LinearLayout은 다음 기회에 다른 Layout과 같이 포스트 할 계획이다. 지금은 RelativeLayout은 상대적 위치 기반 Layout이고 LinearLayout은 단일방향 Layout이라고 기억하면 되겠다. android:id 각 엘리멘트 속성으로 있는 android:id에 들어가 있는 값 중 “@+id/~~~” 형식으로 들어가 있는데 이 것은 안드로이드 SDK로 하여금 R.java의 id부분에 ~~~의 id값을 추가(+)하라는 뜻으로 해석하면 되겠다. 다른 엘리멘트에서 참조하는 값으로 id가 들어갈 경우에는 +는 쓰이지 않고 “@id/~~~” 형식으로 쓰인다. layout_width, layout_height layout_width, layout_height의 값으로 쓰인 fill_parent, wrap_content는 layout을 채우느냐 해당 컨텐츠가 필요한 만큼의 크기를 가지느냐를 나타냅니다. gravity view의 정렬에 대한 속성 layout_below RelativeLayout 일 경우 이 속성에서 지정한 컴포넌트 밑에 해당 컴포넌트가 위치한다. layout_alignParentRight 부모요소의 오른쪽 끝에 정렬할 것인지의 값을 가지는 속성. true, false 값을 가진다.

   
   
4. layout 설정이 다 되었다면 HelloWorldExt Activity를 수정해보자.
   

   HelloWorldExt.java 파일을 열어 아래와 같이 수정한다. package com.bbare.helloworldext; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class HelloWorldExt extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.firstview); Button btnOk = (Button)findViewById(R.id.btnOk); btnOk.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { EditText etName = (EditText)findViewById(R.id.etName); setContentView(R.layout.secondview); TextView tvHelloMsg = (TextView)findViewById(R.id.tvHelloMsg); tvHelloMsg.setText("Welcome!! " + etName.getText().toString()); } }); } }

   setContentView(int layoutResId) setContentView 메소드는 layoutResId에 해당하는 layout을 화면에 구성하는 역활을 한다. 이 예제에서는 Activity가 Create되었을 때 firstview를 화면에 구성하고, btnOk 버튼이 클릭되었때 secondview를 화면에 구성한다. findViewById(int id) findViewById 메소드는 현재 화면에서 인자 값으로 받은 id에 해당하는 컴포넌트를 찾는 역활을 한다. 만약 현재 화면에서 구성되어 있지 않다면 null값을 반환한다. Button.setOnClickListener(OnClickListener l) 클릭 이벤트를 잡아낼 Listener를 설정한다. 인자로 들어가는 값은 OnClickListner로 onClick 메소드를 구현하여 인자로 넣어주면 된다. 실질적으로 클릭 시 실행되어야 하는 구문은 onClick 메소드 안에 추가하면 된다. TextView.setText(CharSequence text), TextView.getText() 메소드 이름에서도 알 수 있듯이 텍스트를 설정하거나 텍스트를 가져오는 역활을 한다.

   
   
5. 코드까지 수정을 마쳤다면 Ctrl+F11 을 눌러 에뮬레이터를 실행해 보자.
   
   
6. 에뮬레이터에서 돌아가기 버튼을 눌러보자.
   예상과는 달리 첫 화면이 아닌 다른 화면으로 이동할 것이다.
   
   돌아가기 버튼은 Activity가 쌓여있는 Stack 구조에서 이전 Activity를 다시 불러오는 동작을 한다.
   헌데 오늘 만든 Activity는 각각의 Activity의 화면이 아닌 한 Activity에서 두 가지의 View로 구성 했기 때문에 돌아가기 버튼이 제대로 동작하지 않는다. Activity의 용도에 따라 구현방식이 틀리겠지만, 보통 애플리케이션에서는 이럴 경우 2개의 Activity로 구현하는 것이 맞을 것이다.
   
   다음 포스팅에는 하나의 Activity에서 두 가지 View로 구성되어 있는 지금의 구조에서 두개의 Activity에 각각의 화면을 가지는 구조로 바꾸어 보도록 하겠다.