genonymous

GenestreamのTechブログ

AndroidでActionBar.Tabを使わずにタブナビゲーションを実装する

こんにちは徳山です。

ActionBarの変更

Android 5.0からActionBarの代わりに使うToolBarが追加されました。 ToolBarはLayout内に書くので中に入れる要素をカスタマイズするのがやりやすくなりました。

同時にActionBar.Tabが非推奨になっています。その代わりに使える新しいAPIは特に提供されていないので自分で実装する必要があります。 どう実装するのがいいか調べてみました。

方法

PagerTabStripを使う

GoogleのSampleのSlidingTabStripやSlidingTabLayoutを使う

Googleのサンプルです。ファイルをプロジェクト内にコピーして使います。

PagerSlidingTabStripを使う

GitHubで公開されているライブラリ。Material Designに対応しています。

実装

今回はPagerSlidingTabStripで実装してみました。 ほとんどGitHubのREADMEそのままです。

Gradleファイルに以下を追加

    compile 'com.jpardogo.materialtabstrip:library:1.0.6'

レイアウトのToolbarの下にPagerSlidingTabStrip widgetを追加する

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>

ActivityのonCreateでViewPagerにtabをバインドする

        PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        tabs.setViewPager(mViewPager);

f:id:genestream:20141203102101p:plain

以上です。これだけで簡単にMaterial Designなタブナビゲーションが実装できました。