jc01rho의 일상잡다

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

컴퓨터/안드로이드

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

jc01rho 2011. 9. 22. 22:10



 

 

 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

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



Comments