[안드로이드 스튜디오] 액션바를 이용한 탭 메뉴 화면 만들기

---

안드로이드 스튜디오를 이용한 탭 메뉴 화면 만들기.

이런 저런 안드로이드 앱을 만들면서 자주 사용되는 화면이 있기 마련입니다. 제 생각에는 뷰 플리퍼를 사용한 화면과 사이드메뉴화면, 탭 호스트를 사용한 화면이 가장 많이 사용되는 것 같습니다. 이런 화면들은 안드로이드 개발 툴에서 프로젝트를 새로 만들때 기본적으로 제공하기도 하지만 (IDT에 따라 다름..) 역시 만들어봐야 어떻게 돌아가는지 알지 않겠습니까~?

이번 포스팅에서는 액션바를 이용하여 탭이 가능한 화면을 만들어 보도록 하겠습니다. 참고로 5.0이상버전부터는 액션바를 활용한 탭 호스트를 권장하지는 않지만, 실제로는 많이 사용하기 때문에 만들어 보도록 하겠습니다.

1. 액션바 선언 및 탭 추가

액션바를 이용한 탭 메뉴 화면은 따로 레이아웃 파일을 사용하지 않고 java코드로 직접 선언해서 만들도록 하겠습니다. 일단 메인 액티비티에서 TabListener를 상속하고, 액션바를 선언합니다.

package mychew.cho.myapplication;
 
import android.app.ActionBar;
import android.app.ActionBar.*;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
 
 
public class MainActivity extends Activity implements ActionBar.TabListener{
 
    private Tab tabSong, tabArtist, tabAlbum;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        ActionBar bar = getActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
 
        tabSong = bar.newTab();
        tabArtist = bar.newTab();
        tabAlbum = bar.newTab();
 
        tabSong.setText("음악별");
        tabArtist.setText("가수별");
        tabAlbum.setText("앨범별");
 
        tabSong.setTabListener(this);
        tabArtist.setTabListener(this);
        tabAlbum.setTabListener(this);
 
        bar.addTab(tabSong);
        bar.addTab(tabArtist);
        bar.addTab(tabAlbum);
 
    }
 
 
    @Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
 
    }
 
    @Override
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
 
    }
 
    @Override
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
 
    }
}
 

메인에 탭만 생성하고 실행을 해보시면 다음과 같은 화면이 나옵니다. 여기서 탭을 눌렀을 때 이벤트가 아무것도 없기 때문에 탭을 눌러도 아무일도 일어나지 않습니다. ㅎㅎ 

아,, 사실 activitymain.xml 레이아웃도 사용하지 않기 때문에 코드를 지웠어야되는데 깜빡하고 안지웠네요..

2. 프래그먼트 추가하기

이제 탭화면을 만들었으니, 각각의 탭을 선택했을 때 나오는 화면을 만들어 보도록 하겠습니다. 각각의 탭 화면은 프래그먼트를 만들어서 동적으로 생성하도록 하겠습니다.

위에 메인액티비티에 추가로 클래스를 만들어 프래그먼트를 만들겠습니다.

위에랑 코드가 조금 다른데 내용은 뭐 비슷합니다 ^^..

 
public class MainActivity extends Activity implements TabListener {
 
    MyTabFragment myFrags[] = new MyTabFragment[3];
    Tab tabSong, tabArtist, tabAlbum;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActionBar bar = getActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
 
        tabSong = bar.newTab();
        tabSong.setText("음악별");
        tabSong.setTabListener(this);
        bar.addTab(tabSong);
 
        tabArtist = bar.newTab();
        tabArtist.setText("가수별");
        tabArtist.setTabListener(this);
        bar.addTab(tabArtist);
 
        tabAlbum = bar.newTab();
        tabAlbum.setText("앨범별");
        tabAlbum.setTabListener(this);
        bar.addTab(tabAlbum);
    }
 
    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }
 
    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
 
        MyTabFragment myTabFrag = null;
 
        if (myFrags[tab.getPosition()] == null) {
 
            myTabFrag = new MyTabFragment();
            Bundle data = new Bundle();
            data.putString("tabName", tab.getText().toString());
 
            myTabFrag.setArguments(data);
            myFrags[tab.getPosition()] = myTabFrag;
        } else
            myTabFrag = myFrags[tab.getPosition()];
 
        ft.replace(android.R.id.content, myTabFrag);
    }
 
    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }
 
    class MyTabFragment extends Fragment {
        String tabName;
 
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            Bundle data = getArguments();
            tabName = data.getString("tabName");
        }
 
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
 
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.MATCH_PARENT);
 
            LinearLayout baseLayout = new LinearLayout(MainActivity.this);
            baseLayout.setOrientation(LinearLayout.VERTICAL);
            baseLayout.setLayoutParams(params);
            if (tabName == "음악별")
                baseLayout.setBackgroundColor(Color.RED);
            if (tabName == "가수별")
                baseLayout.setBackgroundColor(Color.GREEN);
            if (tabName == "앨범별")
                baseLayout.setBackgroundColor(Color.BLUE);
 
            return baseLayout;
        }
 
    }
 
}

위 코드대로 하면 아마 오류가 있을텐데 실행은 잘 됩니다. 안드로이드 버전에 따라 권장하는 방법이 아니기 때문에 에러가 나는 것 같습니다만... 실제 이유는 모르겠네요.

자 이제 탭을 눌렀을 때마다 색이 다른 프래그먼트 화면을 불러오는 탭바를 만들었습니다. 보통 앱들 보면 슬라이드를 이용해 탭이 바뀌기도 하는데요. (뷰 플리퍼 효과)

그 효과 같은 경우는 터치 이벤트를 이용하여 프래그먼트를 전환하는 것으로 만들 수 있기도 합니다. 하지만 그냥 뷰 플리퍼를 사용하는 것도 방법이죠 ^^.