i++

プログラム系のメモ書きなど

Android : SlidingTabLayout を使う + タブの幅をウィンドウ幅に合わせる

f:id:tkyjhr:20151028211621p:plain:w360

SlidingTabsBasic | Android Developers のコードをダウンロードして(右上のボタンで可能)Android - SlidingTabsBasicをプロジェクトに導入する - Qiita に沿って適宜ファイルをコピーしていけば SlidingTabLayout を使えます。

ただし、SlidingTabsBasic | Android Developers でダウンロードできるコードの SlidingTabLayout にはタブの幅をウィンドウの幅に合わせられる API setDistributeEvenly(Boolean) が含まれていないので、 google/iosched · GitHubGoogle I/O スケジュールアプリ) から新しいものをダウンロードしてそちらを使用します。

以下、導入までの簡単なまとめと導入後のカスタマイズ方法。

ダウンロードするファイル

自分のプロジェクトに入れるファイル

ダウンロードしたもののパッケージパスを維持するか、自分のプロジェクトのパッケージに変更するかはお好みで。

  • SlidingTabsBasic のサンプルから(Application/src/main 以下)
    • java/com/example/android/slidingtabsbasic/SingleTabsBasicFragment.java
    • res/layout/fragment_sample.xml
    • res/layout/paper_item.txml
  • ioched から
    • SlidingTabStrip.java
    • SlidingTabLayout.java

タブの幅をウィンドウ幅に合わせる

SlidingTabsBasicFragment.java 内の onViewCreated で以下のように、SlidingTabLayout の setDistributeEvenly(true)setViewPager を呼ぶ前に呼びます。後から効果はありません。

mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setDistributeEvenly(true);
mSlidingTabLayout.setViewPager(mViewPager);

タブ(ページ)の中身を変更する

SlidingTabsBasicFragment.java の SamplePagerAdapter クラス辺りが編集の対象になります。 自分が表示するもののの内容に合わせて、SlidingTabsBasicFragment クラスを参考に自作クラス・レイアウトを別途作るのが良いかと思います。

タブの色やテキストを変更する

SlidingTabLayout にテキストサイズが、SlidingTabStrip に選択中のタブの下に付く色が定義されています。

選択中のタブの下の色は SlidingTabLayout.TabColorizer インターフェースによって各タブ毎に設定が可能で、デフォルトで定義されている SimpleTabColorizer では以下のようにすると、2番目のタブの下線の色は黒になります。

mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR, 0xff000000);

参考