如何更改导航视图项目的文本大小？

Posted

技术标签:

【中文标题】如何更改导航视图项目的文本大小？【英文标题】：How can I change the NavigationView's item text size? 【发布时间】：2015-09-21 03:34:00 【问题描述】：

Google recently releasedandroid.support.design.widget.NavigationView 小部件是 com.android.support:design:22.2.0 库的一部分，它极大地简化了（并标准化）了 NavigationDrawer 的创建过程。

但是根据design specs，列表项应该是Roboto Medium, 14sp, 87% #000000。 NavigationView 不公开 textSize 或 textStyle 来自定义它。

如果我对使用 Google 提供的NavigationView（或以任何其他方式进行自定义）维护正确的设计规范持怀疑态度，我有哪些选择？

【问题讨论】：

你知道我们如何/是否可以用 awsomeFont 图标替换这些图标吗？ 大声笑@完全不相关的问题！对不起，我知道除了downloading the PNGs 和使用它们。您可以通过google.com/design/icons 直接从 Google 下载符合材料设计的材料 请检查此评论link 【参考方案1】：

列出导航栏的适配器布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:orientation="vertical">

<RelativeLayout
    android:layout_
    android:layout_ 
    android:padding="10dp"
    android:orientation="horizontal"
    android:background="@drawable/pressed_state">

    <TextView
        android:id="@+id/textView_list_item"
        android:layout_
        android:layout_
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageView_icons"
        android:textStyle="bold"
        android:layout_marginLeft="10dp"
        android:textColor="@color/white"
        android:textSize="17sp" />


    <ImageView 
        android:id="@+id/list_adapter_image"
        android:layout_
        android:layout_
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:visibility="visible"
        android:layout_marginRight="50dp"
        android:background="@drawable/circle_orange"/>

</RelativeLayout>

<LinearLayout 
    android:layout_
    android:layout_
    android:background="#EC1294"></LinearLayout>

</LinearLayout>

RelativeLayout 中的这个参数设置背景颜色 --> android:background="@drawable/pressed_state"

在可绘制文件夹中制作这个“pressed_state.xml”。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

 <item android:drawable="@color/light_blue" android:state_pressed="true"/>

对不起，我的英语不好。

【讨论】：

嘿，非常感谢您的回答，但是我从实现自己的导航抽屉到使用 Google 的支持。我希望使用NavigationView 本身来实现这一点。 老兄，您必须根据自己的喜好进行布局，然后将其放入适配器中。 我认为我们正在以不同的方式实现导航抽屉。我不确定“列表适配器布局”是什么意思。使用设计支持库的NavigationView，没有列表适配器在起作用，但app:menu="@menu/drawer" 引用标准菜单。有关详细信息，请参阅goo.gl/D0kVBH 的第一个 sn-p。抱歉，如果我理解错了:)【参考方案2】：

翻遍source code找到了这个布局文件

/platform/frameworks/support/.../design/res/layout/design_drawer_item.xml

具有以下属性

<android.support.design.internal.NavigationMenuItemView
    ...
    android:textAppearance="?attr/textAppearanceListItem"

这意味着我们所要做的就是在我们的项目中覆盖textAppearanceListItem 样式。

res/values/styles.xml

<style name="AppTheme" ... >
    ...
    <item name="textAppearanceListItem">@style/list_item_appearance</item>
</style>

<style name="list_item_appearance">
    <item name="android:textSize">14sp</item>
    <item name="android:fontFamily">sans-serif-medium</item>
</style>

我不完全确定这还会影响什么，但如果有人有更好的答案，我很乐意接受！

【讨论】：

sans-serif-medium 选项不适用于我【参考方案3】：

自 Android 支持库 22.2.1 起，Google 已将 NavigationView 中项目的默认 textSize 从 16sp 更改为 14sp，这非常适合 Material Design 准则。但是，在某些情况下（例如，当您想支持中文时），似乎更大的 textSize 更好。解决方法很简单：

    在 layout.xml 中将 app:theme="@style/yourStyle.Drawer" 添加到 NavigationView 在styles.xml中，在styleyourStyle.Drawer中添加android:textSize="16sp"

【讨论】：

