AndroidデザインサポートTabLayoutのタブテキストのフォントを変更する


109

私はTabLayoutandroidデザインライブラリから新しいものに取り組んでいます。

タブのテキストをカスタムフォントに変更したい。そして、関連するスタイリングを検索してみましたTabLayoutが、結局これに終わりました。

タブテキストのフォントを変更する方法を教えてください。


3
スパナブル文字列を使用
NullByte

回答:


37

このようなJavaコードまたはXMLからTextViewを作成します

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

カスタムテキストビューを使用する場合、TabLayoutがこのIDをチェックするため、ここにIDを保持してください。

次に、コードからこのレイアウトを膨らませTypeface、そのテキストビューにカスタムを設定し、このカスタムビューをタブに追加します

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

2
どのようにして設定することができますtabTextColorし、tabSelectedTextColorこのような状況でプロパティ?
Alireza Noorali 2017年


162

使用TabLayoutしていてフォントを変更したい場合は、次のように前のソリューションに新しいforループを追加する必要があります。

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

シャーロックを使用してアクションバーのタブでフォントスタイル変更するを参照してください


Mプレビューを使用していません。それを行う他の方法はありますか?
Dory

1
Mプレビューは必要ありません。使用するすべてのユーザーに有効ですTabLayout
Mario Velasco

しかし、android.view.View android.support.design.widget.TabLayout.getChildAt(int)でNullPointerExceptionが発生しました。修正方法を教えてください。コードに欠けているものを見つけることができません。
brettbrdls

1
の最初のパラメーターはsetTypeFaceです。これはTypeFaceFontクラスが見つからない場合(私には存在しないようです)
Vahid Amiri

104

独自のカスタムスタイルを作成し、親スタイルを使用する parent="@android:style/TextAppearance.Widget.TabWidget"

そして、あなたのタブレイアウトでこのスタイルを使用します app:tabTextAppearance="@style/tab_text"

例:スタイル:

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

例:タブレイアウトコンポーネント:

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

9
これは正しい、私はparent="TextAppearance.Design.Tab"私の場合に使用しています。
Javatar

1
これは最初の回答よりもはるかに優れており、将来的に何かを壊す可能性のあるブラックマジック(隠されたAPI)がない場合
Sulfkain

2
fontFamilyを使用する場合は機能し、fontPathを使用する場合は機能しない
Tram Nguyen

2
を使用すると、奇妙な例外が発生していましたTextAppearance.Widget.TabWidget。@Javatarの回答で解決しました。
funct7

47

プラビーン・シャルマからの素晴らしい答え。ほんの少しの追加:changeTabsFont()必要なすべての場所を使用する代わりにTabLayout、独自のを使用できます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);
            }
        }
    }

}

後もう一つ。 内部TabViewLinearLayoutwith TextViewです(オプションでを含めることもできますImageView)。したがって、コードをさらに単純にすることができます。

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

しかし、私はこの方法をお勧めしません。場合はTabLayout、実装が変更されます、このコードが不適切に動作したり、クラッシュすることができます。

カスタマイズするもう1つの方法TabLayoutは、カスタムビューを追加することです。これが良いです。


次のようにタブを設定した場合、addTabは呼び出されません。mViewPager.setAdapter(new YourPagerAdapter(getChildFragmentManager())); mTabLayout.setupWithViewPager(mViewPager);
Penzzz 2016年

2
@Penzzzあなたは絶対的に正しいです。この場合、コードをaddTabメソッドから別のメソッドに移動する必要があります。たとえば、onMeasureです。
Andrei Aulaska 2016年

@AndreiAulaska thnxあなたは私の日を救います。あなたの最後のリンクは私を救います。
Amol Dale 2016

これは私が最新バージョンで考えるともう機能しません。@ejwの回答が機能しています。addTab(Tab tab、boolean setSelected)で追加する必要があります
Sayem

