탭 만들기

탭은 하나의 화면에 여러 가지 서브 화면들을 넣어둘 수 있는 장점이 있어 자주 사용됩니다.

몇 개의 탭 버튼이 상단이나 하단에 있고 그 탭 버튼을 누르면 가운데 있는 화면이 전환되는 방식이죠.

탭 기능은 SDK에서 제공하는 위젯을 사용하여 간단히 만드는 방법과 프레임 레이아웃과 가시성(Visibility) 속성을 이용하여 직접 만드는 방법이 있습니다.

탭을 어떻게 만드는지 알아봅시다.

탭의 구성

탭은 SDK에서 제공하는 위젯을 사용할 수도 있고 직접 만들 수도 있습니다.

탭을 어떻게 만들 수 있는지 이해하는 것은 위젯을 사용할 때도 도움이 되는데요.

탭 위젯은 크게 세 가지 구성 요소로 이루어집니다.

탭의 구성

상단에 탭 버튼이 있고 버튼을 누를 때마다 가운데 부분에 중첩되어 있는 화면이 바뀌어 보이는 구조로, 가운데 부분은 여러 화면을 중첩시킬 수 있도록 프레임 레이아웃을 사용하게 됩니다.

 

레이아웃에 추가

메인 액티비티의 XML 레이아웃에 상단 타이틀 부분의 레이아웃을 직접 정의할 수 있습니다.

자동으로 만들어지는 메인 액티비티의 레이아웃에는 타이틀 부분이 빠져있고 액션바가 들어간 스타일이 지정되어 있지만 액션바가 들어가 있지 않은 스타일로 바꾸는 경우에는 직접 상단의 타이틀 부분 레이아웃을 만들 수 있습니다.

레이아웃의 구조는 다음과 같습니다.

<CoordinatorLayout>
   <AppBarLayout>
      <Toolbar>
      </Toolbar>
      <TabLayout>
      </TabLayout>
   </AppBarLayout>
   <FrameLayout>
   </FrameLayout>
</CoordinatorLayout>

 상단의 액션바 부분과 가운데 내용이 보이는 부분이 함께 들어간 구조에서는 두 부분의 크기가 잘 맞게 보여야 하므로 CoordinatorLayout이 사용됩니다.

그리고 그 안에 AppBarLayout과 FrameLayout이 들어갑니다.

AppBarLayout이 상단의 액션바 영역, FrameLayout이 내용이 보이는 화면 부분이 됩니다.

Toobar는 액션바 안에서 타이틀이 메뉴 아이콘이 보일 영역을 말하며 탭 버튼이 그 아래에 보일 수 있도록 TabLayout이 들어가 있습니다.

탭 버튼을 보이지 않게 하고 싶다면 TabLayout을 넣지 않으면 됩니다.

 

소스에서 탭 추가

이 레이아웃을 메인 액티비티에 설정하려면 액션바가 없는 스타일로 변경해야 합니다.

/res/values 폴더 안에 있는 styles.xml 파일을 열고 AppTheme이라는 이름을 가진 스타일 정보를 Theme.AppCompat.Light.NoActionBar 로 변경합니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

메인 액티비티의 스타일이 AppTheme으로 설정되어 있기 때문에 NoActionBar 스타일로 바꾸면 메인 액티비티에는 액션바가 만들어지지 않습니다.

이제 소스에서 프래그먼트를 세 개 만들고 각각의 프래그먼트가 상단의 탭 버튼을 누를 때마다 가운데 프레임레이아웃 안에 보일 수 있도록 만듭니다.

먼저 TabLayout에 탭 버튼을 추가합니다.

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setText("통화기록"));
tabs.addTab(tabs.newTab().setText("스팸기록"));
tabs.addTab(tabs.newTab().setText("연락처"));

탭 버튼을 눌렀을 때 각각의 프래그먼트가 보이도록 합니다.

프래그먼트를 바꾸어 보이게 하려면 프레임 레이아웃에 중첩시켰다가 가시성 속성으로 보이도록 할 수도 있지만 여기에서는 프래그먼트 매니저를 이용해 변경합니다.

tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  @Override
  public void onTabSelected(TabLayout.Tab tab) {
    int position = tab.getPosition();
    Log.d("MainActivity", "선택된 탭 : " + position);

    Fragment selected = null;
    if (position == 0) {
        selected = fragment1;
    } else if (position == 1) {
        selected = fragment2;
    } else if (position == 2) {
        selected = fragment3;
    }

    getSupportFragmentManager().beginTransaction().replace(R.id.container, selected).commit();
}

이렇게 하면 탭 버튼을 누를 때마다 각 버튼에 해당하는 프래그먼트로 교체되어 보이게 됩니다.