那么它看起来像一个错误！酷的东西！如果有人因为某种原因卡在 22.2.0，请参阅my answer。【参考方案4】：

这对我有用：

activity_main.xml

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_
    android:layout_
    android:layout_gravity="start"
    android:theme="@style/NavigationDrawerStyle"
    app:headerLayout="@layout/navdrawer_header"
    app:menu="@menu/navdrawer_menu" />

styles.xml

<style name="NavigationDrawerStyle">
    <item name="android:textSize">16sp</item>
</style>

【讨论】：

【参考方案5】：

在文件app/src/main/res/values/styles.xml创建新样式

<style name="NavigationDrawerStyle">

        <item name="android:textSize">20sp</item><!-- text size in menu-->

        <!-- item size in menu-->
        <item name="android:listPreferredItemHeightSmall">40dp</item>
        <item name="listPreferredItemHeightSmall">40dp</item>

        <!-- item padding left in menu-->
        <item name="android:listPreferredItemPaddingLeft">8dp</item>
        <item name="listPreferredItemPaddingLeft">8dp</item>

        <!-- item padding right in menu-->
        <item name="android:listPreferredItemPaddingRight">8dp</item>
        <item name="listPreferredItemPaddingRight">8dp</item>
    </style>

将其添加到您的main_layout.xml

  <android.support.design.widget.NavigationView
       ...
        app:theme="@style/NavigationDrawerStyle"
       ....>


    </android.support.design.widget.NavigationView>

导航项的所有参数（您可以更改）都位于此处（文件路径...\sdk\extras\android\support\design\res\layout\design_navigation_item.xml）

design_navigation_item.xml

<android.support.design.internal.NavigationMenuItemView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    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" />

您还可以覆盖*.xml 文件（从...\sdk\extras\android\support\design\res\layout\design_navigation_item.xml 复制文件），只需在您的app/src/main/res/layout 文件夹中创建一个名为design_navigation_item.xml 的布局。

所有可以被覆盖的布局都在这里...\sdk\extras\android\support\design\res\layout\

design_layout_snackbar.xml
design_layout_snackbar_include.xml
design_layout_tab_icon.xml
design_layout_tab_text.xml
design_navigation_item.xml
design_navigation_item_header.xml
design_navigation_item_separator.xml
design_navigation_item_subheader.xml
design_navigation_menu.xml

[更新]com.android.support:design-version lib 的每个版本都有不同的项目需要覆盖。 检查所有你需要的东西

[2020 年 4 月 14 日更新]

如果您使用的是com.google.android.material.navigation.NavigationView 然后打开类，你会看到：

public NavigationView(@NonNull Context context, @Nullable AttributeSet attrs) 
    this(context, attrs, R.attr.navigationViewStyle);

因此，您可以使用 attr navigationViewStyle 通过应用的主题为 NavigationView 设置自己的样式：

注意：AppTheme 的父主题应该是 Theme.MaterialComponents

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
   ...
<item name="navigationViewStyle">@style/AppNavigationViewStyle</item>
   ...
    </style>

<style name="AppNavigationViewStyle" parent="Widget.MaterialComponents.NavigationView">
        <item name="itemTextAppearance">@style/AppNavigationViewItemTextAppearance</item>
   </style>
<style name="AppNavigationViewItemTextAppearance" parent="@style/TextAppearance.MaterialComponents.Subtitle2">
         <item name="android:textSize">18sp</item>
   </style>

只需打开父主题即可查看所有&lt;item name attrs 以进行覆盖

【讨论】：

您是建议覆盖所有这些 xml 并自己制作还是只使用这些参数并将其放入样式中？还有什么方法可以为此指定我自己的字体吗？ 这是我需要的那种响应，为此值添加自定义样式有很大帮助。谢谢。【参考方案6】：

您可以在 style.xml 中自定义从文本颜色到大小和字体的所有内容

<style name="NavDrawerTextStyle" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@color/colorPrimaryDark</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

然后在你的NavigationView:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_
android:layout_
android:fitsSystemWindows="true"
tools:openDrawer="start">

<android.support.design.widget.NavigationView
    ...
    android:itemTextAppearance="@style/NavDrawerTextStyle"
     />

