Android > ActionBar - Tab 메뉴 CsutomView 적용했을 경우 Tab 선택/해제시 이미지 변경방법
등록일 : 2017-07-05 19:00
조회수 : 93,708
ActionBar Tab 메뉴를 CuatomView 적용하는 소스는 아래와 같습니다.
icons = new int[] {
R.drawable.tab1_on,
R.drawable.tab2_on,
R.drawable.tab3_on,
R.drawable.tab4_on
};
icons_selected = new int[] {
R.drawable.tab1_off,
R.drawable.tab2_off,
R.drawable.tab3_off,
R.drawable.tab4_off
};
View tabView1 = getLayoutInflater().inflate(R.layout.layout_actionbar_tab, null);
View tabView2 = getLayoutInflater().inflate(R.layout.layout_actionbar_tab, null);
View tabView3 = getLayoutInflater().inflate(R.layout.layout_actionbar_tab, null);
TextView tabText1 = (TextView) tabView1.findViewById(R.id.tabText);
TextView tabText2 = (TextView) tabView2.findViewById(R.id.tabText);
TextView tabText3 = (TextView) tabView3.findViewById(R.id.tabText);
tabText1.setText(R.string.sometext1);
tabText2.setText(R.string.sometext2);
tabText3.setText(R.string.sometext3);
tabImage1 = (ImageView) tabView1.findViewById(R.id.tabIcon);
tabImage2 = (ImageView) tabView2.findViewById(R.id.tabIcon);
tabImage3 = (ImageView) tabView3.findViewById(R.id.tabIcon);
tabImage1.setImageDrawable(getResources().getDrawable(R.drawable.tab1_on));
tabImage2.setImageDrawable(getResources().getDrawable(R.drawable.tab2_on));
tabImage3.setImageDrawable(getResources().getDrawable(R.drawable.tab3_on));
Tab tab1 = actionBar.newTab();
//tab1.setText("메뉴1");
//tab1.setIcon(null);
tab1.setCustomView(tabView1);
TabTestListener a = new TabTestListener(this, "1", Fragment01.class);
tab1.setTabListener(a);
Tab tab2 = actionBar.newTab();
//tab2.setText("메뉴2");
//tab2.setIcon(icons[1]);
tab2.setCustomView(tabView2);
TabTestListener b = new TabTestListener(this, "1", Fragment02.class);
tab2.setTabListener(b);
Tab tab3 = actionBar.newTab();
//tab3.setText("tab_3");
//tab3.setIcon(icons[2]);
tab3.setCustomView(tabView3);
TabTestListener c = new TabTestListener(this, "1", Fragment03.class);
tab3.setTabListener(c);
actionBar.addTab(tab1);
actionBar.addTab(tab2);
actionBar.addTab(tab3);
layout_actionbar_tab.xml 레이아웃 파일 을 tab1, tab2, tab3 에서 참조해서 적용할 수 있다.
탭을 선택/해제될 경우 TabTestListener 이벤트가 발생하게 된다.
onTabSelected , onTabUnselected 메서드에서 아이콘을 변경할 수 있으며 , ActionBar 객체의 정보도 바꿀 수 있습니다.
그에 대한 예제를 확인해 보도록 하겠습니다.
class TabTestListener<T extends Fragment> implements TabListener {
private Fragment mFragment;
private final Activity mActivity;
private final String mTag;
private final Class<T> mClass;
public TabTestListener(Activity activity, String tag, Class<T> clz) {
mActivity = activity;
mTag = tag;
mClass = clz;
}
public void onTabSelected(Tab tab, FragmentTransaction ft) {
if (mFragment == null)
{
mFragment = Fragment.instantiate(mActivity, mClass.getName());
ft.add(android.R.id.content, mFragment, mTag);
} else {
ft.attach(mFragment);
}
}
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
if (mFragment != null)
{
ft.detach(mFragment);
}
}
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
}
아래 소스틑 tabImage1, tabImage2, tabImage3 객체의 이미지를 바꾸는 예제 입니다.
tab.getPosition() 메서드를 이용해서 현재 발생한 Tab 이벤트의 index 값을 구할 수 있습니다.
class TabTestListener implements TabListener {
private Fragment mFragment;
private final Activity mActivity;
private final String mTag;
private final Class mClass;
public TabTestListener(Activity activity, String tag, Class clz) {
mActivity = activity;
mTag = tag;
mClass = clz;
}
public void onTabSelected(Tab tab, FragmentTransaction ft) {
//getActionBar().getSelectedTab().setIcon(icons_selected[tab.getPosition()]); //액션바 배경이미지 변경
if(tab.getPosition()==0)
{
tabImage1.setImageDrawable(getResources().getDrawable(icons_selected[tab.getPosition()]));
}
else if(tab.getPosition()==1)
{
tabImage2.setImageDrawable(getResources().getDrawable(icons_selected[tab.getPosition()]));
}
else if(tab.getPosition()==2)
{
tabImage3.setImageDrawable(getResources().getDrawable(icons_selected[tab.getPosition()]));
}
if (mFragment == null)
{
mFragment = Fragment.instantiate(mActivity, mClass.getName());
ft.add(android.R.id.content, mFragment, mTag);
} else {
ft.attach(mFragment);
}
}
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
//getActionBar().getSelectedTab().setIcon(icons[tab.getPosition()]); //액션바 배경이미지 변경
if(tab.getPosition()==0)
{
tabImage1.setImageDrawable(getResources().getDrawable(icons[tab.getPosition()]));
}
else if(tab.getPosition()==1)
{
tabImage2.setImageDrawable(getResources().getDrawable(icons[tab.getPosition()]));
}
else if(tab.getPosition()==2)
{
tabImage3.setImageDrawable(getResources().getDrawable(icons[tab.getPosition()]));
}
if (mFragment != null)
{
ft.detach(mFragment);
}
}
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
}