안규 공부방

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)	 {
		}
	}	
※ 혹시 도움이 되셨다면 댓글에 한마디 남겨주세요!
작성자   비밀번호
자동글 방지     (자동글 방지 기능입니다.)
내용   댓글달기 
이메일 문의 : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.