Frage Ändern Sie die Schriftart des Tab-Textes in Android Design-Unterstützung TabLayout


Ich versuche an dem neuen zu arbeiten TabLayout von der Android Design-Bibliothek.

Ich möchte den Tab-Text in ändern benutzerdefinierte Schriftart. Und ich habe versucht, etwas Styling zu suchen TabLayout, aber endete bis Dies.

Bitte beachten Sie, wie kann ich die Tab-Schriftarten ändern.


75
2018-06-26 07:20


Ursprung


Antworten:


Erstellen Sie eine TextView aus Java Code oder XML wie folgt

<?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"
/>

Stellen Sie sicher, dass die ID hier beibehalten wird, da TabLayout nach dieser ID sucht, wenn Sie eine benutzerdefinierte Textansicht verwenden

Dann aus dem Code dieses Layout aufblasen und den Brauch einstellen Typeface in dieser Textansicht und fügen Sie diese benutzerdefinierte Ansicht der Registerkarte hinzu

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



Wenn Sie TabLayout verwenden und die Schriftart ändern möchten, müssen Sie der vorherigen Lösung eine neue for-Schleife hinzufügen:

 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);
                }
            }
        }
    } 

Verweise dies Ändern Sie den Schriftschnitt in den Aktionsleisten-Registerkarten mit Sherlock


137
2018-06-26 07:28



Große Antwort von Praveen Sharma. Nur ein kleiner Zusatz: Anstatt zu verwenden changeTabsFont() überall wo du brauchst TabLayoutSie können einfach Ihre eigenen verwenden 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);
            }
        }
    }

}

Und noch etwas. TabView ist ein LinearLayout mit TextView innerhalb (es kann auch optional enthalten ImageView). So können Sie den Code noch einfacher machen:

@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);
}

Aber ich würde es nicht empfehlen. Ob TabLayout Implementierung wird sich ändern, dieser Code kann nicht ordnungsgemäß funktionieren oder sogar abstürzen.

Eine weitere Möglichkeit zum Anpassen TabLayout fügt eine benutzerdefinierte Ansicht hinzu. Hier ist das Große Beispiel.


45
2017-10-22 15:37



Erstellen Sie Ihren eigenen benutzerdefinierten Stil und verwenden Sie den übergeordneten Stil als parent="@android:style/TextAppearance.Widget.TabWidget"

Und in Ihrem Tab-Layout verwenden Sie diesen Stil als app:tabTextAppearance="@style/tab_text"

Beispiel: Stil:

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

Beispiel: Registerkarte Layout-Komponente:

<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



Die folgende Methode wird die Schriftart insgesamt ändern ViewGroup rekursiv. Ich habe diese Methode gewählt, weil Sie sich nicht um die innere Struktur von TabLayout. Ich benutze Kalligraphie Bibliothek, um eine Schriftart festzulegen.

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



Für die Designunterstützung 23.2.0 müssen Sie mit setupWithViewPager den Code von addTab (Registerkarte Tab) in addTab verschieben (Register Tab, boolean setSelected).


11
2018-03-07 18:37



Nun, ich fand es in 23.4.0 einfach, ohne eine Schleife zu verwenden. Überschreibe einfach addTab (Tab @NonNull Tab, boolean setSelected) wie von @ejw vorgeschlagen.

@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);
}

Und hier ist das 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" />

Hoffe es könnte helfen :)


8
2018-05-26 12:25



Wie Andrei beantwortet, können Sie fontface ändern, indem Sie erweitern TabLayout Klasse. Und wie Penzzz sagte, du kannst es nicht tun addTab Methode. Überschreiben onLayout Methode wie folgt:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom){
    super.onLayout(changed, left, top, right, bottom);

    final ViewGroup tabStrip = (ViewGroup)getChildAt(0);
    final int tabCount = tabStrip.getChildCount();
    ViewGroup tabView;
    int tabChildCount;
    View tabViewChild;

    for(int i=0; i<tabCount; i++){
        tabView = (ViewGroup)tabStrip.getChildAt(i);
        tabChildCount = tabView.getChildCount();
        for(int j=0; j<tabChildCount; j++){
            tabViewChild = tabView.getChildAt(j);
            if(tabViewChild instanceof AppCompatTextView){
                if(fontFace == null){
                    fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.IranSans));
                }
                ((TextView) tabViewChild).setTypeface(fontFace, Typeface.BOLD);
            }
        }
    }
}

Muss onLayout-Methode überschreiben, weil, wenn Sie verwenden setupWithViewPager Um den TabLayout mit dem ViewPager zu verbinden, müssen Sie Tabs entweder mit der setText-Methode oder im PagerAdapter hinterlegen, und wenn dies passiert ist, wird onLayout-Methode in der übergeordneten ViewGroup (TabLayout) aufgerufen. (Ändern eines TextView-Texts, weil onLayout-Methode des übergeordneten Elements aufgerufen wird - Ein tabView hat zwei untergeordnete Elemente, eines ist ImageView, das andere ist TextView.)


5
2018-04-22 18:10



Meine Resovle-Methode einfach so, ändern Sie die angegebene Registerkarte Text,

 ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(1);
            View tabViewChild = vgTab.getChildAt(1);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setText(str);
            }

3
2017-08-15 15:49



Du kannst das benutzen, es funktioniert für mich.

 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) {
                AssetManager mgr = getActivity().getAssets();
                Typeface tf = Typeface.createFromAsset(mgr, "fonts/Roboto-Regular.ttf");//Font file in /assets
                ((TextView) tabViewChild).setTypeface(tf);
            }
        }
    }
}

3
2017-08-13 14:13



Mein 2p, Kotlin mit Referenzprüfung, überall anwendbar, da es aufhört, wenn etwas nicht stimmt.

private fun setTabLayouFont(tabLayout: TabLayout) {
    val viewGroupTabLayout = tabLayout.getChildAt(0) as? ViewGroup?
    (0 until (viewGroupTabLayout?.childCount ?: return))
            .map { viewGroupTabLayout.getChildAt(it) as? ViewGroup? }
            .forEach { viewGroupTabItem ->
                (0 until (viewGroupTabItem?.childCount ?: return))
                        .mapNotNull { viewGroupTabItem.getChildAt(it) as? TextView }
                        .forEach { applyDefaultFontToTextView(it) }
            }
}

1
2018-02-28 11:10