[Android Tutorial #05] Activity 전환하기(액티비티/화면 전환하기)

안드로이드 튜토리얼 목차 - Android Tutorial List

[Android Tutorial #05] Activity 전환하기(액티비티/화면 전환하기)

제가 처음에 안드로이드 프로그래밍을 하면서 가장 궁금했던건, 화면을 어떻게 다른 화면으로 바꾸는가! 였습니다.

터치나 클릭, 데이터 입력과 결과값 출력, 그리고 화면전환을 할 수 있다면, 이후의 애플리케이션 개발은 상당히 수월해 질 수 있죠.

그래서 버튼 클릭에 대해서 살펴본 후, 바로 화면 전환에 대해서 알아보려합니다.
(이전글 : [Android Tutorial #04] Button(버튼)과 클릭 이벤트])
 

---

Activity와 View(Layout xml) 만들기

이번 주제는 앞에서 말했다시피, 액티비티의 전환(화면의 전환)입니다.

하나의 화면에서 다른 화면으로 바꾸기 위해, 2개의 Activity, 그리고 2개의 View가 필요하겠죠? 

애플리케이션이 시작할때 보여지는 액티비티를 FirstActivity.java, 그리고 FirstActivity에서 이동하려는 액티비티를 SecondActivity.java 라고 해봅니다.
또 이 액치비티들과 연결될 View들을, first_activity.xml, second_activity.xml 이라고 해보죠. 

그리고 아래 그림과 같은 쌍으로 사용하게 되겠죠.

이번 예제에서 2개의 java파일(Activity), 2개의 xml(layout)파일을 만들고 수정할 겁니다. 

---

아래 스크린샷들을 따라서 프로젝트를 만들어 봅시다.

 

- 프로젝트 이름은 AndoirTutorial05라고 정해보았습니다.

---

Build Target은 Andoird 2.2를 선택해줍니다.
(아직은 2.2의 API를 사용하지 않아 하위 버전도 괜찮습니다.)

---

- 패키지 이름은 각각 개별적으로 정의해도 문제없습니다.
- Create Activity에서 Activity의 이름을 FirstActivity로 변경했습니다.

---

- 프로젝트가 정상적으로 생성되었는지를 왼쪽의 Project Explorer에서 확인합니다.



처음에 xml의 이름을 first_activity.xml, second_activity.xml이라고 하기로 했으니, main.xml의 이름을 first_activity.xml로 바꾸어줍니다.
 

- Mac 단축키 : Command + Option + R
- Windows 단축키 : Alt + Shift + R



main.xml의 이름을 바꾸어주면, FirstActivity에서 다음과 같이 에러가 날것입니다.
setContentView(R.layout.main)을 setContentView(R.layout.first_activity)로 변경해줍니다.

---

이제 SecondActivity.java와 second_activity.xml을 만들어줄 차례입니다.

먼저 second_activity.xml을 layout폴더에 생성합니다.

Project Explorer에서 만들어져 있는걸 확인한 후, second_activity.xml을 수정해줍니다.

 

res/layout/second_activity.xml 
<?xml version="1.0" encoding="utf-8"?> <!-- SecondActivity에 View로 사용되는 second_activity.xml 우연화 2011.12.09 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <!-- 두번째 액티비티임을 알려주는 텍스트 뷰 --> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="두번째 액티비티입니다." android:textSize="20sp" android:textColor="#ffffff" /> </LinearLayout>

---

이번에는 SecondActivity를 추가할 차례입니다. AndroidManifest를 열어보도록 하죠.

잘 따라오셨다면 아래와 같은 화면을 보실 수 있을겁니다.
여기에서 하단의 Application Tab을 선택합니다.

 


애플리케이션 탭의 왼쪽 아래에 보면 아래와 같은 부분이 보입니다.
Application Nodes라는 영역이죠. [Add...] 버튼을 클릭합니다.

그럼 아래 스크린샷 처럼 선택하는 창이 생기는데,
우리는 Activity를 만들려고 하는 것이니 Activity를 선택하고 [OK]버튼을 클릭합니다.




여기까지 하셨으면, Application Nodes 영역에 Activity가 추가된 것이 보입니다.
이 액티비티를 선택하면 오른쪽에 Attributes for Activity 영역이 나타납니다.
보기만해도 Name*을 누르고 싶게 생겼죠? 눌러줍니다.

클래스를 새로 생성하는 창이 뜹니다. 클래스의 이름을 정하는 Name부분에 SecondActivity라고 이름을 입력한 후 [Finish]버튼을 눌러 생성해줍니다.

Project Explorer를 보면 만들려던 파일들이 모두 만들어져 있는것을 볼 수 있습니다.

 

나중에 다루겠지만, Activity를 AndoirdManifest.xml에서 추가한것은,  AndoirManifest.xml에서 Activity를 추가 했을때, Manifest에 자동으로 액티비티가 등록되기때문입니다.   개발 초기에는 직접 클래스로 생성했을 경우,  Activity를 Manifest에 추가하지 않아서 에러나는 경우가 많기때문에,  프로젝트를 전체적으로 이해하기 전에는 AndroidManifest.xml을 이용해 액티비티를 추가하는게 좋습니다.   AndroidTutorial05 프로젝트의 AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="me.croute.tutorial.example05" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:label="@string/app_name" android:name=".FirstActivity" > <intent-filter > <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="SecondActivity"></activity> </application> </manifest>

---

Activity와 xml 연결하기, 화면 전환하기

이제 만들어준 Activity들과 xml을 연결할 차례입니다.

Activity는 setContentView(~~) 라는 메소드를 통해, layout폴더에 있는 xml 파일을 Activity에 연결하고, xml에 만들어둔 뷰를 화면에 보여 줄 수 있습니다.

---

first_activity.xml을 수정합니다.

수정한 first_activity.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" android:orientation="vertical" > <Button android:id="@+id/first_activity_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="두번째 액티비티로 이동" /> </LinearLayout>

---

수정한 first_activity.xml과 FristActivity.java를 연결해줍니다.

수정한 FirstActivity.java 
package me.croute.tutorial.example05; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; /** * [Android Tutorial #05] Activity 전환(액티비티/화면 전환) * 첫번째 액티비티 * * @author croute * @since 2011.12.09 */ public class FirstActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.first_activity); // 버튼을 뷰와 연결한다. Button button = (Button) findViewById(R.id.first_activity_button); // 버튼에 클릭 리스너를 등록한다. // 등록된 클릭 리스너는 버튼에 클릭 이벤트가 발생했을때 처리할 수 있다. button.setOnClickListener(new OnClickListener() { // 클릭 이벤트를 처리한다. public void onClick(View v) { // 무엇을 할지 정의 하는 인텐트를 생성한다. // FirstActivity에서 SecondActivity로 이동 할것을 정의하였다. Intent intent = new Intent(FirstActivity.this, SecondActivity.class); // 인텐트에 있는 정보대로 액티비티를 시작한다. startActivity(intent); } }); } }

---

프로젝트를 실행해봅니다.

아래와 같이 애플리케이션이 실행된 모습을 볼 수 있습니다.
버튼을 눌러 이동해 봅니다. 

두번째 액티비티로 이동한 모습입니다.
그런데 위에서 xml에 입력해 놓은 텍스트가 보이지 않는군요?
아! SecondActivity와 second_activity.xml을 연결해 주지 않았습니다. 

---

기본으로 생성된 SecondActivity.java
package me.croute.tutorial.example05; import android.app.Activity; import android.os.Bundle; public class SecondActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } }



수정한 SecondActivity.java
package me.croute.tutorial.example05; import android.app.Activity; import android.os.Bundle; /** * [Android Tutorial #05] Activity 전환(액티비티/화면 전환) * 두번째 액티비티 * * @author croute * @since 2011.12.19 */ public class SecondActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 현재의 액티비티(SecondActivity)와 second_activity.xml을 연결해준다. setContentView(R.layout.second_activity); } }

---

이제 다시 프로젝트를 실행시켜봅시다.

이번에는 만들어둔 대로 화면이 제대로 출력된 것을 확인할 수 있습니다.



처음 액티비티를 생성하고 setContentView(R.layout.file_name);을 해주지 않으면, 액티비티는 화면에 아무것도 보여주지 못합니다. 기초적인것이지만, 반드시 기억해주어야하는 것이죠.

새롭게 액티비티를 생성해서, 이 액티비티에 보여줄 화면을 res/layout/ 폴더에 xml로 만들어주고, 액티비티와 연결해주기만 하면 됩니다.

---

프로젝트 압축파일

AndroidTutorial05.zip

---