web-dev-qa-db-ja.com

BottomNavigationViewサポートのカスタムTextSize android

BottomNavigationViewのtextSizeをAndroid support library 25.0.0から変更しようとしています

<Android.support.design.widget.BottomNavigationView
        Android:id="@+id/bottom_navigation_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:background="@color/colorPrimaryDark"
        Android:foregroundTint="@color/colorAccent"
        app:itemIconTint="@Android:color/white"
        app:itemTextColor="@Android:color/white"
        app:layout_anchor="@id/lyt_container"
        app:layout_anchorGravity="bottom"
        app:itemTextAppearance="@style/TextStyleBNV"
        app:menu="@menu/nav_menu" />

<style name="TextStyleBNV">
        <item name="Android:textSize">@dimen/twelve_sp</item>
        <item name="Android:padding">0dp</item>
        <item name="textAllCaps">false</item>
    </style>

不足しているものはありますか。

androidandroid-support-libraryandroiddesignsupport
36
silentsudo

残念ながら、BottomNavigationViewのこの最初のバージョンには多くの制限がありました。そして今のところ、サポートデザインAPIを使用してタイトルのサイズを変更することはできません。したがって、Googleが実装していない間にこの制限を解決するには、次のようにします。

Dimen.xmlに次を配置できます。

    <dimen name="design_bottom_navigation_text_size" tools:override="true">30sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">30sp</dimen>

これにより、BottomNavigationViewの内部クラスが使用するdimenのデフォルト値をオーバーライドしています。気をつけて。

140
Sanf0rd

コンポーネント属性BottomNavigationViewおよびitemTextAppearanceActiveの独自のスタイルを定義することにより、itemTextAppearanceInactiveテキストの外観を変更できます。デフォルトでは、ドキュメントにtextAppearanceCaption checkセクションTheme Attribute Mappingがあります Bottom Navigation 。

<Android.support.design.widget.BottomNavigationView
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:itemTextAppearanceActive="@style/BottomNavigationView.Active"
    app:itemTextAppearanceInactive="@style/BottomNavigationView"
    app:menu="@menu/bottom_navigation_main" />

styles.xml

<style name="BottomNavigationView" parent="@style/TextAppearance.AppCompat.Caption">
    <item name="Android:textSize">10sp</item>
</style>

<style name="BottomNavigationView.Active" parent="@style/TextAppearance.AppCompat.Caption">
    <item name="Android:textSize">11sp</item>
</style>
22
Volodymyr Khodonovych

このように変更できます。 Googleサポートが使用したラベルのIDを知るだけで済みます

BottomNavigationView bottomNavigationView = (BottomNavigationView) fragmentActivity.findViewById(R.id.bottom_navigation);
    TextView textView = (TextView) bottomNavigationView.findViewById(R.id.menu_item_home).findViewById(R.id.largeLabel);
    textView.setTextSize(8);

LargeLabelは、Googleがライブラリで使用したラベルのIDです

11
BoshRa

別の解決策は、Spannableを使用してサイズの色、フォント、またはその他のテキスト属性を調整することです。

private static class MenuSpannable extends MetricAffectingSpan{
        int color = Color.RED;
        int size = 40;

        public MenuSpannable() {
            setSelected(false);
        }

        @Override
        public void updateMeasureState(TextPaint p) {
            p.setColor(color);
            p.setTextSize(size);
            /* p.setText --- whatever --- */
        }

        @Override
        public void updateDrawState(TextPaint tp) {
            tp.setColor(color);
            tp.setTextSize(size);
            /* tp.setText --- whatever --- */
        }
        private void setSelected(boolean selected){
            if(selected){
                color = Color.RED;
                size = 40;
            }else{
                color = Color.BLUE;
                size = 20;
            }
        }
}

そして、メニュー項目のスパンを設定します...

@Override
protected void onCreate(Bundle savedInstanceState) {
        BottomNavigationView mBottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_menu);
        final Menu menu = mBottomNavigationView.getMenu();
        final Font font = Font.getFromContext(this);
        for(int i = 0; i < menu.size(); i++) {
            SpannableString spannableString = new SpannableString(menu.getItem(i).getTitle());
            spannableString.setSpan(new MenuSpannable(),0,spannableString.length(),0);
            menu.getItem(i).setTitle(spannableString);
        }
}

選択状態に応じてテキストを変更する場合

mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
             Menu menu = mBottomNavigationView.getMenu();
             for(int i = 0; i < menu.size(); i++) {
                MenuSpannable menuSpannable = new MenuSpannable();
                menuSpannable.setSelected(item.getItemId() == menu.getItem(i).getItemId());
                SpannableString sString = new SpannableString(menu.getItem(i).getTitle());
                sString.setSpan(menuSpannable,0,sString.length(),0);
                menu.getItem(i).setTitle(sString);
                }
            return false;
            }
        });
1
Kvant

これを行うには、ナビゲーションアイテムのレイアウトをオーバーライドすることにしました。

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <ImageView
        Android:id="@+id/icon"
        Android:layout_width="24dp"
        Android:layout_height="24dp"
        Android:layout_gravity="center_horizontal"
        Android:layout_marginTop="@dimen/design_bottom_navigation_margin"
        Android:layout_marginBottom="@dimen/design_bottom_navigation_margin"
        Android:duplicateParentState="true" />
    <Android.support.design.internal.BaselineLayout
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|center_horizontal"
        Android:clipToPadding="false"
        Android:paddingBottom="10dp"
        Android:duplicateParentState="true">
        <TextView
            Android:id="@+id/smallLabel"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:textSize="@dimen/design_bottom_navigation_text_size"
            Android:singleLine="true"
            Android:duplicateParentState="true" />
        <TextView
            Android:id="@+id/largeLabel"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:visibility="invisible"
            Android:textSize="@dimen/design_bottom_navigation_active_text_size"
            Android:singleLine="true"
            Android:duplicateParentState="true" />
    </Android.support.design.internal.BaselineLayout>
</merge>

必ずdesign_bottom_navigation_itemという名前を付けてください

0
Pafoid