Android

 액션바(ActionBar)에 탭(Tab)를 붙여서 사용하는 앱들이 많더군요.
그래서 이번 포스트는 ActionBar에 Tab를 구현하는 예제소스입니다.




ActionBar에 Tab을 구현할때는 가급적 Fragment를 사용하시는 것이 코드관리 및 리소스관리에 용이합니다.

그런데 Fragment까지 한꺼번에 소개하면 다소 분량이 많아서 단계적으로 간단하게 ActionBar에 Tab을 구현하고 하나씩 기능을 추가하면서 예제를 소개하겠습니다.


각 Tab의 선택에 따라 다른 View가 보이도록 했습니다.

이 에제는 ActionBar에 Tab을 구현하는데 초점이 있어서 Tab마다 보여지는 View는 MainActivity의 setContentView()메소드를 사용했습니다.

Activity 클래스의 setContentView()는 언제나 onCreate()에서만 사용한다고 아시는 분도 있던데.

클래스 안에 어떤 순간에도 메소드 호출이 가능합니다. 항상 setContentView(R.layout.main) 으로만 사용할 수 있는 건 아닙니다.


각 Tab마다 보여지는 View의 모양을별도의 layout 파일로 만들거라서 layout_main.xml은 이 예제에서 별로 중요하지 않습니다.


그럼 각 Tab을 선택했을 때 보여지는 View의 모양을 설계하는  레이아웃 리소스 파일을 만들겠습니다.

res폴더 >> layout 폴더안에  3개의 서로 다른 레이아웃 xml 파일을 만들겠습니다.


res폴더 하위 layout 폴더  [activity_tab1.xml]

		<?xml version="1.0" encoding="utf-8"?>
		<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="match_parent"
			android:layout_height="match_parent" >

			<AnalogClock 
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_centerInParent="true"/>    
		</RelativeLayout>

res폴더 하위 layout 폴더  [activity_tab2.xml]

		<?xml version="1.0" encoding="utf-8"?>
		<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="match_parent"
			android:layout_height="match_parent" >

			<DigitalClock 
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_centerInParent="true"/>
		</RelativeLayout>
		

res폴더 하위 layout 폴더  [activity_tab3.xml]
 

		<?xml version="1.0" encoding="utf-8"?>
		<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
		    android:layout_width="match_parent"
		    android:layout_height="match_parent"
		    android:padding="15dp" >

			<CalendarView 
				android:layout_width="match_parent"
				android:layout_height="match_parent"
				android:layout_centerInParent="true"/>
		</RelativeLayout>

이제 가장 중요한 MainActivity.java 소스파일입니다.

주요 설명은 주석을 참고하시기 바랍니다.

주석을 빼면 코드는 매우 간단합니다.


반복문을 사용하면 보다 코드를 간략하게 만들 수 있지만

보시기 편하도록 일일히 Tab 3개를 추가했습니다.
 

		import android.app.ActionBar;
		import android.app.ActionBar.Tab;
		import android.app.ActionBar.TabListener;
		import android.app.Activity;
		import android.app.FragmentTransaction;
		import android.os.Bundle;
		import android.view.Menu;
		import android.view.MenuItem;

		public class MainActivity extends Activity {

			ActionBar actionBar;  //ActionBar 참조변수

			@Override
			protected void onCreate(Bundle savedInstanceState) {
				super.onCreate(savedInstanceState);
				setContentView(R.layout.activity_main);
				
				//ActionBar 객체를 얻어오기.(API 11버전 이상에서 사용가능)				
				actionBar= getActionBar();

				//ActionBar가 Tab를 보여줄 수 있는 모양이 되도록 설정
				actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
				
				//ActionBar에 추가 될 Tab 참조변수
				Tab tab=null;

				//첫번째 Tab 객체 생성 및 ActionBar에 추가하기
				tab= actionBar.newTab(); 
				tab.setText("Analog");    //Tab에 보여지는 글씨  
				tab.setTabListener(listener);   //TabListener 설정

				actionBar.addTab(tab);
				tab= actionBar.newTab();
				tab.setText("Digital");
				tab.setTabListener(listener);    

				actionBar.addTab(tab);
				tab= actionBar.newTab();
				tab.setText("Calendar");
				tab.setTabListener(listener);     

				actionBar.addTab(tab);				//ActionBar에 Tab 추가
				
			}


			 //Listener 객체 생성 (Tab의 선택변화를 인지 - Button의 onClickListner 처럼 생각하시면 됩니다.)

			TabListener listener= new TabListener() {
				//Tab의 선택이 벗어날 때 호출
				//첫번째 파라미터 : 선택에서 벗어나는 Tab 객체
				//두번째 파라미터 : Tab에 해당하는 View를 Fragment로 만들때 사용하는 트랜젝션.(여기서는 사용X)

				@Override
				public void onTabUnselected(Tab tab, FragmentTransaction ft) {
					// TODO Auto-generated method stub
				}
				

				//Tab이 선택될 때 호출
				//첫번째 파라미터 : 선택된 Tab 객체
				//두번째 파라미터 : Tab에 해당하는 View를 Fragment로 만들때 사용하는 트랜젝션.(여기서는 사용X)
				
				@Override
				public void onTabSelected(Tab tab, FragmentTransaction ft) {

					//선택된 Tab객체의 위치값(왼족 처음부터 0,1,2....순으로 됨)

					int position = tab.getPosition();

					switch( position ){
						case 0: 
							//가장 왼쪽 Tab 선택(Analog)
							//MainActivity가 보여 줄 View를
							setContentView(R.layout.activity_tab1);
							break;
						case 1: 
							//두번째 Tab 선택(Digital)
							//MainActivity가 보여 줄 View를

							setContentView(R.layout.activity_tab2);
							break;
						case 2: 
							//세번째 Tab 선택(Calendar)
							//MainActivity가 보여 줄 View를

							setContentView(R.layout.activity_tab3);
							break;   
					}
				}

				@Override
				public void onTabReselected(Tab tab, FragmentTransaction ft) {
					// TODO Auto-generated method stub
					
				}
			};
			
			
			
			@Override
			public boolean onCreateOptionsMenu(Menu menu) {
				// Inflate the menu; this adds items to the action bar if it is present.
				getMenuInflater().inflate(R.menu.main, menu);
				return true;
			}

			@Override
			public boolean onOptionsItemSelected(MenuItem item) {
				// Handle action bar item clicks here. The action bar will
				// automatically handle clicks on the Home/Up button, so long
				// as you specify a parent activity in AndroidManifest.xml.
				int id = item.getItemId();
				if (id == R.id.item1) {
					return true;
				}
				return super.onOptionsItemSelected(item);
			}
		}