概要
MaterialDesignから提供されているBottomNavigationViewを用いることでiOSのTabBarのような下タブのナビゲーションを作成することが容易に可能になりました.
そこでiOSライクにAndroidでも下タブのアプリを開発してやるぜー!と思っていると選択範囲しかアイテム名が表示されなかったりとBottomNavigationView 独特のクセが目立ちました.
もちろんこれがMaterialDesignガイドラインが示している解だとはわかっているものの下タブといえばiOSのアレをどうしても想像してしまうためクセは気になります.
この記事ではそれらのクセを 完全に断ち切って消してiOSライクな下タブを目指します
アイテムの色を選択状態によって変える
リソースファイルにcolor
フォルダなどを作成し以下のファイルを追加します.
選択・非選択時の色は各自変えてください.
選択状態の色がプライマリーカラーにする場合は以下の操作は不要で一番下のchecked
にtrue
をセットしてやるだけで可能です.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/colorPrimary" />
<item android:state_checked="false" android:color="@android:color/darker_gray"/>
</selector>
次にBottomNavigationView
が記述されているレイアウトファイルに以下の文を追加します
app:itemIconTint="@color/nav_color"
app:itemTextColor="@color/nav_color"
最後にコード上から選択時に選択状態を直接変更すれば,選択に合わせてアイテムの色を変更できます.
menuItem.setChecked(true);
アイテムの名前を常に表示させる
デフォルトの設定ではアイテム数が増えるとアイテムの名前は選択状態のものだけが表示されていて,常時表示にはなっていません.
これを常時表示にするにはBottomNavigationViewに以下のパラメータを指定することで解決できます.
app:labelVisibilityMode="labeled"
選択時のアイコン拡大アニメーションを無効化
このアニメーションは選択・非選択の状態においてアイテム内のアイコン・テキストの大きさが変動するために起きています.そもそも標準のフォントサイズは若干大きいのでiOSと同じ10sp
に統一します.
dimes.xml
に以下の文を追加します.
<dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>
これで選択・非選択でも文字の大きさが固定され選択中のアイテムが大きくなるアニメーションなどは起こらなくなります.
BottomNavigationViewが手前に来るのを防ぐ
どういうわけかデフォルトではBottomNavigationViewは画面下に固定されている状態ではなく,EditText時などにはFloatingActionButtonの様にNavigationViewごとキーボード上に浮上してきます.
それを防ぐのが以下のコードです.
<activity android:name=".MainActivity"
android:windowSoftInputMode="adjustPan"></activity>
ManifestファイルのBottomNavigationViewが入っているActivityの部分をこのように書き換えることで,BottomViewNavigationが文章編集時でも所定の位置にいてくれます.