탭 레이아웃(Tab Layout) 사용하기 - Intent 방식2

이 자료들은 팁스소프트에서 제공하는 [ 알짜배기 ] 프로그램을 이용하면 더 편리하게 볼수 있습니다.

* 알짜배기 프로그램 받기 - http://www.tipssoft.com/bulletin/tb.php/QnA/8406

* 안드로이드 강좌 목록 - http://www.tipssoft.com/bulletin/tb.php/old_bbs/501

이번 강좌에서는 Intent 를 이용하여 탭 레이아웃을 구성했던 지난 강좌의 내용에서 탭 선택 영역에

아이콘을 추가하는 방법에 대하여 알아보도록 하겠습니다. Intent 를 이용하여 탭 레이아웃을 구성하는

방법에 대하여 잘 모르시거나 지난 강좌를 보고싶으신 분은 아래에 링크된 자료를 참고하시면 됩니다.

탭 레이아웃 사용하기 - Intent 방식1 : http://www.tipssoft.com/bulletin/tb.php/FAQ/987

이제부터 탭 레이아웃의 선택 영역에 아이콘을 추가하는 방법에 대하여 설명하도록 하겠습니다.

이 강좌에서는 이전 강좌에서 설명하지 않은 부분만 설명하도록 하겠습니다.

1. 아이콘 만들기

탭에서 사용할 아이콘을 만듭니다. 각 탭마다 일반 상태와 터치 상태 두 종류로 구성하는 것이

일반적이나 동일한 아이콘 파일을 여러 탭에서 중복적으로 사용해도 무관합니다. 이 강좌에서는

좌측 그림의 일반 상태 아이콘 3 개와 우측 그림의 터치 상태 아이콘 1 개를 사용할 것입니다.

아이콘을 만들 때에는 png 확장자로 파일을 생성해야하며 아이콘의 크기는 기기의 스크린 해상도에

따라서 24*24 나 32*32 또는 48*48 픽셀로 설정해야 합니다.

생성된 파일은 프로젝트 폴더의 res/drawable-XXX 폴더에 크기별로 넣으시면 됩니다. 하나의 고정된

크기로 아이콘을 사용하는 경우에는 drawable-XXX 폴더들 중에 한 곳에만 파일을 넣으시면 됩니다.

2. XML 형식으로 아이콘의 상태 리스트(state list) 정의하기

탭에서 아이콘을 사용할 때에는 터치상태인지 일반 상태인지 등 어떤 상태인가에 따라서 출력해야

하는 아이콘이 달라질 수 있습니다. 이렇게 컨트롤의 상태에 따라서 다른 이미지를 출력할 때에는

XML 형식을 이용하여 아래와 같이 상태 리스트(state list) 로 간단하게 구현할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 터치 상태인 경우 select_icom 을 사용한다.-->
<item android:drawable="@drawable/select_icon"
android:state_selected="true" />

<!-- 일반 상태인 경우 select_icom 을 사용한다.-->
<item android:drawable="@drawable/book_icon" />
android:state_selected="false" />
</selector>

<selector> 항목을 루트 항목으로 두고, 내부에는 <item> 항목으로 어떤 상황에서 어떤 이미지를

사용할 것인지 명시하면 됩니다. 위의 코드에서 <item> 항목의 state_selected 속성이 true 이면

터치 상태인 것을 나타내고, false 이면 일반 상태인 것을 나타냅니다.

이 파일은 아이콘이 존재하는 폴더(프로젝트 폴더/res/drawable-XXX) 내에 만들어져야 합니다.

3. 아이콘이 있는 탭 기능 구현하기

탭 레이아웃을 사용할 때 탭 선택 영역에 아이콘을 출력시키기 위해서는 TabSpec 객체를 이용해야

합니다. TabSpec 클래스의 setIndicator 메소드는 탭 선택 영역에서 출력할 정보들을 전달하는

역할을 하는데 해당 영역이 여러가지 형태로 출력할 수 있어서 탭이름만 설정할 수 있는 메소드와

