1. はじめに
QittaroでActionBarの下にタブバーを実装しました。
SupportLibraryのViewPagerを使ってスワイプでFragmentを切り替えて、現在表示されているページのタイトルやスワイプの場所が目視出来るようにしました。
同じような画面の並びなのでViewPagerを採用しました。
標準でViewPager + TabBarを実装するとタイトルの下にIndicatorが表示されるので、現在位置がわかりやすくなっています。
しかし、色の配分とかアプリの世界観的に現在位置のタイトルの色も変えたいなと思い、実装してみたので、そのメモになります。
実装の前に、個人で作ったり、ActionBarのstyleのことをよくわかってない人へオススメのGeneratorがあるので紹介したいと思います。
2. ActionBar Generatorの紹介
Android Action Bar Style Generator
色を決めるだけで、それなりのActionBarを生成してくれるサイトです。
Qittaroはこれを使ってThemeを実装しました。
色々な色を決めて、DOWNLOAD.ZIPボタンを押してzipファイルをダウンロード・解答して各ディレクトリに分かれているファイルを全てコピーします。
そしてAndroidManifext.xmlにて<application></application>か<activity></activity>にandroid:themeを設定すれば簡単に実装されます。
ぜひこの機会に一度試してみてください。
ではTabBarのTextの色の変更のところを実装していきたいと思います。
3. TabBarの色の変更
今回、全て.xmlファイルで実装出来ます。
ということでソースコードを読んでください。
まずは選択状態の色と非選択状態の色を作成します。
<!-- res/values/color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 緑っぽい色 -->
<color name="action_bar_tab_selected_color">#0ACE00</color>
<!-- 白 -->
<color name="action_bar_tab_un_selected_color">#000000</color>
</resources>
次にcolorResourceを作成します。
<!-- res/color/action_bar_tab_text.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 現在選択されている -->
<item android:color="@color/action_bar_tab_selected_color" android:state_selected="true" />
<item android:color="@color/action_bar_tab_selected_color" android:state_focused="true" />
<item android:color="@color/action_bar_tab_selected_color" android:state_active="true" />
<item android:color="@color/action_bar_tab_selected_color" android:state_pressed="true" />
<!-- 選択されていない -->
<item android:color="@color/action_bar_tab_un_selected_color" android:state_selected="false" />
<item android:color="@color/action_bar_tab_un_selected_color" android:state_active="false" />
<item android:color="@color/action_bar_tab_un_selected_color" android:state_focused="false" />
<item android:color="@color/action_bar_tab_un_selected_color" android:state_pressed="false" />
</selector>
trueになっているところが選択状態の値で、falseになっているところが非選択状態となっています。
これをActionBar.TabTextのstyleに当てはめます。
<!-- res/values/styles.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 省略 -->
<style name="ActionBar.TabText.Sample" parent="@style/Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textColor">@color/action_bar_tab_text</item>
</style>
<style name="ActionBar.Solid.Sample" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="actionBarTabTextStyle">@style/ActionBar.TabText.Qittaro</item>
</style>
<!-- 省略 -->
</resources>
このstyleの中のActionBar.Solid.SampleをAndroidManifext.xmlのThemeに適用します。
そうするとこんな感じになります。
これで実装完了です。
4. 終わりに
結構簡単でしたが、styel周りがまだイマイチ理解出来ていない自分には苦労した実装となりました。
ただ苦労して色々遠回りしたおかげで、なんとなくわかったと思っています。
これから独自で組んでみようかと思っています。
細かい実装をいくらかしているので、良かったらQittaroを見てみてください。
以上になります。