如何在 androidx 抽屉布局小部件中更改字体大小和颜色

Posted

技术标签:

【中文标题】如何在 androidx 抽屉布局小部件中更改字体大小和颜色【英文标题】:How to change font size and colour in androidx drawer layout widget 【发布时间】:2021-11-28 04:11:20 【问题描述】:

见下图我想更改放置在菜单中的标记页脚区域文本的字体大小和颜色。我不想使用android.support.design.widget.NavigationView,我知道我可以通过使用它来更改它。请帮帮我。

如果有其他方法可以添加页脚区域,就像我们设置页眉区域属性(app:headerLayout="@layout/nav_header_main")一样?

这是我的主要 XML 代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">

    <include
        layout="@layout/app_bar_main"
        android:layout_
        android:layout_ />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:theme="@style/menuTextStyle"
        android:background="@color/colorBlack"
        app:itemTextColor="@color/colorWhite"
        app:itemIconTint="@color/colorWhite"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>

这里是activity_main_drawer.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:title="Home" />
        <item
            android:id="@+id/nav_my_pets"
            android:title="My Pets" />
        <item
            android:id="@+id/nav_my_stores"
            android:title="My Stores" />
        <item
            android:id="@+id/nav_my_products"
            android:title="My Products" />
        <item
            android:id="@+id/nav_promotions"
            android:title="Promotions" />
        <item
            android:id="@+id/nav_faqs"
            android:title="FAQs" />

        <item
            android:id="@+id/nav_account"
            android:title="My Account" />
        <item
            android:id="@+id/nav_notifications"
            android:title="Notifications" />
        <item
            android:id="@+id/nav_about"
            android:title="About" />
        <item
            android:id="@+id/nav_settings"
            android:title="Settings"
            android:visible="false" />
        <item
            android:id="@+id/nav_forum"
            android:title="Forum" />
        <item
            android:id="@+id/nav_terms"
            android:title="Privacy/Terms" />
        <item
            android:id="@+id/nav_logout"
            android:title="Logout" />
    </group>
    <group android:checkableBehavior="none">
            <item
                android:id="@+id/subtitle2"
                android:title="by:">
                <menu>
                    <item
                        android:id="@+id/nav_footer1"
                        android:checkableBehavior="none"
                        android:title="by:" />
                    <item
                        android:id="@+id/nav_footer2"
                        android:checkableBehavior="none"
                        android:title="afterdarkgrafx.com" />
                </menu>
            </item>
    </group>
</menu>

【问题讨论】:

【参考方案1】:

您可以使用:

RelativeSizeSpan 用于设置默认菜单项文本大小的百分比。
// Java
private void setMenuTextSize(MenuItem item, float proportion) 
    SpannableString spanString = new SpannableString(item.getTitle().toString());
    spanString.setSpan(new RelativeSizeSpan(proportion), 
                          0, spanString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    item.setTitle(spanString);


// Kotlin
private fun setMenuTextSize(item: MenuItem, proportion: Float) 
    val spanString = SpannableString(item.title.toString())
    spanString.setSpan(
        RelativeSizeSpan(proportion),
        0, spanString.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
    item.title = spanString

AbsoluteSizeSpan 用于将文本大小设置为物理像素。
// Java
private void setMenuTextSize(MenuItem item, int textSize) 
    SpannableString spanString = new SpannableString(item.getTitle().toString());
    spanString.setSpan(new AbsoluteSizeSpan(textSize), 0, spanString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    item.setTitle(spanString);


// Kotlin
private fun setMenuTextSize(item: MenuItem, textSize: Int) 
    val spanString = SpannableString(item.title.toString())
    spanString.setSpan(
        AbsoluteSizeSpan(textSize),
        0,
        spanString.length,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
    )
    item.title = spanString

从 sp 转换为像素:

// Java
public static int spToPx(int sp) 
    return (int) (sp * Resources.getSystem().getDisplayMetrics().scaledDensity);


// Kotlin 
fun spToPx(sp: Int) = (sp * Resources.getSystem().displayMetrics.scaledDensity).toInt()

在您的菜单上应用它:

// Java
private void reduceItemSize(NavigationView navView) 
    Menu menu = navView.getMenu();
    MenuItem item = menu.findItem(R.id.subtitle2);
    SubMenu subMenu = item.getSubMenu();
    MenuItem footer1Item = subMenu.findItem(R.id.nav_footer1);
    MenuItem footer2Item = subMenu.findItem(R.id.nav_footer2);

    // Using RelativeSizeSpan
    setMenuTextSize(footer1Item, 0.8f);
    setMenuTextSize(footer2Item, 0.8f);

    // Using AbsoluteSizeSpan
    setMenuTextSize(footer1Item, spToPx(12));
    setMenuTextSize(footer2Item, spToPx(12));


// Kotlin
private fun reduceItemSize(navView: NavigationView) 
    val menu = navView.menu
    val item = menu.findItem(R.id.subtitle2)
    val subMenu = item.subMenu
    val footer1Item = subMenu.findItem(R.id.nav_footer1)
    val footer2Item = subMenu.findItem(R.id.nav_footer2)

    // Using RelativeSizeSpan
    setMenuTextSize(footer1Item, 0.8f)
    setMenuTextSize(footer2Item, 0.8f)

    // Using AbsoluteSizeSpan
    setMenuTextSize(footer1Item, spToPx(12))
    setMenuTextSize(footer2Item, spToPx(12))

【讨论】:

@Gitesh Cool.. 另外请注意有ForegroundColorSpan,您可以尝试更改菜单项的颜色 将使用 ForegroundColorSpan 更改颜色,谢谢! 效果很好,谢谢!

以上是关于如何在 androidx 抽屉布局小部件中更改字体大小和颜色的主要内容,如果未能解决你的问题,请参考以下文章

自定义字体和 XML 布局 (Android)

如何在不知道小部件的字体系列/大小的情况下更改小部件的字体样式?

如何在字体更改时停止 Tkinter Text 小部件调整大小?

在 Flutter 中更改 Drawer 小部件的顶部颜色

如何使用 setStyleSheet 更改 QLabel 小部件的字体大小(百分比)? [复制]

Flutter - 如何测试小部件中的抽屉测试?