3
これはうまくいきます。注:サポートライブラリ25.x以降では、のaddTab(Tab tab, int position, boolean setSelected)代わりにオーバーライドする必要がありますaddTab(Tab tab)
Vicky Chijwani 2017年

20

(APIレベル16)以降をXML実行しているデバイスの機能でフォントサポートを使用Android 4.1するには、サポートライブラリ26以降を使用します。

  1. resフォルダーを右クリック
  2. 新規-> Androidリソースディレクトリ->フォントの選択-> OK
  3. あなたの入れてmyfont.ttf、新しく作成したフォントフォルダ内のファイルを

オンres/values/styles.xml追加:

<style name="customfontstyle" parent="@android:style/TextAppearance.Small">
    <item name="android:fontFamily">@font/myfont</item>
</style>

レイアウトファイルにapp:tabTextAppearance = "@ style / customfontstyle"を追加します。

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabTextAppearance="@style/customfontstyle"
    app:tabMode="fixed" />

[fonts in xml]を参照してください。(https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml


xamarinフォームとxamarin android.thanksで動作します
Esmail Jamshidiasl

正解です。ただし、「TextAppearance.Design.Tab」を拡張する必要があります
XY

16

次のメソッドは、フォント全体をViewGroup再帰的に変更します。の内部構造を気にする必要がないため、この方法を選択しましたTabLayout書道ライブラリを使用してフォントを設定しています。

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

1
この問題は、レイアウトをViewpagerにアタッチすると、カスタマイズされたフォントが失われることです。
rupps

10

デザインサポート23.2.0の場合、setupWithViewPagerを使用して、コードをaddTab(Tab tab)からaddTab(Tab tab、boolean setSelected)に移動する必要があります。


8

あなたはこれを使うことができます、それは私のために働きます。

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

7

まあ、私は23.4.0ではループを使用せずにそれを簡単に見つけました。@ejwの提案に従ってaddTab(@NonNullタブタブ、ブール値setSelected)をオーバーライドするだけです。

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

そしてここに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" />

それが役に立てば幸い:)


1
しかし、tabSelectedTextColorとtabTextColoを設定する方法は?
モスタファイムラン2016年

@MostafaImranのバージョンにandroid:textColor="@color/graylove"は、state_selected色が指定された状態リストセレクターが必要です
AA_PV

7

以下のようアンドレイは答え、あなたが拡張することによりfontfaceを変更することができTabLayoutのクラスを。そして、Penzzzが言ったように、addTabメソッドでそれを行うことはできません。以下のようにonLayoutメソッドをオーバーライドします

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

onLayoutメソッドを上書きする必要があります。これは、setupWithViewPagerメソッドを使用してTabLayoutをViewPagerにバインドする場合、setTextメソッドまたはその後のPagerAdapterでタブテキストを設定する必要があり、これが発生すると、親のViewGroupでonLayoutメソッドが呼び出されるためです( TabLayout)とは、設定フォントフェイスを配置する場所です(TextViewテキストを変更すると、親のonLayoutメソッドが呼び出されます-tabViewには2つの子があり、1つはImageViewで、もう1つはTextViewです)

別の解決策:

まず、次のコード行:

    if(fontFace == null){
        fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.IranSans));
    }

上記のソリューションでは、2つのループの外側に記述する必要があります。

しかし、API> = 16のより良い解決策はandroid:fontFamilyを使用することです

fontという名前のAndroidリソースディレクトリを作成し、目的のフォントをディレクトリにコピーします。

次に、次のスタイルを使用します。

<style name="tabLayoutTitles">
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">@dimen/appFirstFontSize</item>
    <item name="android:fontFamily">@font/vazir_bold</item>
</style>

<style name="defaultTabLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/defaultTabLayoutHeight</item>
    <item name="android:gravity">right</item>
    <item name="tabTextAppearance">@style/tabLayoutTitles</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabIndicatorColor">@color/white</item>
    <item name="tabIndicatorHeight">@dimen/accomTabIndicatorHeight</item>
    <item name="tabMode">fixed</item>
    <item name="tabGravity">fill</item>
    <item name="tabBackground">@drawable/rectangle_white_ripple</item>
    <item name="android:background">@color/colorPrimary</item>