【讨论】：

如何为项目标题设置roboto-medium字体？ 我也有一个导航标题，更改 textSize 会更改菜单项的文本大小，但更改 textColor 会更改标题文本的颜色。 &lt;style name="NavigationDrawer" &gt; &lt;item name="android:textSize"&gt;20sp&lt;/item&gt; &lt;item name="android:textColor"&gt;@color/white&lt;/item&gt; &lt;/style&gt; 我想更改菜单项的文本颜色。有什么想法吗？ 这确实有效，但如果我们想应用自定义 ttf 那么该怎么做呢？ @ojonugwaochalifu 我们可以设置 layout_gravity 来定位项目 center_horizo​​ntal 吗？ 嘿，当我将 android:itemTextAppearance="@style/NavDrawerTextStyle"/> 更改为 app:itemTextAppearance="@style/NavDrawerTextStyle"/>【参考方案7】：

您可以在 xml 文件中使用此属性

app:itemTextAppearance="?android:attr/textAppearanceMedium"

或用于小文本

app:itemTextAppearance="?android:attr/textAppearance"

或用于大文本

app:itemTextAppearance="?android:attr/textAppearanceLarge"

【讨论】：

【参考方案8】：

也许会有所帮助。最近我不得不以编程方式执行此操作。 我用过这个类：

public class CustomTypefaceSpan extends TypefaceSpan 

private final Typeface newType;
private final float newSp;

public CustomTypefaceSpan(String family, Typeface type, float sp) 
    super(family);
    newType = type;
    newSp = sp;


@Override
public void updateDrawState(TextPaint ds) 
    applyCustomTypeFace(ds, newType, newSp);


@Override
public void updateMeasureState(TextPaint paint) 
    applyCustomTypeFace(paint, newType, newSp);


private static void applyCustomTypeFace(Paint paint, Typeface tf, float sp) 
    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.setTextSize(sp);
    paint.setTypeface(tf);


@SuppressWarnings("unused")
public static final Parcelable.Creator<CustomTypefaceSpan> CREATOR = new Parcelable.Creator<CustomTypefaceSpan>() 
    @Override
    public CustomTypefaceSpan createFromParcel(Parcel in) 
        return null;
    

    @Override
    public CustomTypefaceSpan[] newArray(int size) 
        return new CustomTypefaceSpan[size];
    
;

然后我是这样使用的：

// This is for color
SpannableString s = new SpannableString(item.getTitle().toString());
                    s.setSpan(new ForegroundColorSpan(Color.RED), 0, s.length(), 0);

// This is for typeface and size
Typeface typeFace = Functions.getTypeface(this, "Avenir");

if (typeFace != null) 
    int size = 19;
    float scaledSizeInPixels = size * getResources().getDisplayMetrics().scaledDensity;
    CustomTypefaceSpan spanTypeFace = new CustomTypefaceSpan(item.getTitle().toString(), typeFace, scaledSizeInPixels);
    s.setSpan(spanTypeFace, 0, s.length(), 0);

item.setTitle(s);

希望这会有所帮助。

【讨论】：

谢谢，虽然不是解决方案本身，而是实现 Parcelable.Creator 方法的示例。【参考方案9】：
    打开或创建 values\dimens.xml 添加此代码： 
<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

它应该可以工作

【讨论】：

【参考方案10】：

转到activity_main.xml并在设计中选择nav_view，您可以通过更新itemTextAppearance和itemTextColor来更改菜单项文本大小，如下所示

【讨论】：

【参考方案11】：

对于com.google.android.material.navigation.NavigationView，您应该将 app 命名空间与您的自定义样式一起使用： app:itemTextAppearance="@style/NavDrawerTextStyle"

【讨论】：

谢谢完美的回答。

以上是关于如何更改导航视图项目的文本大小？的主要内容，如果未能解决你的问题，请参考以下文章

如何在android中增加底部导航视图的高度及其图标和文本大小？

如何更改列表视图的文本大小

如何在文本视图中更改单个单词的文本大小和颜色[重复]

尝试更改邮件撰写导航栏文本颜色

更改导航栏项目字体大小

更改集合视图单元格中文本 NSString 的大小