Android 之路 (8) - Toolbar - NavigationIcon间隙、Title居中、BackText

最新推荐文章于 2025-02-05 14:51:25 发布

原创

最新推荐文章于 2025-02-05 14:51:25 发布 · 2.6k 阅读

博客针对原生Toolbar的样式问题进行适配。原生Toolbar的title居右，返回按钮间隙为16dp，与设计图不符。通过修改BaseToolbarStyle、新增ToolbarNavigationButtonStyle等操作调整NavigationIcon间隙；清除默认Title并新增Title和BackText实现title居中。但在xml中修改style适配新建Activity时较繁琐，后续将解决该问题。

引言

原生的Toolbar的title是居右显示的，而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp，而设计图上面是按照iOS来设计，所以返回按钮是8dp，本篇就此进行适配。

正文

NavigationIcon间隙

先看看原来的样式，我这里为了演示，特地换了一个返回箭头。

返回原始样式

修改BaseToolbarStyle

然后我们在原本定义号的BaseToolbarStyle中在增加一些样式配置：

<!--标题栏的样式-->
    <style name="BaseToolbarStyle" parent="Widget.AppCompat.Toolbar">
        <!--内容距离开始 边距-->
        <item name="contentInsetStart">8dp</item>
        <!--内容距离 导航按钮 边距-->
        <item name="contentInsetStartWithNavigation">8dp</item>
        <!--使自定义view可以贴左右的边，多数版本的系统不要下面两句也可以，但少量版本必须加下面的两句-->
        <item name="android:paddingLeft">8dp</item>
        <!--右内边距-->
        <item name="android:paddingRight">0dp</item>
        <!--最小高度-->
        <item name="android:minHeight">?actionBarSize</item> 
        <!--高度-->
        <item name="android:layout_height">?actionBarSize</item>
        <!--id-->
        <item name="android:id">@id/base_toolbar</item>
        <!--宽度-->
        <item name="android:layout_width">match_parent</item>
        <item name="actionMenuTextColor">#000</item>
    </style>

新增ToolbarNavigationButtonStyle

再新增一个ToolbarNavigationButtonStyle作为返回按钮的样式：

 <!--标题栏返回按钮样式-->
<style name="ToolbarNavigationButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
	<item name="android:minWidth">16dp</item>
</style>