</style>

これはパフォーマンスの悪い修正で、onLayout()タブの切り替えやタブの下のリストのスクロールなど、レイアウトを変更するたびに呼び出されforますTabLayout。多くのタブアプリでがネストされていると、遅延が発生します。
Amr Barakat

2
@Amr Barakat。このリンク:developer.android.com/reference/android/view/…、int、int、int、int)によると、これは正しくありません。私もテストしました。onLayoutメソッドにブレークポイントを設定すると、タブの切り替えやリストのスクロールではなく、タブが作成されているときに呼び出されます。
アラッシュ

1
私にとってonLayout()は、タブが切り替わるときに何度も呼び出されますが(正確にわからない)、これを考慮して、boolean changedtrueの場合にのみフォントを設定します。そうすることで、フォントが複数回設定されるのを防ぐことができます。
ロバート

優れたソリューション、コード不要、xml属性のみ
注意7j '13 / 09/19

3

このような私のResolveメソッドは、指定されたタブのテキストを変更し、

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

2
I think this is easier way.

<android.support.design.widget.TabLayout
   android:id="@+id/tabs"
   app:tabTextColor="@color/lightPrimary"
   app:tabSelectedTextColor="@color/white"
   style="@style/CustomTabLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>
<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
   <item name="tabMaxWidth">20dp</item>
   <item name="tabMode">scrollable</item>
   <item name="tabIndicatorColor">?attr/colorAccent</item>
   <item name="tabIndicatorHeight">2dp</item>
   <item name="tabPaddingStart">12dp</item>
   <item name="tabPaddingEnd">12dp</item>
   <item name="tabBackground">?attr/selectableItemBackground</item>
   <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
   <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
   <item name="android:textSize">16sp</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:textColorSecondary</item>
   <item name="textAllCaps">false</item>
</style>

2

私のために働いたKotlin拡張機能:

fun TabLayout.setFont(font: FontUtils.Fonts) {
    val vg = this.getChildAt(0) as ViewGroup
    for (i: Int in 0..vg.childCount) {
        val vgTab = vg.getChildAt(i) as ViewGroup?
        vgTab?.let {
            for (j: Int in 0..vgTab.childCount) {
                val tab = vgTab.getChildAt(j)
                if (tab is TextView) {
                    tab.typeface = FontUtils.getTypeFaceByFont(FontUtils.Fonts.BOLD, context)
                }
            }
        }
    }
}

1

私の2p、参照チェック付きのKotlinは、何か問題があった場合に停止するため、どこにでも適用できます。

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

また、選択したタブと選択していないタブのフォントを変更できるようにするKotlinでの私の実装を次に示します。

class FontTabLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    @AttrRes defStyleAttr: Int = 0
) : TabLayout(context, attrs, defStyleAttr) {

    private var textSize = 14f

    private var defaultSelectedPosition = 0

    private var selectedTypeFace: Typeface? = ResourcesCompat.getFont(context, R.font.muli_bold)
    private var normalTypeFace: Typeface? = ResourcesCompat.getFont(context, R.font.muli_regular)

    @ColorInt private var selectedColor = 0
    @ColorInt private var normalTextColor = 0

    init {
        attrs?.let { initAttrs(it) }
        addOnTabSelectedListener()
    }

    private fun initAttrs(attrs: AttributeSet) {
        val a = context.obtainStyledAttributes(attrs, R.styleable.FontTabLayout)

        textSize = a.getDimensionPixelSize(R.styleable.FontTabLayout_textSize, 14).toFloat()

        defaultSelectedPosition = a.getInteger(R.styleable.FontTabLayout_defaultSelectedPosition, 0)
        val selectedResourceId = a.getResourceId(R.styleable.FontTabLayout_selectedTypeFace, R.font.muli_bold)
        val normalResourceId = a.getResourceId(R.styleable.FontTabLayout_normalTypeFace, R.font.muli_regular)

        selectedColor = a.getColor(com.google.android.material.R.styleable.TabLayout_tabSelectedTextColor, 0)
        normalTextColor = a.getColor(R.styleable.FontTabLayout_normalTextColor, 0)

        selectedTypeFace = ResourcesCompat.getFont(context, selectedResourceId)
        normalTypeFace = ResourcesCompat.getFont(context, normalResourceId)

        a.recycle()
    }

    private fun addOnTabSelectedListener() {
        addOnTabSelectedListener(object : OnTabSelectedListenerAdapter() {

            override fun onTabUnselected(tab: Tab?) {
                getCustomViewFromTab(tab)?.apply {
                    setTextColor(normalTextColor)
                    typeface = normalTypeFace
                }
            }

            override fun onTabSelected(tab: Tab?) {

                getCustomViewFromTab(tab)?.apply {
                    setTextColor(selectedColor)
                    typeface = selectedTypeFace
                }
            }

            private fun getCustomViewFromTab(tab: Tab?) = tab?.customView as? AppCompatTextView

        })
    }

    override fun setupWithViewPager(viewPager: ViewPager?, autoRefresh: Boolean) {
        super.setupWithViewPager(viewPager, autoRefresh)
        addViews(viewPager)
    }

    private fun addViews(viewPager: ViewPager?) {
        for (i in 0 until tabCount) {
            val customTabView = getCustomTabView(i).apply {
                typeface = if (i == defaultSelectedPosition) selectedTypeFace else normalTypeFace
                val color = if (i == defaultSelectedPosition) selectedColor else normalTextColor
                setTextColor(color)
                text = viewPager?.adapter?.getPageTitle(i)
            }

            getTabAt(i)?.customView = customTabView
        }
    }

    private fun getCustomTabView(position: Int): AppCompatTextView {
        return AppCompatTextView(context).apply {
            gravity = Gravity.CENTER
            textSize = this@FontTabLayout.textSize
            text = position.toString()
        }
    }
}

attrs.xml内:

<declare-styleable name="FontTabLayout">
    <attr name="normalTextColor" format="reference|color" />
    <attr name="textSize" format="dimension" />
    <attr name="defaultSelectedPosition" format="integer" />
    <attr name="selectedTypeFace" format="reference" />
    <attr name="normalTypeFace" format="reference" />
</declare-styleable>

tabs.getTabAt(1)?. textは、一度設定するとテキストを動的に変更しません。
shanraisshan

0

kotlin拡張関数では、これを使用します。

 fun TabLayout.setFontSizeAndColor(typeface: Typeface, @DimenRes textSize: Int, @ColorRes textColor: Int) {
val viewGroup: ViewGroup = this.getChildAt(0) as ViewGroup
val tabsCount: Int = viewGroup.childCount
for (j in 0 until tabsCount) {
    val viewGroupTab: ViewGroup = viewGroup.getChildAt(j) as ViewGroup
    val tabChildCount: Int = viewGroupTab.childCount
    for (i in 0 until tabChildCount) {
        val tabViewChild: View = viewGroupTab.getChildAt(i) as View
        if ( tabViewChild is TextView) {
            tabViewChild.typeface = typeface
            tabViewChild.gravity = Gravity.FILL
            tabViewChild.maxLines = 1
            tabViewChild.setTextSize(TypedValue.COMPLEX_UNIT_PX, this.resources.getDimension(textSize))
            tabViewChild.setTextColor(ContextCompat.getColor(this.context, textColor))
        }
    }
}

}


-2

変化する

if (tabViewChild instanceof TextView) {

ために

if (tabViewChild instanceof AppCompatTextView) { 

android.support.design.widget.TabLayoutで動作するようにする(少なくともcom.android.support:design:23.2.0から)


4
しかし、AppCompatTextViewはTextViewを拡張するので、なぜこれが違いを生むのでしょうか。
Shirane85 2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.