[Material] TabLayout 사용법

TabLayout

그림처럼 화면 상단에 위치한 TabLayout 은 주로 화면 전환 등 어떤 대상을 전환하는 기능을 위해 사용된다.

사용법 - xml

		<com.google.android.material.tabs.TabLayout
			android:id="@+id/tab_layout"
			android:layout_width="match_parent"
			android:layout_height="wrap_content">

			<com.google.android.material.tabs.TabItem
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="1" />

			<com.google.android.material.tabs.TabItem
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:text="2" />
		</com.google.android.material.tabs.TabLayout>

TabLayout 은 반드시 화면 상단에 위치할 필요는 없지만, 화면 상단에 위치한 편이 깔끔하다.
원하는 위치에 TabLayout 컴포넌트를 추가하고 그 안에 TabItem 을 추가하면 기본적인 xml 설정이 완료된다.

사용법 - code

this.binding.tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
	@Override
	public void onTabSelected(TabLayout.Tab tab) {

		switch (tab.getPosition()) {

			case 0:
				...
				break;
			case 1:
				...
				break;
			default:
				break;
		}
	}
    ...

위 코드는 데이터 바인딩을 사용해 TabLayout 을 설정했지만 다른 방법을 사용해서 접근해도 상관없다.

addonTabSelectEdListener 을 사용해 탭을 선택했을 때 발생할 동작을 정의하면 된다.
onTabSelected 에서 터치된 탭을 받을 수 있는데, 탭의 position 에 따라 발생할 동작을 정의하면 된다.

위의 코드에서는 없지만, onTabUnselected, onTabReselected 메소드도 있는데, 많이 사용되지 않는 기능으로 필요할 때 정의하면 된다.

기타

공식 문서
Material Design 문서