구글에서는 현재 많은 샘플 코드들을 개발자가 전반적인 프로젝트 구조나 리소스, 코드 파일들을 볼 수 있도록 제공해주고 있다. 그 중에서 Material Design이 안드로이드 5.0에서 소개되면서 UI관련 소스들을 많이 추가되었고 많은 프로젝트에서 SlidingTabLayout과 SlidingTabStrip를 사용한다.

프로젝트에서 ViewPager를 이용하게 되면 페이지의 이름을 보여주기 위한 레이아웃이 필요하게 되는데, 만약 탭의 이름을 텍스트로 보여주고 싶다면 구글에서 제공해주는 위의 두 파일로 충분히 구현할 수 있다. 하지만 텍스트를 사용할 경우, 다국어 지원을 하게 되면 여러가지 이슈가 발생하게 되는데 예를 들면, 한국어를 영어로 바꿀 경우에는 대부분 글자수가 많아진다. 이를 해결하기 위해서 흔히 탭의 이름을 아이콘으로 대체하고 ActionBar의 타이틀에 페이지의 이름을 노출하고 있다. 텍스트와 아이콘을 모두 지원하기 위해서 SlidingTabLayout에 아이콘도 추가할 수 있도록 간단한 인터페이스를 추가해서 오픈소스 SlidingIconTabLayout로 만들었다.

SlidingIconTabLayout

Download

repositories {
  jcenter()
}

dependencies {
  compile 'com.github.kimkevin:slidingicontablayout:1.0.0'
}

SlidingTabLayout.TabIconProvider 추가하기

SlidingIconTabLayout.TabIconProvider는 안드로이드 화면상에 노출되는 다수의 Fragment를 관리하기 위한 어답터이다. Fragment에 필요한 데이터나 리소스를 위치(Position)에 맞게 그려주기 위해서 FragmentPagerAdapter를 상속 받아야 하기 때문에 이때 아이콘을 텍스트 대신에 보여주기 위한 인터페이스가 필요하다.

public interface TabIconProvider {
    int getPageIconResId(int position);
}

SlidingTabLayout 수정

TabIconProvider를 상속받고 있다면 텍스트 대신 아이콘을 사용할 수 있다.

if (TextView.class.isInstance(tabTitleView)) {
    ((TextView) tabTitleView).setText(adapter.getPageTitle(i));
} else if (ImageView.class.isInstance(tabTitleView) && adapter instanceof TabIconProvider {
    TabIconProvider mTabIconProvider = (TabIconProvider) adapter;
    tabTitleView.setBackgroundResource(mTabIconProvider.getPageIconResId(i));
}

사용할 Fragment에 TabIconProvider를 추가해서 필요한 아이콘을 추가해주면 해당 Tab의 아이콘으로 노출된다.