Pregunta Cambia la fuente del texto de la pestaña en el diseño de Android compatible TabLayout


Estoy tratando de trabajar en el nuevo TabLayout de la biblioteca de diseño de Android.

Quiero cambiar el texto de la pestaña a Fuente personalizada. Y, traté de buscar un poco de estilo relacionado con TabLayout, pero terminó hasta esta.

Por favor guía cómo puedo cambiar las fuentes de texto de pestañas.


75
2018-06-26 07:20


origen


Respuestas:


Crea un TextView desde código Java o XML como este

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:textSize="15sp"
    android:textColor="@color/tabs_default_color"
    android:gravity="center"
    android:layout_height="match_parent"
/>

Asegúrate de mantener el id como está aquí porque el TabLayout marca esta ID si usas una vista textual personalizada

Luego, desde el código, inflar este diseño y establecer el personalizado Typeface en esa vista de texto y agrega esta vista personalizada a la pestaña

for (int i = 0; i < tabLayout.getTabCount(); i++) {
        //noinspection ConstantConditions
     TextView tv=(TextView)LayoutInflater.from(this).inflate(R.layout.custom_tab,null)
     tv.setTypeface(Typeface);       
     tabLayout.getTabAt(i).setCustomView(tv);

    }

19
2017-07-31 06:57



Si está utilizando TabLayout y desea cambiar la fuente, debe agregar un nuevo ciclo para la solución anterior como esta:

 private void changeTabsFont() {

        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(Font.getInstance().getTypeFace(), Typeface.NORMAL);
                }
            }
        }
    } 

referir esto Cambiar el estilo de fuente en las pestañas de la barra de acciones con Sherlock


137
2018-06-26 07:28



Gran respuesta de praveen Sharma. Solo una pequeña adición: En lugar de usar changeTabsFont() donde sea que necesites TabLayout, simplemente puede usar su propio CustomTabLayout.

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomTabLayout extends TabLayout {
    private Typeface mTypeface;

    public CustomTabLayout(Context context) {
        super(context);
        init();
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/Roboto-Regular.ttf");
    }

    @Override
    public void addTab(Tab tab) {
        super.addTab(tab);

        ViewGroup mainView = (ViewGroup) getChildAt(0);
        ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());

        int tabChildCount = tabView.getChildCount();
        for (int i = 0; i < tabChildCount; i++) {
            View tabViewChild = tabView.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
            }
        }
    }

}

Y una cosa más. TabView es un LinearLayout con TextView dentro (también puede contener opcionalmente ImageView) Entonces puedes hacer el código aún más simple:

@Override
public void addTab(Tab tab) {
    super.addTab(tab);

    ViewGroup mainView = (ViewGroup) getChildAt(0);
    ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());
    View tabViewChild = tabView.getChildAt(1);
    ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
}

Pero no lo recomendaría de esta manera. Si TabLayout la implementación cambiará, este código puede funcionar incorrectamente o incluso bloquearse.

Otra forma de personalizar TabLayout está agregando una vista personalizada a él. Aquí está el gran ejemplo.


45
2017-10-22 15:37



Cree su propio estilo personalizado y use el estilo principal como parent="@android:style/TextAppearance.Widget.TabWidget"

Y en su diseño de pestaña, use este estilo como app:tabTextAppearance="@style/tab_text"

Ejemplo: Estilo:

<style name="tab_text" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:fontFamily">@font/poppins_regular</item>
</style>

Ejemplo: componente de diseño de pestaña:

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabTextAppearance="@style/tab_text" />

31
2017-08-22 11:51



El siguiente método cambiará la fuente en toda ViewGroup recursivamente. Elegí este método porque no tiene que preocuparse por la estructura interna de TabLayout. Estoy usando Caligrafía biblioteca para establecer una fuente.

void changeFontInViewGroup(ViewGroup viewGroup, String fontPath) {
    for (int i = 0; i < viewGroup.getChildCount(); i++) {
        View child = viewGroup.getChildAt(i);
        if (TextView.class.isAssignableFrom(child.getClass())) {
            CalligraphyUtils.applyFontToTextView(child.getContext(), (TextView) child, fontPath);
        } else if (ViewGroup.class.isAssignableFrom(child.getClass())) {
            changeFontInViewGroup((ViewGroup) viewGroup.getChildAt(i), fontPath);
        }
    }
}

16
2018-04-22 14:59



Para soporte de diseño 23.2.0, usando setupWithViewPager, tendrá que mover el código de addTab (pestaña Tab) para agregarTab (pestaña Tab, boolean setSelected).


11
2018-03-07 18:37



Bien, lo encontré simple en 23.4.0 sin usar un bucle. Simplemente anule addTab (ficha pestaña @NonNull, boolean setSelected) como lo sugiere @ejw.

@Override
public void addTab(@NonNull Tab tab, boolean setSelected) {
    CoralBoldTextView coralTabView = (CoralBoldTextView) View.inflate(getContext(), R.layout.coral_tab_layout_view, null);
    coralTabView.setText(tab.getText());
    tab.setCustomView(coralTabView);

    super.addTab(tab, setSelected);
}

Y aquí está el XML

<?xml version="1.0" encoding="utf-8"?>
<id.co.coralshop.skyfish.ui.CoralBoldTextView
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/custom_text"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:ellipsize="end"
   android:gravity="center"
   android:singleLine="true"
   android:textColor="@color/graylove"
   android:textSize="@dimen/tab_text_size" />

Espero que pueda ayudar :)


8
2018-05-26 12:25