[Design support Library] TabLayoutについて

こんにちはKID.Aです。

今回もデザインサポートライブラリーのクラスの説明をしていこうと思います。
Design support Libraryはデザインのサポートライブラリーで素晴らしいコンポーネントがいくつもあります。
今回は「TabLayout」について説明していきます。

TabLayoutは水平レイアウトのタブを提供します。
ディスプレイに表示するタブはTabLayout.Tabを使用します。
newTab()メソッドでタブを作り、setText()やsetIcon()でテキストやアイコンを作成できます。
作ったTabはaddTab(Tab)でレイアウトにタブを追加できます。

タブの選択状態が変更されたときはsetOnTabSelectedListenerに設定されるリスナーを介して通知されます。
これとViewPagerを組み合わせて、レイアウトをスクロールすると関連したタブの選択することができます。

・APIは以下の通りです。
http://developer.android.com/intl/ja/reference/android/support/design/widget/TabLayout.html

実装

ViewPagerと関連付けたTabLayoutを作ります。
実装は以下の通りです。

・build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

・MainActivity .java

package jp.co.tablayoutsample;

import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("TAB 1").setIcon(R.mipmap.ic_launcher));
        tabLayout.addTab(tabLayout.newTab().setText("TAB 2").setIcon(R.mipmap.ic_launcher));
        tabLayout.addTab(tabLayout.newTab().setText("TAB 3").setIcon(R.mipmap.ic_launcher));

        FragmentManager manager = getSupportFragmentManager();
        final ViewPager viewPager = (ViewPager)findViewById(R.id.pager);
        final PageAdapter adapter = new PageAdapter(manager);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    }
}

・activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="jp.co.tablayoutsample.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_below="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

挙動

挙動は以下の通りです。

・アプリが起動します。

・ページにスクロールすると関連したタブが選択されます。

以上です。

関連記事

Cameraのプレビューサイズとピクチャーサイズの比率の検証 [Design support Library] CoordinatorLayoutについて [Design support Library] TextInputLayoutについて [Design support Library] NavigationViewについて