如何更改NavigationView的项目文本大小?

时间:2015-07-03 10:17:43

标签: android navigation-drawer material-design androiddesignsupport

Google recently released android.support.design.widget.NavigationView小部件作为com.android.support:design:22.2.0库的一部分,极大地简化了(并标准化)创建NavigationDrawer的过程。

但根据design specs,列表项应为 Roboto Medium,14sp,87%#000000 NavigationView不会公开textSizetextStyle来自定义此内容。

Material design specs Font style info

如果我擅长使用Google提供的NavigationView (或以其他任何方式自定义)来维护正确的设计规范,我有什么选择?

11 个答案:

答案 0 :(得分:99)

创建风格

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

所有参数(您可以更改)都位于此处 更改导航项目。

您也可以覆盖*.xml文件(从...\sdk\extras\android\support\design\res\layout\design_navigation_item.xml复制文件),只需在app/src/main/res/layout文件夹中创建名为的布局:

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

所有可以覆盖的布局都位于...\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都有不同的要覆盖的项目。

中检查您需要的所有内容

enter image description here

答案 1 :(得分:52)

您可以在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_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

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

答案 2 :(得分:51)

自Android支持库22.2.1起,Google已将NavigationView中项目的默认textSize从16sp更改为14sp,这非常适合Material Design指南。但是,在某些情况下(例如,当您想支持中文时),似乎较大的textSize更好。解决方案很简单:

  1. app:theme="@style/yourStyle.Drawer"添加到layout.xml中的NavigationView
  2. 在styles.xml中
  3. ,在样式android:textSize="16sp"
  4. 中添加yourStyle.Drawer

答案 3 :(得分:14)

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

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

或小文

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

或大文

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

答案 4 :(得分:6)

浏览source code我找到了这个布局文件

  

/平台/框架/支撑/.../设计/ RES /布局/ design_drawer_item.xml

具有以下属性

textAppearanceListItem

这意味着我们所要做的就是覆盖项目中的<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> 样式。

RES /值/ styles.xml

git config --global core.editor " 'C:/Program Files/Sublime Text 3/subl' -n -w"

我不完全确定这会产生什么影响,但如果有人有更好的答案,我会乐意接受这一点!

答案 5 :(得分:6)

这对我有用:

activity_main.xml中

<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: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>

答案 6 :(得分:3)

也许它可能会有所帮助。最近我必须以编程方式执行此操作。 我用过这堂课:

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

希望这有帮助。

答案 7 :(得分:0)

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

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:padding="10dp"
    android:orientation="horizontal"
    android:background="@drawable/pressed_state">

    <TextView
        android:id="@+id/textView_list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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_width="10dp"
        android:layout_height="10dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:visibility="visible"
        android:layout_marginRight="50dp"
        android:background="@drawable/circle_orange"/>

</RelativeLayout>

<LinearLayout 
    android:layout_height="1dp"
    android:layout_width="match_parent"
    android:background="#EC1294"></LinearLayout>

</LinearLayout>

RelativeLayout中的这个参数设置背景颜色 - &gt;机器人:背景= “@绘制/ pressed_state”

在drawable文件夹中创建“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"/>

对不起我的英语。

答案 8 :(得分:0)

  1. 打开或创建values \ dimens.xml
  2. 添加此代码:

    11sp 12sp

应该可以

P.S删除<尺寸前的空间

答案 9 :(得分:0)

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

答案 10 :(得分:0)

对于 com.google.android.material.navigation.NavigationView,您应该使用带有自定义样式的 app 命名空间: app:itemTextAppearance="@style/NavDrawerTextStyle"