Please Enable JavaScript!
Gon[ Enable JavaScript ]

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>
Posted by 녹두장군

댓글을 달아 주세요

  1. 초보 2010.08.18 10:24  댓글주소  수정/삭제  댓글쓰기

    탭위에 이미지를 올릴 수 있는 방법을 없을까요 ?

    • 녹두장군 2010.08.18 11:25  댓글주소  수정/삭제

      위에 아이콘이 이미지인데 그걸 원하시는게 아니라
      탭 전체 이미지를 원하시는 건가요?
      그러면 View 자체를 집어넣을수 있습니다.
      setIndicator 에 파라미터로 View 를 집어넣는데
      View 는 전체 이미지로 보여주면 되겠죠.

  2. AA 2010.09.11 20:07  댓글주소  수정/삭제  댓글쓰기

    여기에서~
    FirstTab이랑 SecondTab 클래스파일은 어떻게 하셨나요?
    public class Info extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.땡땡);
    }

    }

    이런식으로 하셨는지요?

    • 녹두장군 2010.09.13 09:14  댓글주소  수정/삭제

      네 호출하는 클래스는 Activity 나 View 클래스를
      상속받아 만든것을 넣으면 됩니다 ..
      감사합니다

  3. 레몬상자 2011.05.28 20:38  댓글주소  수정/삭제  댓글쓰기

    탭이 눌렸을 떄 색깔을 바뀌게 할수는 없을까요???