[안드로이드 Android] 액션바 탭( ActionBar Tab) 1. 간단한 ActionBar Tab 구현

액션바(ActionBar)에 탭(Tab)를 붙여서 사용하는 앱들이 많더군요.

그래서 이번 포스트는 

ActionBar에 Tab를 구현하는 예제소스입니다.

ActionBar에 Tab을 구현할때는 가급적

Fragment를 사용하시는 것이 코드관리 및 리소스관리에

용이합니다.

그런데 Fragment까지 한꺼번에 소개하면

다소 분량이 많아서

단계적으로

간단하게 ActionBar에 Tab을 구현하고

하나씩 기능을 추가하면서 예제를 소개하겠습니다.

먼저 Tab이 뭔지 모를 수도 있고

이 예제의 동작 결과도 볼겸.

미리 결과화면 부터 소개합니다.

  

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

결과만 봐도 Tab이 뭔지 알수 있을 거라 봅니다.

이 에제는 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 파일을 만들겠습니다.

첫번째 탭(Tab)에 의해 보여질 View 레이아웃 파일입니다.

파일 이름은 'layout_tab_0.xml' 입니다.

 

layout_tab_0.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>

두번째 탭(Tab)에 의해 보여질 View 레이아웃 파일입니다.

파일 이름은 'layout_tab_1.xml' 입니다.

 

layout_tab_1.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>

세번째 탭(Tab)에 의해 보여질 View 레이아웃 파일입니다.

파일 이름은 'layout_tab_2.xml' 입니다.

 

layout_tab_2.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>

각 View 마다 서로 다른 Widget를 넣었기에

구별하는데 어렵지 않으리라 봅니다.

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

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

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

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

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

 

MainActivity.java

public class MainActivity extends Activity { ActionBar actionBar;  //ActionBar 참조변수 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Activity 객체는 이미 ActionBar를 가지고 있으므로 //이미 존해하는 ActionBar 객체를 얻어오기.(API 10버전 이상에서 사용가능) actionBar= getActionBar(); //ActionBar가 Tab를 보여줄 수 있는 모양이 되도록 설정 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); //ActionBar에 추가 될 Tab 참조변수 Tab tab=null; //첫번째 Tab 객체 생성 및 ActionBar에 추가하기 tab= actionBar.newTab(); //ActionBar에 붇는 Tab객체 생성 tab.setText("Analog");    //Tab에 보여지는 글씨 //Tab의 선택이 변경되는 것을 인지하는 TabListener 설정(아래쪽 객체 생성 코드 참고) tab.setTabListener(listener);  //ActionBar에 Tab 추가 actionBar.addTab(tab); //두번째 Tab 객체 생성 및 ActionBar에 추가하기 tab= actionBar.newTab();//ActionBar에 붇는 Tab객체 생성 tab.setText("Digital");   //Tab에 보여지는 글씨 //Tab의 선택이 변경되는 것을 인지하는 TabListener 설정(아래쪽 객체 생성 코드 참고) tab.setTabListener(listener); //ActionBar에 Tab 추가 actionBar.addTab(tab); //세번째 Tab 객체 생성 및 ActionBar에 추가하기 tab= actionBar.newTab(); //ActionBar에 붇는 Tab객체 생성 tab.setText("Calendar");   //Tab에 보여지는 글씨 //Tab의 선택이 변경되는 것을 인지하는 TabListener 설정(아래쪽 객체 생성 코드 참고) tab.setTabListener(listener);  //ActionBar에 Tab 추가 actionBar.addTab(tab); } //Tab의 선택변화를 인지하는 Listener 객체 생성 //(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) { // TODO Auto-generated method stub //선택된 Tab객체의 위치값(왼족 처음부터 0,1,2....순으로 됨) int position = tab.getPosition(); switch( position ){ case 0: //가장 왼쪽 Tab 선택(Analog) //MainActivity가 보여 줄 View를 //res폴더>>layout폴더>>layout_tab_0.xml 로 설정 setContentView(R.layout.layout_tab_0); break; case 1: //두번째 Tab 선택(Digital) //MainActivity가 보여 줄 View를 //res폴더>>layout폴더>>layout_tab_1.xml 로 설정 setContentView(R.layout.layout_tab_1); break; case 2: //세번째 Tab 선택(Calendar) //MainActivity가 보여 줄 View를 //res폴더>>layout폴더>>layout_tab_2.xml 로 설정 setContentView(R.layout.layout_tab_2); break; } } //Tab이 재 선택될 때 호출 //첫번째 파라미터 : 재 선택된 Tab 객체 //두번째 파라미터 : Tab에 해당하는 View를 Fragment로 만들때 사용하는 트랜젝션.(여기서는 사용X) @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } }; }

여기까지 간단하게 ActionBar에 Tab을 추가했습니다.

다음 포스트에서 Tab의 각 View들의 전환에 역동성을 주기위해

각 View들을 ViewPager를 이용해서 만들어 볼겁니다.

감사합니다.