Android(안드로이드) 에서 탭을 구현할 때 탭별 색상변경과 아이콘 넣어 디자인 하기

Android(안드로이드) 에서 탭을 구현할 때 탭별 색상변경과 아이콘 넣어 디자인 하기

 

개발환경 : JDK 1.5, eclipse-galileo, google API 7, window XP

 

이전 강좌에서도 보았지만 탭을 그대로 두기에는 어딘가 모르게 미흡하다.

색깔도 변경하고 원하는 아이콘을 넣어서 좀더 고급스럽게 만들고 싶을것이다.

 

(1) 탭에 색깔넣기

 

안드로이드에서 제공하는 기본색은 그림을 봐서 알겠지만 Grey 이며 클릭시 색깔이 바뀌었다가

놓으면 다시 원래색깔로 돌아온다.

이 색깔을 바꾸어 보는데 예제의 내용은 탭 호스트에 포함되어있는 자식 탭들을 모두 불러와

for 문을 돌면서 동일한 색깔로 바꾸는 것이다.

// TabHost 에 포함된 Tab의 색깔을 모두 바꾼다

for(int i=0;i<tabHost.getTabWidget().getChildCount();i++){

tabHost.getTabWidget().getChildAt(i)

.setBackgroundColor(Color.parseColor("#734512"));

}

일괄적으로 적용했더니 구분이 가지 않는다. 개별적으로 바꾸고 싶다면 다음과 같이 쓰면 된다.

개발 탭을 알아내는 함수는 getChileAt(i) 이다. i 값은 제일 왼쪽 탭부터 0 으로 시작한다

/** TabHost 에 포함된 Tab의 색깔을 모두 바꾼다, 개별적용 */
tabHost.getTabWidget().getChildAt(0)
       .setBackgroundColor(Color.parseColor("#734512"));
tabHost.getTabWidget().getChildAt(1)
       .setBackgroundColor(Color.parseColor("#4E4E9C"));

 

(2) 아이콘 넣기

 

위의 예제에서 아이콘을 넣어 더 고급스럽게 만들어 보자.

아이콘은 drawable 폴더에 넣고 소스에서 getResources().getDrawable() 함수를 호출해

필요한 아이콘의 int 값을 넘겨준다.

firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.guitar));
firstTabSpec.setContent(new Intent(this,FirstTab.class));

secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.quicktime));
secondTabSpec.setContent(new Intent(this,SecondTab.class));

 

(3) 원하는 탭을 유지시키기

 

페이지가 로딩되었을때 특정 탭의 내용이 나타날수 있도록 해주고 싶을 때가 있다.

기본은 첫번째 탭인데 2번째 탭을 로딩시 보여주고 싶다면 setCurrentTab(i) 함수를

사용한다.  i 는 위에서 언급했듯이 왼쪽탭부터 0 으로 시작한다

/** 탭의 선택 */
tabHost.getTabWidget().setCurrentTab(1);

 

(4) 전체 소스

 

FirstTab, SecondTab 은 기본 Activity 클래스를 만들어서 넣으면 됩니다.

그리고 AndroidManifest.xml 에 두 Activity 가 포함되어 있어야 됩니다.

<activity android:name=".widget.FirstTab" /> 

<activity android:name=".widget.SecondTab" />

import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

import com.sample.R;

public class TabColor extends TabActivity {
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_color);

        /** TabHost ID */
        TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);

        /** 새로운 탭을 추가하기 위한 TabSpect */
        TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
        TabSpec secondTabSpec = tabHost.newTabSpec("tid1");

        firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.guitar));
        firstTabSpec.setContent(new Intent(this,FirstTab.class));
        secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.quicktime));
        secondTabSpec.setContent(new Intent(this,SecondTab.class));

        /** 탭을 TabHost 에 추가한다 */
        tabHost.addTab(firstTabSpec);
        tabHost.addTab(secondTabSpec);
        
        // TabHost 에 포함된 Tab의 색깔을 모두 바꾼다, 개별적용 
        tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512"));
        tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.parseColor("#4E4E9C"));
		
        // 탭의 선택
        tabHost.getTabWidget().setCurrentTab(1);
    }
}

tab_color.xml

<?xml version="1.0" encoding="utf-8"?>
 
<TabHost android:layout_width="fill_parent"
	android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@android:id/tabhost">
	<LinearLayout android:id="@+id/LinearLayout01"
		android:orientation="vertical" android:layout_height="fill_parent"
		android:layout_width="fill_parent">
		<TabWidget android:id="@android:id/tabs"
			android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>
		<FrameLayout android:id="@android:id/tabcontent"
			android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>
	</LinearLayout>
 
</TabHost>