如何在NavigationView中设置自定义字体?
使用新的NavigationView
,我们可以通过XML中的菜单资源设置抽屉的项目。
有了这个,我们可以用类似的东西来设置每个项目
<item android:id="@+id/drawer_my_account" android:icon="@drawable/ic_my_account" android:title="@string/drawer_my_account" />
但现在,我想为抽屉中的每个项目设置一个自定义字体,而且我无法通过XML或Java代码find这种方法。 有没有办法做到这一点?
只需将以下类文件添加到您的项目。
import android.graphics.Paint; import android.graphics.Typeface; import android.text.TextPaint; import android.text.style.TypefaceSpan; public class CustomTypefaceSpan extends TypefaceSpan { private final Typeface newType; public CustomTypefaceSpan(String family, Typeface type) { super(family); newType = type; } @Override public void updateDrawState(TextPaint ds) { applyCustomTypeFace(ds, newType); } @Override public void updateMeasureState(TextPaint paint) { applyCustomTypeFace(paint, newType); } private static void applyCustomTypeFace(Paint paint, Typeface tf) { int oldStyle; Typeface old = paint.getTypeface(); if (old == null) { oldStyle = 0; } else { oldStyle = old.getStyle(); } int fake = oldStyle & ~tf.getStyle(); if ((fake & Typeface.BOLD) != 0) { paint.setFakeBoldText(true); } if ((fake & Typeface.ITALIC) != 0) { paint.setTextSkewX(-0.25f); } paint.setTypeface(tf); } }
然后为您的活动创build以下方法
private void applyFontToMenuItem(MenuItem mi) { Typeface font = Typeface.createFromAsset(getAssets(), "ds_digi_b.TTF"); SpannableString mNewTitle = new SpannableString(mi.getTitle()); mNewTitle.setSpan(new CustomTypefaceSpan("" , font), 0 , mNewTitle.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE); mi.setTitle(mNewTitle); }
并从活动中调用它。
navView = (NavigationView) findViewById(R.id.navView); Menu m = navView.getMenu(); for (int i=0;i<m.size();i++) { MenuItem mi = m.getItem(i); //for aapplying a font to subMenu ... SubMenu subMenu = mi.getSubMenu(); if (subMenu!=null && subMenu.size() >0 ) { for (int j=0; j <subMenu.size();j++) { MenuItem subMenuItem = subMenu.getItem(j); applyFontToMenuItem(subMenuItem); } } //the method we have create in activity applyFontToMenuItem(mi); }
这是我的输出
这个为我工作
<android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="#4A4444" android:clipToPadding="false" android:paddingBottom="50dp" app:itemIconTint="@color/white" app:menu="@menu/drawer_home" app1:itemTextAppearance="@style/NavigationDrawerStyle" > </android.support.design.widget.NavigationView>
水库>值 – >风格
<style name="NavigationDrawerStyle"> <item name="android:textSize">18sp</item> <item name="android:typeface">monospace</item> </style>
//设置自定义字体MainApplication.java
public class MainApplication extends Application { @Override public void onCreate() { super.onCreate(); //set Custom Typeface FontsOverride.setDefaultFont(this, "MONOSPACE", "OpenSans-Semibold.ttf"); } }
// FontsOverride.java
public final class FontsOverride { public static void setDefaultFont(Context context, String staticTypefaceFieldName, String fontAssetName) { final Typeface regular = Typeface.createFromAsset(context.getAssets(), fontAssetName); replaceFont(staticTypefaceFieldName, regular); } protected static void replaceFont(String staticTypefaceFieldName, final Typeface newTypeface) { try { final Field staticField = Typeface.class .getDeclaredField(staticTypefaceFieldName); staticField.setAccessible(true); staticField.set(null, newTypeface); } catch (NoSuchFieldException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } } }
有没有办法做到这一点?
是。 NavigationView
没有提供处理这个的直接方法,但是使用View.findViewsWithText
可以很容易地实现。
有两件事可以帮助我们解决这个问题。
- 每个
MenuItem
视图都是一个TextView
。 所以,这使得应用你的Typeface
变得更容易。 有关NavigationView
实际使用的TextView
更多信息,请参阅NavigationMenuItemView
。 -
NavigationView
在selectMenuItem
时提供callback 。 我们将不得不为每个MenuItem
提供一个唯一的ID,这个callback将有助于尽可能地生成这些ID,这意味着稍后会less一些代码。 虽然这与你是否有SubMenu
。
履行
注意每个MenuItem
id只是menuItem+Position
。 当我们find每个MenuItem
的View
时,这个方法会派上用场。
<group android:checkableBehavior="single"> <item android:id="@+id/menuItem1" android:icon="@drawable/ic_dashboard" android:title="MenuItem 1" /> <item android:id="@+id/menuItem2" android:icon="@drawable/ic_event" android:title="MenuItem 2" /> <item android:id="@+id/menuItem3" android:icon="@drawable/ic_headset" android:title="MenuItem 3" /> <item android:id="@+id/menuItem4" android:icon="@drawable/ic_forum" android:title="MenuItem 4" /> </group> <item android:title="Sub items" > <menu> <item android:id="@+id/menuItem5" android:icon="@drawable/ic_dashboard" android:title="Sub item 5" /> <item android:id="@+id/menuItem6" android:icon="@drawable/ic_forum" android:title="Sub item 6" /> </menu> </item>
/** The total number of menu items in the {@link NavigationView} */ private static final int MENU_ITEMS = 6; /** Contains the {@link MenuItem} views in the {@link NavigationView} */ private final ArrayList<View> mMenuItems = new ArrayList<>(MENU_ITEMS); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ... final NavigationView navView = ... // Grab the NavigationView Menu final Menu navMenu = navView.getMenu(); // Install an OnGlobalLayoutListener and wait for the NavigationMenu to fully initialize navView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { // Remember to remove the installed OnGlobalLayoutListener navView.getViewTreeObserver().removeOnGlobalLayoutListener(this); // Loop through and find each MenuItem View for (int i = 0, length = MENU_ITEMS; i < length; i++) { final String id = "menuItem" + (i + 1); final MenuItem item = navMenu.findItem(getResources().getIdentifier(id, "id", getPackageName())); navView.findViewsWithText(mMenuItems, item.getTitle(), View.FIND_VIEWS_WITH_TEXT); } // Loop through each MenuItem View and apply your custom Typeface for (final View menuItem : mMenuItems) { ((TextView) menuItem).setTypeface(yourTypeface, Typeface.BOLD); } } }); }
你可以看到如何使用一个通用的MenuItem
id允许你使用Resources.getIdentifier
并保存几行代码。
SubMenu
警告
要记住的事情。 你需要显式地遍历你的N
菜单项,而不是使用Menu.size
。 否则,您的SubMenu
项目将不被识别。 换句话说,如果你没有SubMenu
,另一种方法是:
for (int i = 0, length = navMenu.size(); i < length; i++) { final MenuItem item = navMenu.getItem(i); navigationView.findViewsWithText(mMenuItems, item.getTitle(), View.FIND_VIEWS_WITH_TEXT); }
而且您不必担心为每个MenuItem
应用唯一的ID。
结果
我在示例中使用的字体是: 冰沙专柜
不是自定义字体,而是改变导航项目字体的另一种方法。 创build一个名为design_navigation_item.xml
的布局。
<android.support.design.internal.NavigationMenuItemView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="?attr/listPreferredItemHeightSmall" android:paddingLeft="?attr/listPreferredItemPaddingLeft" android:paddingRight="?attr/listPreferredItemPaddingRight" android:drawablePadding="@dimen/navigation_icon_padding" android:gravity="center_vertical|start" android:maxLines="1" android:fontFamily="sans-serif-thin" android:textSize="22sp" android:textAppearance="?attr/textAppearanceListItem" />
然后将fontFamily更改为所需的字体。
对于那些使用@Moinkhan答案的人来说,为了将字体应用到菜单的每个部分,使用该解决scheme,并为每个标题部分使用id。 你这样的菜单
<item android:title="@string/others" android:id="@+id/nav_others"> <menu> <item android:id="@+id/contact" android:title="@string/contact"/> </menu> </item>
和这样的解决scheme..
navMenu = navView.getMenu(); MenuItem item= navView.getMenu().findItem(R.id.nav_others); applyFontToMenuItem(item);
也许它有助于某人。
回答有点迟,但是我发现了一个更简洁的方法,所以我想分享一下。
-
制作自定义视图
NavFontTextView.java
:import android.content.Context; import android.support.design.internal.NavigationMenuItemView; import android.util.AttributeSet; import utils.CustomFontHelper; public class NavFontTextView extends NavigationMenuItemView { Context mContext; public NavFontTextView(Context context) { super(context); mContext = context; setDefaultFont(); } public NavFontTextView(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; setDefaultFont(); CustomFontHelper.setCustomFont(this, context, attrs); } public NavFontTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext = context; setDefaultFont(); CustomFontHelper.setCustomFont(this, context, attrs); } public void setDefaultFont() { CustomFontHelper.setCustomFont(this, "fonts/SourceSansPro-Regular.ttf", mContext); } }
-
创build一个名为
CustomFontHelper.java
的文件:import android.content.Context; import android.content.res.TypedArray; import android.graphics.Typeface; import android.util.AttributeSet; import android.widget.TextView; /** * Taken from: http://stackoverflow.com/a/16648457/75579 */ public class CustomFontHelper { /** * Sets a font on a textview based on the custom com.my.package:font attribute * If the custom font attribute isn't found in the attributes nothing happens * @param textview * @param context * @param attrs */ public static void setCustomFont(TextView textview, Context context, AttributeSet attrs) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomFont); String font = a.getString(R.styleable.CustomFont_font); setCustomFont(textview, font, context); a.recycle(); } /** * Sets a font on a textview * @param textview * @param font * @param context */ public static void setCustomFont(TextView textview, String font, Context context) { if(font == null) { return; } Typeface tf = FontCache.get(font, context); if(tf != null) { textview.setTypeface(tf); } } }
-
制作
layout/design_navigation_item.xml
(名称必须完全相同):<?xml version="1.0" encoding="utf-8"?> <custom_view.NavFontTextView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="?attr/listPreferredItemHeightSmall" android:drawablePadding="10dp" android:gravity="center_vertical|start" android:maxLines="1" android:paddingLeft="?attr/listPreferredItemPaddingLeft" android:paddingRight="?attr/listPreferredItemPaddingRight" app:font="fonts/SourceSansPro-Bold.ttf" />
-
将您的字体文件
SourceSansPro-Bold.ttf
放在这个path中:app/src/main/assets/fonts/SourceSansPro-Bold.ttf
你很好走! 这样,你可以保持你的主要活动更清洁。
这里有一个截图:
我真的很喜欢“吐火龙”的解决scheme,但是我没有得到textview
。 这可以通过执行以下操作来完成:
TextView textView = (CheckedTextView) findViewById(android.support.design.R.id.design_menu_item_text); public class StyledMenuItem extends NavigationMenuItemView { public StyledMenuItem(Context context) { super(context); } public StyledMenuItem(Context context, AttributeSet attrs) { super(context, attrs); if (!isInEditMode()) { setCustomFont(context, attrs); setFilterTouchesWhenObscured(true); } } public StyledMenuItem(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); if (!isInEditMode()) { setCustomFont(context, attrs); setFilterTouchesWhenObscured(true); } } private void setCustomFont(Context ctx, AttributeSet attrs) { TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.ProjectView); String customFont = a.getString(R.styleable.ProjectView_projectFont); setCustomFont(ctx, customFont); a.recycle(); } private void setCustomFont(Context ctx, String asset) { Typeface typeFace = TypeFaceProvider.getTypeFace(ctx, asset); TextView textView = (CheckedTextView) findViewById(android.support.design.R.id.design_menu_item_text); if (typeFace != null && textView != null) { textView.setTypeface(typeFace); } }
design_navigation_item.xml:
<?xml version="1.0" encoding="utf-8"?>
style.xml:
<style name="Body1" parent="Base.TextAppearance.AppCompat.Body1"> <item name="projectFont">Quicksand-Regular.otf</item> </style>
attrs.xml:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ProjectView"> <attr name="projectFont" format="string" /> </declare-styleable> </resources>
applyFontToMenuItem(popup.getMenu().getItem(0)); private void applyFontToMenuItem(MenuItem mi) { Typeface font = Typeface.createFromAsset(getAssets(), "fonts/Redressed.ttf"); SpannableString mNewTitle = new SpannableString(mi.getTitle()); mNewTitle.setSpan(new CustomTypefaceSpan("", font), 0, mNewTitle.length(),pannable.SPAN_INCLUSIVE_INCLUSIVE); mi.setTitle(mNewTitle); }
我已经重构了@ adneal的答案。 它根据索引而不是id来设置字体,从而在菜单项上循环(不进入子项,只有顶级项)。
将您的NavigationView和{TYPEFACE}replace为您想要的TypeFace的rightNavigationView
final Menu navMenu = rightNavigationView.getMenu(); rightNavigationView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { ArrayList<View> menuItems = new ArrayList<>(); // save Views in this array rightNavigationView.getViewTreeObserver().removeOnGlobalLayoutListener(this); // remove the global layout listener for (int i = 0; i < navMenu.size(); i++) {// loops over menu items to get the text view from each menu item final MenuItem item = navMenu.getItem(i); rightNavigationView.findViewsWithText(menuItems, item.getTitle(), View.FIND_VIEWS_WITH_TEXT); } for (final View menuItem : menuItems) {// loops over the saved views and sets the font ((TextView) menuItem).setTypeface({TYPE}, Typeface.BOLD); } } });
使用app:itemTextAppearance =“”属性。 希望这可以帮助。
<android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" android:background="@drawable/nav_bg_gradient" android:theme="@style/NavigationView" app:itemIconTint="@color/colorWhite" app:itemTextColor="@color/colorWhite" app:itemTextAppearance="@style/NavigationText" app:menu="@menu/main_drawer">
在styles.xml中写入
<style name="NavigationText" parent="@android:style/TextAppearance.Medium"> <item name="android:textColor">@color/colorWhite</item> <item name="android:textSize">12sp</item> <item name="android:fontFamily">sans-serif-thin</item> </style>
这是另一种方法:
NavigationView有一个名为NavigationMenuItemView的子项 。 NavigationMenuItemView有两个孩子。 一个是AppCompatCheckedTextView 。
重写NavigationView的onLayout方法(如下图所示)并更改AppCompatCheckedTextView的Typefase :
public final class NavigationViewWithCustomFont extends NavigationView{ private final Context context; private Typeface fontFace; public NavigationViewWithCustomFont(Context context, AttributeSet attrs){ super(context, attrs); this.context = context; this.fontFace = null; } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom){ super.onLayout(changed, left, top, right, bottom); final ViewGroup navMenuView = (ViewGroup)getChildAt(0); final int navMenuItemsCount = navMenuView.getChildCount(); ViewGroup itemView; if(fontFace == null){ fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.BTrafficBold)); } for(int i=0; i<navMenuItemsCount; i++){ itemView = (ViewGroup)navMenuView.getChildAt(i); if(itemView instanceof NavigationMenuItemView ){ CheckedTextView checkedTextView = (CheckedTextView)itemView.getChildAt(0); checkedTextView.setTypeface(fontFace, Typeface.BOLD); } } } }