탭이름과 리소스 ID를 함께 설정할 수 있는 메소드 등으로 오버로딩되어 있습니다. 따라서 2번 항목에서

구성한 XML 리소스를 이용하여 탭이 사용할 아이콘을 해당 메소드로 전달하면 각 상태값에 따라서

적절한 아이콘이 탭 선택 영역에 출력됩니다.

아래의 코드는 아이콘이 있는 탭을 구성하는 onCreate 메소드를 재정의한 부분입니다.

public class TipsTabWidgetActivity extends TabActivity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// main.xml 파일에 구성한 리소스를 이 액티비티에서 사용한다.
setContentView(R.layout.main);

// 이 탭액티비티에서 사용할 수 있는 TabHost 객체를 얻는다.
TabHost tab_host = getTabHost();
// 각 탭에 사용할 TabSpec 객체.

// 탭호스트에 TabWidget 과 FrameLayout 이 사용할 정보를 넘겨주는 역할을 한다.
TabHost.TabSpec spec;
// 각 탭의 FrameLayout 이 사용하는 액티비티를 구성하는 객체
Intent intent;

// 아이콘을 얻기 위한 리소스 객체를 얻는다.
Resources res = getResources();
// 탭에 그려질 아이콘을 저장할 객체
Drawable icon;

// 탭에서 액티비티를 사용할 수 있도록 인텐트를 생성한다.
intent = new Intent().setClass(this, MusicActivity.class);
// ic_tab_music 이 가진 아이콘을 Drawable 객체로 얻는다.
icon = res.getDrawable(R.drawable.ic_tab_music);

// "music" 이라는 태그 값을 가진 TabSpec 객체를 생성한다.
spec = tab_host.newTabSpec("music");
// TabSpec 객체에 TabWidget 객체가 출력할 탭의 이름과 아이콘을 설정한다.
spec.setIndicator("Music", icon);
// TabSpec 객체에 FrameLayout 이 출력할 페이지를 설정한다.
spec.setContent(intent);
// 탭호스트에 해당 정보를 가진 탭을 추가한다.
tab_host.addTab(spec);

// 탭에서 액티비티를 사용할 수 있도록 인텐트를 생성한다.
intent = new Intent().setClass(this, BookActivity.class);
// ic_tab_book 이 가진 아이콘을 Drawable 객체로 얻는다.
icon = res.getDrawable(R.drawable.ic_tab_book);

// "book" 이라는 태그 값을 가진 TabSpec 객체를 생성한다.
spec = tab_host.newTabSpec("book");
// TabSpec 객체에 TabWidget 객체가 출력할 탭의 이름과 아이콘을 설정한다.
spec.setIndicator("Book", icon);
// TabSpec 객체에 FrameLayout 이 출력할 페이지를 설정한다.
spec.setContent(intent);
// 탭호스트에 해당 정보를 가진 탭을 추가한다.
tab_host.addTab(spec);

// 탭에서 액티비티를 사용할 수 있도록 인텐트를 생성한다.
intent = new Intent().setClass(this, MovieActivity.class);
// ic_tab_movie 이 가진 아이콘을 Drawable 객체로 얻는다.
icon = res.getDrawable(R.drawable.ic_tab_movie);

// "movie" 이라는 태그 값을 가진 TabSpec 객체를 생성한다.
spec = tab_host.newTabSpec("movie");
// TabSpec 객체에 TabWidget 객체가 출력할 탭의 이름과 아이콘을 설정한다.
spec.setIndicator("Movie", icon);
// TabSpec 객체에 FrameLayout 이 출력할 페이지를 설정한다.
spec.setContent(intent);
// 탭호스트에 해당 정보를 가진 탭을 추가한다.
tab_host.addTab(spec);

// 첫번째 탭을 선택한 상태로 지정한다.
tab_host.setCurrentTab(0);
}
}

4. 실행 화면

이 강좌에서 다룬 예제를 실행하면 탭을 선택하는 영역에 아래의 그림과 같은 아이콘이 출력됩니다.