如何在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
}