Android工具栏:横屏模式下的小标题文本

61

我正在测试在Android上使用新的工具栏和AppCompat主题时遇到了一个问题。我的工具栏标题文本在竖屏模式下看起来大小适中,但在横屏模式下变得相当小,尽管我在代码中没有做任何改变标题文本大小的操作。以下是屏幕截图:

竖屏 横屏

activity_main.xml:

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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:context="com.techfunmyanmar.jujaka.ui.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- As the main content view, the view below consumes the entire
             space available using match_parent in both dimensions. -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- android:layout_gravity="start" tells DrawerLayout to treat
             this as a sliding drawer on the left side for left-to-right
             languages and on the right side for right-to-left languages.
             If you're not building against API 17 or higher, use
             android:layout_gravity="left" instead. -->
        <!-- The drawer is given a fixed width in dp and extends the full height of
             the container. -->
        <fragment
            android:id="@+id/navigation_drawer"
            android:name="com.techfunmyanmar.jujaka.ui.NavigationDrawerFragment"
            android:layout_width="@dimen/navigation_drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            tools:layout="@layout/fragment_navigation_drawer" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

样式.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>

    </style>

    <!-- Main application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">

    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
    </style>
</resources>

你是否应该考虑减小工具栏的高度,而不是增大文本大小?这就是谷歌在他们的GMail应用中所做的。我在https://dev59.com/Fl0Z5IYBdhLWcg3w8kBJ 发表了一个类似的问题。 - Cheok Yan Cheng
5个回答

109

我尝试设置工具栏的android:titleTextAppearance,但样式没有应用。然后我意识到我正在使用AppCompat主题,所以我使用了app:titleTextAppearance,现在样式已应用。看起来横向排列中的小写字母是内置的AppCompat.Toolbar.Title样式本身的问题,因此我覆盖它并手动设置字体大小。 最终代码:

工具栏XML:

<android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextAppearance="@style/ToolbarTitle"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

工具栏样式:

<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">20sp</item>
</style>

4
非常好的解决方案!textSize 应该设为 20sp,作为纵向模式文本的字体大小。 - Phuong
1
我该如何将其应用于标准支持操作栏?(没有工具栏) - ThanosFisherman
@ChillyChan,这是你需要的内容。我的XML文件没有什么特别的地方。我根本不使用工具栏小部件,只使用支持操作栏。<style name="Theme.myTheme" parent="Base.myTheme"/> <style name="Base.myTheme" parent="Theme.AppCompat"> <item name="colorPrimary">@color/primary_color</item> <item name="colorPrimaryDark">@color/primary_dark_color</item> <item name="colorAccent">@color/accent_color</item> <item name="android:windowBackground">@color/gray</item> </style> - ThanosFisherman
有没有关于如何将它设置到操作栏(而不使用工具栏)的更新? - Kirill Rakhman
1
原因是在横屏模式下将大小设置为14dp: android-sdk/platforms/android-23/data/res/values-land/dimens_material.xml <dimen name="text_size_title_material_toolbar">14dp</dimen> - levavare
显示剩余4条评论

11
AOSP问题# 170707涉及标题和副标题文本大小的更改。项目成员回应是“预期工作。与框架行为相同。”虽然我认为更改文本大小并不是理想的默认行为,但听起来AppCompat工程师必须保持与(有缺陷的)框架行为的一致性。开发人员随后需要按照Chilly Chan的答案描述覆盖默认样式。
对Chilly Chan答案的补充:
1)类似地,可以通过定义另一个派生自TextAppearance.Widget.AppCompat.Toolbar.Subtitle的样式来控制副标题文本大小。
2)纵向方向上的标题/副标题大小的默认值为20dp / 16dp(在我的Galaxy S3,4.4.2上)。 Chilly Chan的示例指定“17sp”。仅当您希望让用户偏好设置影响标题/副标题大小时,才使用“sp”。

2
不要在文本大小上使用dp。 - Joaquin Iurchuk
1
@qbix 感谢指出 dp。dp 是实现带副标题的工具栏,模仿 Google 默认值的正确方法。在工具栏中使用 sp 会导致当用户打开大文本辅助功能设置时,副标题文本的底部一半被裁剪掉。另一种选择是允许工具栏拉伸到某些意外的高度以适应文本,即使这样,副标题文本填充也变得不正确(与工具栏底部对齐,底部填充为 0),或者至少很难管理。 - TalkLittle

9

我正在寻找一种不需要自定义工具栏,但可以使用自定义样式的解决方案。这段代码对我很有帮助:

styles.xml

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
    <item name="titleTextStyle">@style/MyTitleTextStyle</item>
</style>

<style name="MyTitleTextStyle" parent="@style/TextAppearance.AppCompat.Title">
    <item name="android:textSize">20sp</item> <!-- Default for portrait is 20sp and for landscape 14sp-->
</style>

AndroidManifest.xml

    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/MyTheme"/>

MainActivity继承自AppCompatActivity;在API 19、22和23上进行了测试。


1
这是最好的答案! - Ωmega

2
尝试将以下内容添加到activity_main.xml文件的工具栏部分:
android:minHeight="?android:attr/actionBarSize"
我还注意到您正在使用标准的深色操作栏,建议使用没有操作栏的主题,并定义一个新的工具栏。
 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

<android.support.v7.widget.Toolbar
    android:id=”@+id/my_awesome_toolbar”
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”?attr/actionBarSize”
    android:background=”?attr/colorPrimary” />

谢谢,但它仍然很小。 - Nyein Chan Wynn
在模拟器或手机上运行时,是否使用非暗色操作栏主题? - TSG anti SO dark forces
再次感谢。我尝试了您发布的工具栏xml中的“Theme.AppCompat.Light.NoActionBar”,但标题仍然很小。唯一的区别是溢出图标和标题变成了黑色。在手机上运行。在ICS、KK和L上进行了测试。在所有三个手机的横屏模式下,文本都很小。 - Nyein Chan Wynn
1
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textSize">17sp</item> </style> - TSG anti SO dark forces
2
谢谢帮助。我已经解决了问题并在问题中添加了自己的答案。我之前使用的是 android:titleTextAppearance 而不是 app:titleTextAppearance - Nyein Chan Wynn

-5

我认为这与旋转设备时进行的一些布局更改有关,因为看起来您可以通过添加类似于以下内容的内容来防止调整大小

  android:configChanges="orientation|screenSize"

在当前所处的Activity的AndroidManifest.xml文件中进行配置。如常,android:configChanges具有更多的影响,因此只有在确实需要时才应使用它 :)


大家好。我不知道为什么这个评论被投票否决了。我尝试了configChanges,在xml中没有进行任何其他更改就可以工作了。谢谢你,@FrancescoMapelli。 - Henry Tao
谢谢。我想知道为什么被踩的原因...也许我错过了一些严重的问题,这就是为什么不行的原因。我知道我的解决方案更像是一个变通方法而不是一个干净的解决方案,但至少它能够工作并提示出问题的原因。 - Francesco Mapelli
这个答案是不正确的,因为在视图膨胀时(通常是应用程序启动时),文本大小将取决于设备的方向。因此,如果您在纵向模式下启动应用程序,则您的工具栏将具有较大的文本大小,并会通过旋转保持不变。但是,如果您在横向模式下启动应用程序,则您的工具栏将具有较小的文本大小,并且也会通过旋转保持不变。 - TalkLittle
这就是为什么我加了“一如既往,android:configChanges有更多的含义”警告的原因... - Francesco Mapelli

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接