在選項卡標題上設置 Android 自定義字體

Question

我正在嘗試從下面的代碼中為標題（“Tab Item 1”、“Tab Item 2”、“Tab Item 3”）設置自定義字體。 我對 Android Studio 和 Java 真的很陌生，我只是邊做邊學，以及互聯網上的各種材料。

假設我的資產文件夾中已經有一個名為“abc.ttf”的字體，我該如何更改標簽標題的字體？ 下面是我的 TabFragment.java

import android.graphics.Typeface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.AppCompatTextView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class TabFragment extends Fragment {

    TabLayout mTabLayout;
    ViewPager mViewPager;
    private static final int int_items = 3;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        /**
         *Inflate tab_layout and setup Views.
         */
        View x = inflater.inflate(R.layout.tabbed_layout, null);
        mTabLayout = (TabLayout) x.findViewById(R.id.tabs);
        mViewPager = (ViewPager) x.findViewById(R.id.viewpager);

        /**
         *Set an Apater for the View Pager
         */
        mViewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

        /**
         * Now , this is a workaround ,
         * The setupWithViewPager dose't works without the runnable .
         * Maybe a Support Library Bug .
         */

        mTabLayout.post(new Runnable() {
            @Override
            public void run() {
                mTabLayout.setupWithViewPager(mViewPager);
            }
        });

        return x;

    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        /**
         * Return fragment with respect to Position .
         */

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new TabOneFragment();
                case 1:
                    return new TabTwoFragment();
                case 2:
                    return new TabThreeFragment();
            }
            return null;
        }

        @Override
        public int getCount() {

            return int_items;

        }

        /**
         * This method returns the title of the tab according to the position.
         */



        @Override
        public CharSequence getPageTitle(int position) {

            switch (position) {
                case 0:

                    return "Tab Item 1";
                case 1:
                    return "Tab Item 2";
                case 2:
                    return "Tab Item 3";
            }
            return null;
        }
    }

}

這是我的 tabbed_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:background="@color/white"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/black"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>


</LinearLayout>

Answer 1

創建一個將從Tablayout驅動的CustomTabLayout類然后在xml使用這個CustomTablayout而不是Tablayout

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(), "your fonts"); // here you will provide fully qualified path for fonts
    }

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

}

這就是您必須在 xml 中執行的操作。

<yourpackagename.CustomTabLayout
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:background="@color/white"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/black"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

編輯

這個自定義類

package com.ifavaz.kulli;

/**
 * Created by ifawaz on 12/11/16.
 */

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.AppCompatTextView;
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/AmazingDayEveryday.ttf"); // here you will provide fully qualified path for fonts
    }

    @Override
    public void setupWithViewPager(ViewPager viewPager) {
        super.setupWithViewPager(viewPager);

        if (mTypeface != null) {
            this.removeAllTabs();
            ViewGroup slidingTabStrip = (ViewGroup) getChildAt(0);

            PagerAdapter adapter = viewPager.getAdapter();

            for (int i = 0, count = adapter.getCount(); i < count; i++) {
                Tab tab = this.newTab();
                this.addTab(tab.setText(adapter.getPageTitle(i)));
                AppCompatTextView view = (AppCompatTextView) ((ViewGroup) slidingTabStrip.getChildAt(i)).getChildAt(1);
                view.setTypeface(mTypeface, Typeface.NORMAL);
            }
        }
    }

}

這是工作截圖

我希望這能幫到您

Answer 2

簡短的回答：您不需要創建自定義 TabLayout 類，只需在 xml 中為您的 TabLayout 提供一個主題，如下所示：

xml文件

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="@color/white"
app:tabIndicatorColor="@color/colorPrimary"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/black"
android:layout_width="match_parent"
android:theme="@style/AppTheme.YourThemeName" <!-- This is the change -->
android:layout_height="wrap_content" />

樣式.xml 文件

<style name="AppTheme.YourThemeName" parent="ThemeOverlay.AppCompat.Light">
    <item name="fontFamily">@font/your_font</item>
</style>