BETA

BottomNavigationViewを少しいじってみた①

投稿日:2019-11-30
最終更新:2019-11-30

android.support.design.widget.BottomNavigationViewは公式ライブラリのひとつです。

[https://material.io/guidelines/components/bottom-navigation.html:title]

アイコンとテキストの色を変更する(選択時、未選択時)

1. resのなかにcolorディレクトリを作る

2. そのcolorディレクトリの中にbuttom_navigation.xmlをつくり、次の内容を記載する

res/color/buttom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_checked="true" android:color="#FFF" />  
    <item android:state_pressed="true" android:color="#FFF" />  
    <item android:color="#969696" />  
</selector>  

3. buttomnavigationviewの方に指定をする

res/layout/main.xml
...  
    <android.support.design.widget.BottomNavigationView  
        android:id="@+id/navigation"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_gravity="bottom"  
        android:background="?android:attr/windowBackground"  
        app:itemBackground="@color/themecolor"  
        app:itemIconTint="@color/buttom_navigation"  
        app:itemTextColor="@color/buttom_navigation"  
        app:menu="@menu/navigation" />  
...  

参考:
[http://techblog.reraku.co.jp/entry/2016/12/18/092858:embed]

選択されていないタブの文字を表示させ続ける

main.java

...  

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

        mTextMessage = (TextView) findViewById(R.id.message);  
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);  
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);  

        // no-hide menu-text  
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);  
        for (int i = 0; i < menuView.getChildCount(); i++) {  
            BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);  
            itemView.setShiftingMode(false);  
            itemView.setChecked(false); // Viewの状態を反映させるために呼んでいる  
        }  
    }  

全てのタブの横幅、マージンを固定する

デフォルトの状態だと、タブ(item)が4つあると、選択されたタブのwidth(横幅)が大きく広がり、ほかが狭まる。この4つの横幅を全て固定したい。

参考:
[https://stackoverflow.com/questions/43492344/android-android-support-design-widget-bottomnavigationview-with-4-items-not-equa:embed]

BottomNavigationViewHelper.java

public class BottomNavigationViewHelper {  
    public static void disableShiftMode(BottomNavigationView view) {  
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);  
        try {  
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");  
            shiftingMode.setAccessible(true);  
            shiftingMode.setBoolean(menuView, false);  
            shiftingMode.setAccessible(false);  
            for (int i = 0; i < menuView.getChildCount(); i++) {  
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);  
                //noinspection RestrictedApi  
                item.setShiftingMode(false);  
                // set once again checked value, so view will be updated  
                //noinspection RestrictedApi  
                item.setChecked(item.getItemData().isChecked());  
            }  
        } catch (NoSuchFieldException e) {  
            Log.e("BNVHelper", "Unable to get shift mode field", e);  
        } catch (IllegalAccessException e) {  
            Log.e("BNVHelper", "Unable to change value of shift mode", e);  
        }  
    }  
}  

main.java

...  
        mTextMessage = (TextView) findViewById(R.id.message);  
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);  
        BottomNavigationViewHelper.disableShiftMode(navigation);  
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);  
...  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@MewW6mの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!