[안드로이드] 탭 만들기/속성 변경하기

http://web4.c2.cyworld.com/myhompy/main.php?home_id=a1858489&sub=1&url=http%3A%2F%2Fweb4.c2.cyworld.com%2Fmyhompy%2Fboard%2FretrieveBoard.php%3Fhome_id%3Da1858489%26lmenuSeq%3D61535%26smenuSeq%3D151690%26pageNo%3D1%26postSeq%3D589091%26view%3Dbbs%26menu%3Dsmenu

 

 

 2. TabActivity 상속 받은 새 액티비티 구현하기

- new Tab = getTabHost(); : 메소드를 통해 TabHost를 받아온다.

이는 실질적으로 우리가 Tab에 내용을 추가하는 등의 작업을 위해 필요하다.

- addTab() 메소드는 새로운 탭을 추가하는 데 이용된다.
addTab()메소드 안에서 newTabSpec()메소드를 이용하여 실질적인 Tab 항목별로 설정을 해 주는 것을 확인할 수 있다.

        TabHost tabHost = getTabHost();

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("Now", getResources().getDrawable(R.drawable.ic_tab_now))
                .setContent(new Intent(this, Tab_NowActivity.class)));

 

 

- setIndicator() 메소드에서는 탭의 이름을 추가해주고 있습니다. 여기에서는 단순히 이름만 추가해 주었는데, 다음과 같이 사용하면 아이콘도 지정 가능합니다.
.setIndicator("위젯") : 이름만 추가할 때

.setIndicator("위젯", getResources().getDrawable(R.drawable.icon)) : 아이콘과 이름을 같이 추가할 때

 

- setContent() 메소드에서는 각각의 탭에 표시할 View를 지정

지금까지는 보통 LinearLayout 등 레이아웃 자체에는 id를 지정하지 않았는데 id를 통해 각각의 View, 혹은 Layout을 불러오므로 ID지정이 필수이다. 아니면 그 레이아웃이 포함되어 있는 새로운 액티비티를 인텐트로 구현하는 것도 가능하다.

.setContent(보여주고자 하는 레이아웃 아이디);

.setContent(new Intent(this, 보여주고자 하는 레이아웃이 포함된 액티비티 클래스 이름)));

 

(참고 URL1 : http://akj61300.blog.me/80126183947, 사진 및 설명)

(참고 URL2 : http://www.appilogue.kr/2844221 설명)

 

- Tab 색상 변경하기

http://blog.naver.com/man8408/110104491927에서 퍼왔다. 현재 보여지고 있는 액티비티를 선택되면 변하는 색상으로 변경하고 나머지 탭을 조사하여 선택되지 않은 색으로 변경하는 것보다는 일괄적으로 모두 선택이 안된 색으로 변경한다음 맨 앞에 보여지는 탭 색깔만 변경하면 되는 간단한 논리로 이루어진 Tab 색상 변경하는 팁인 것 같다!><

 

1. TabAcitivy는 OnTapChangeListener를 implements(구현)한다.

public class TabMain extends TabActivity implements OnTabChangeListener

2. 탭에 setOnTabChangedListener를 등록한다.

tabHost = getTabHost();
tabHost.setOnTabChangedListener(this);

3. onCreate()에서 모든 탭의 색상을 하나로 설정한다. 그리고 처음 보여지는 탭의 색상만 변경한다.

// Tab에 색 지정
for(int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#7392B5"));
}
tabHost.getTabWidget().setCurrentTab(0);
tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#4E4E9C"));
->모든 탭들을 일괄적으로 같은 색으로 변경, 그리고 제일 마지막에 '처음 탭'을 선택된 색깔로 변경

5. onTabChanged() 메서드를 Override하여 각 탭의 색상이 변경되도록 한다.

@Override
public void onTabChanged(String tabId) {
// Tab 색 변경
for(int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#7392B5"));
}
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#4E4E9C"));
}

->모든 탭들을 일괄적으로 같은 색으로 변경, 그리고 현재 제일 맨 위에 보여지는 탭을 선택된 샐깔로 변경

6. 결과화면

 

 

(참고자료 URL3 : http://blog.naver.com/man8408/110104491927)   ※※※※ TabAcitivy에 OnTapChangeListener를 implements(구현)하지 않고 직접 tabHost에 리스너를 구현한다.

tabHost.setOnTabChangedListener(new OnTabChangeListener() {

- 

public void onTabChanged(String tabId) {

// 배경넣기//

// tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#7392B5"));

// 클릭할때 이미지 변경

int menu_off[] = { R.drawable.ic_tab_now_unselected,

R.drawable.ic_tab_alert_unselected,

R.drawable.ic_tab_moim_unselected,

R.drawable.ic_tab_settings_unselected };

->선택되지 않았을 때의 이미지들

int menu_on[] = { R.drawable.ic_tab_now_selected,

R.drawable.ic_tab_alert_selected,

R.drawable.ic_tab_moim_selected,

R.drawable.ic_tab_settings_selected };

->선택되었을 때의 이미지

//선택되지 않은 것

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

//탭의 각 제목의 색깔을 바꾸기 위한 부분

TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);

tv.setTextColor(Color.parseColor("#dddddd"));

//탭의 각 이미지를 바꾸기 위한 부분

ImageView iv = (ImageView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.icon);

iv.setImageDrawable(getResources().getDrawable(menu_off[i]));

//탭의 각 배경색깔을 바꾸기 위한 부분

tabHost.getTabWidget().getChildAt(i)

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

}

//선택된 것

//선택되는 탭에 대한 제목 색깔을 바꾸는 부분

TextView tp = (TextView) tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab())

.findViewById(android.R.id.title);

tp.setTextColor(Color.parseColor("#808080"));

//선택되는 탭의 이미지를 바꾸기 위한 부분

ImageView ip = (ImageView) tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab())

.findViewById(android.R.id.icon);

ip.setImageDrawable(getResources().getDrawable(

menu_on[tabHost.getCurrentTab()]));

//선택되는 탭의 배경색깔을 바꾸기 위한 부분

tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab())

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

}

});

(참고자료 URL4 : http://stackoverflow.com/questions/5577688/android-change-tab-text-color-programmatically)

- 탭 높이 조절하기

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

{

tabHost.getTabWidget().getChildAt(tab).getLayoutParams().height = 100;

}

(참고자료 URL5 : http://neodreamer.tistory.com/420)

 

- Android Custom Tab 만들기 링크 : http://www.androidpub.com/832777

개발공부 목적으로 다시 찾아보기 수월하게 하기 위하여 블로그에 정리해두었음을 알립니다.