如何更改导航视图项目的文本大小?
How can I change the NavigationView's item text size?
Google recently released android.support.design.widget.NavigationView
小部件作为 com.android.support:design:22.2.0
库的一部分,极大地简化(并标准化)了创建 NavigationDrawer 的过程。
但是根据 design specs,列表项应该是 Roboto Medium, 14sp, 87% #000000。 NavigationView
没有公开 textSize
或 textStyle
来自定义它。
如果我迂腐地维护正确的设计规范 使用 NavigationView
提供的 Google(或在任何其他软件中自定义它),我有什么选择方式)?
列出导航栏的适配器布局:
<?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 中的这个参数设置背景颜色 --> android:background="@drawable/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"/>
对不起我的英语。
搜索 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>
我不确定这还会影响什么,但如果有人有更好的答案,我会很乐意接受!
自 Android 支持库 22.2.1 起,Google 已将 NavigationView
中项目的默认文本大小从 16sp 更改为 14sp,这非常适合 Material 设计准则。但是,在某些情况下(例如,当您要支持中文时),似乎 textSize 越大越好。解决方法很简单:
- 将
app:theme="@style/yourStyle.Drawer"
添加到 layout.xml 中的 NavigationView
- 在styles.xml中,在样式
yourStyle.Drawer
中添加android:textSize="16sp"
这对我有用:
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>
在文件中创建新样式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_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" />
您也可以覆盖 *.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
然后打开class,你会看到:
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>
只需打开父主题即可查看覆盖的所有 <item name
属性
您可以在 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"
/>
您可以在 xml 文件中使用此属性
app:itemTextAppearance="?android:attr/textAppearanceMedium"
或小文本
app:itemTextAppearance="?android:attr/textAppearance"
或大文本
app:itemTextAppearance="?android:attr/textAppearanceLarge"
也许有帮助。最近我不得不以编程方式执行此操作。
我用这个 class:
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);
希望对您有所帮助。
- 打开或创建 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>
它应该有效
在设计中转到 activity_main.xml 和 select nav_view,您可以通过更新 itemTextAppearance 和 [=13= 来更改菜单项文本大小]itemTextColor 如下
对于 com.google.android.material.navigation.NavigationView
,您应该将 app 命名空间与您的自定义样式一起使用:
app:itemTextAppearance="@style/NavDrawerTextStyle"
Google recently released android.support.design.widget.NavigationView
小部件作为 com.android.support:design:22.2.0
库的一部分,极大地简化(并标准化)了创建 NavigationDrawer 的过程。
但是根据 design specs,列表项应该是 Roboto Medium, 14sp, 87% #000000。 NavigationView
没有公开 textSize
或 textStyle
来自定义它。
如果我迂腐地维护正确的设计规范 使用 NavigationView
提供的 Google(或在任何其他软件中自定义它),我有什么选择方式)?
列出导航栏的适配器布局:
<?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 中的这个参数设置背景颜色 --> android:background="@drawable/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"/>
对不起我的英语。
搜索 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>
我不确定这还会影响什么,但如果有人有更好的答案,我会很乐意接受!
自 Android 支持库 22.2.1 起,Google 已将 NavigationView
中项目的默认文本大小从 16sp 更改为 14sp,这非常适合 Material 设计准则。但是,在某些情况下(例如,当您要支持中文时),似乎 textSize 越大越好。解决方法很简单:
- 将
app:theme="@style/yourStyle.Drawer"
添加到 layout.xml 中的 - 在styles.xml中,在样式
yourStyle.Drawer
中添加
NavigationView
android:textSize="16sp"
这对我有用:
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>
在文件中创建新样式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_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" />
您也可以覆盖 *.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
然后打开class,你会看到:
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>
只需打开父主题即可查看覆盖的所有 <item name
属性
您可以在 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"
/>
您可以在 xml 文件中使用此属性
app:itemTextAppearance="?android:attr/textAppearanceMedium"
或小文本
app:itemTextAppearance="?android:attr/textAppearance"
或大文本
app:itemTextAppearance="?android:attr/textAppearanceLarge"
也许有帮助。最近我不得不以编程方式执行此操作。 我用这个 class:
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);
希望对您有所帮助。
- 打开或创建 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>
它应该有效
在设计中转到 activity_main.xml 和 select nav_view,您可以通过更新 itemTextAppearance 和 [=13= 来更改菜单项文本大小]itemTextColor 如下
对于 com.google.android.material.navigation.NavigationView
,您应该将 app 命名空间与您的自定义样式一起使用:
app:itemTextAppearance="@style/NavDrawerTextStyle"