如何在Android设计支持库中使用TabLayout书法在xml中自定义Font？

Question

如何使用书法将自定义字体应用于设计支持库中的TabLayout？

我已经得到它在Java工作，大多数答案似乎参考。 （例如，在Android设计支持TabLayout中更改选项卡文本的字体 ）

我不想做自定义课程，我只想使用书法。 （ https://github.com/chrisjenx/Calligraphy ）

• 如果我使用tabTextAppearance的自定义样式，我可以更改textSize但fontPath没有任何效果。

谢谢

Answer 1

我使用扩展TabLayout的方法。 通过这种方式，您可以在TabLayout中简单地定义fontPath;

<com.mypackage.base.widget.FontAwareTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        fontPath="@string/common_fonts_sans_condensed_bold"
/>

这里的类代码：

 /**
 * Simple helper class which extends a TabLayout to allow us to customize the font of the tab.
 * https://gist.github.com/tmtrademarked/09926077a406959be15fc8a824a52751
 * https://github.com/chrisjenx/Calligraphy/issues/180
 */
public final class FontAwareTabLayout extends TabLayout {

  private String fontPath;

  public FontAwareTabLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    fontPath = pullFontPathFromView(context, attrs, new int[] { R.attr.fontPath });
  }

  /**
   * Tries to pull the Custom Attribute directly from the TextView.
   *
   * @param context Activity Context
   * @param attrs View Attributes
   * @param attributeId if -1 returns null.
   * @return null if attribute is not defined or added to View
   */
  static String pullFontPathFromView(Context context, AttributeSet attrs, int[] attributeId) {
    if (attributeId == null || attrs == null) return null;

    final String attributeName;
    try {
      attributeName = context.getResources().getResourceEntryName(attributeId[0]);
    } catch (Resources.NotFoundException e) {
      // invalid attribute ID
      return null;
    }

    final int stringResourceId = attrs.getAttributeResourceValue(null, attributeName, -1);
    return stringResourceId > 0 ? context.getString(stringResourceId)
        : attrs.getAttributeValue(null, attributeName);
  }

  @Override
  public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
    super.addTab(tab, position, setSelected);

    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) {
        CalligraphyUtils.applyFontToTextView(getContext(), (TextView) tabViewChild, fontPath);
      }
    }
  }
}

Answer 2

有一种方法可以在xml中为TabLayout使用自定义字体，但它有点hacky。 您必须为Tabs提供自己的自定义布局，在该布局中，您可以根据自己的喜好设置TextView的样式。

所以基本上你需要这个设置：

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    SampleFragmentPagerAdapter pagerAdapter = 
        new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
    viewPager.setAdapter(pagerAdapter);

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);

    // Iterate over all tabs and set the custom view
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(pagerAdapter.getTabView(i));
    }
}

//...
}

然后是PagerAdapter：

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    private String tabTitles[] = new String[] { "Tab1", "Tab2" };

    // ...

    public View getTabView(int position) {
        // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        return v;
    }
}

这是custom_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    fontPath="fonts/CustomFont.otf"
    tools:ignore="MissingPrefix" />

代码中缺少一些东西，但我认为你可以填写缺少的部分，这只是它的一个要点。 这只是参考文献中博客文章的一部分，增加了书法。 您可以查看它以获取更多详细信息。

参考文献：

• https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout

Answer 3

嗨，我认为这是书法图书馆的简单和最佳方式。 书法Github

fontName是资产中的字体名称，如“fonts / cocon_next_font.ttf”。

public static void changeTabsFont(TabLayout tabLayout, String fontName) {

        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) {
                    CalligraphyUtils.applyFontToTextView(tabLayout.getContext(), (TextView) tabViewChild, fontName);
                }
            }
        }
    }

Answer 4

您可以为android.support.design.widget.TabLayout定义样式，然后为文本外观编写自己的样式，如下所示：

<style name="TextAppearance.FontPath" parent="android:TextAppearance">
<item name="fontPath">fonts/Roboto-Light.ttf</item>

那么你必须添加项目：

<item name="tabTextAppearance">@style/TextAppearance.FontPath</item>

你的android.support.design.widget.TabLayout风格。 它应该工作。

Answer 5

更新：

请参阅（现在） https://developer.android.com/preview/features/working-with-fonts.html Android O允许您通过在res / font /文件夹中添加字体文件将字体作为资源捆绑。 这些字体在您的R文件中编译，并在Android Studio中自动提供。 您可以借助新的资源类型字体访问字体资源。 例如，要访问字体资源，请使用@ font / myfont或R.font.myfont。

要将字体添加为资源，请在Android Studio中执行以下步骤：

1. 右键单击res文件夹，然后转到“新建”>“Android资源目录”。 将出现“新建资源目录”窗口。

2. 在“资源类型”列表中，选择“字体”，然后单击“确定”。 注意：资源目录的名称必须是font。

3. 在字体文件夹中添加字体文件。 下面的文件夹结构生成R.font.dancing_script，R.font.lobster和R.font.typo_graphica。 在资源目录中添加字体文件

4. 双击字体文件以在编辑器中预览文件的字体。

创建字体系列

New-Font-resource文件，文件类似

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/lobster_regular" />
    <font
        android:fontStyle="italic"
        android:fontWeight="400"
        android:font="@font/lobster_italic" />
</font-family>

- 然后像这样的textiview

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/lobster"/>

Answer 6

如果您使用FragmentPagerAdapter，您可以在getPageTitle中使用Spannable，例如：

override fun getPageTitle(position: Int): CharSequence? {
        val sBuilder = SpannableStringBuilder()
        when(position){
            0->    sBuilder.append("First Tab")
            1->    sBuilder.append("Second Tab")
            else-> sBuilder.append("Third Tab")
        }
        CalligraphyTypefaceSpan(TypefaceUtils.load(getAssets(), "fonts/Roboto-Bold.ttf"))
        return sBuilder
}