去掉Toolbar左侧的空间占用,使内部容器能占满Toolbar

发布于 2018-11-24  75 次阅读


在Toolbar的使用过程中,经常会需要自定义Toolbar内部的布局.
这时会发现Toolbar左侧始终都有一块空间无法放置内容.

比如布局如下:

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:background="@color/colorPrimary">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">

    </RelativeLayout>


</android.support.v7.widget.Toolbar>

显示效果如图:
紫色方框的位置是Toolbar,背景色为绿色.
粉红色部分为RelativeLayout.
可以看到宽度设置为match_parent的RelativeLayout依旧没有占满整个Toolbar.

这个是和Model配置的风格有关的,如下:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

使用的是Theme.AppCompat的风格,Ctrl+鼠标左键点进去.
Ctrl+F搜索ToolBar,找到两条内容:

<style name="Widget.AppCompat.Toolbar" parent="Base.Widget.AppCompat.Toolbar"/>
<style name="Widget.AppCompat.Toolbar.Button.Navigation" parent="Base.Widget.AppCompat.Toolbar.Button.Navigation"/>

第一条就是我们关心的,没有内容,只有个继承关系.
继续Ctrl+鼠标左键点进去这个Base.Widget.AppCompat.Toolbar

<style name="Base.Widget.AppCompat.Toolbar" parent="Base.V7.Widget.AppCompat.Toolbar"/>

还是个继承关系,继续追踪下去:

<style name="Base.V7.Widget.AppCompat.Toolbar" parent="android:Widget">
    <item name="titleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Title</item>
    <item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item>
    <item name="android:minHeight">?attr/actionBarSize</item>
    <item name="titleMargin">4dp</item>
    <item name="maxButtonHeight">@dimen/abc_action_bar_default_height_material</item>
    <item name="buttonGravity">top</item>
    <item name="collapseIcon">?attr/homeAsUpIndicator</item>
    <item name="collapseContentDescription">@string/abc_toolbar_collapse_description</item>
    <item name="contentInsetStart">16dp</item>
    <item name="contentInsetStartWithNavigation">@dimen/abc_action_bar_content_inset_with_nav</item>
    <item name="android:paddingLeft">@dimen/abc_action_bar_default_padding_start_material</item>
    <item name="android:paddingRight">@dimen/abc_action_bar_default_padding_end_material</item>
</style>

到这里就已经能看到Toolbar默认继承了什么风格了.
直接看 contentInsetStart,可以看到看到默认就有个 16dp.
这样问题就简单了,只要把这个16dp的默认左边内边距去掉就行了.
回到 style.xml 中,新增一个风格:

<style name="ClubToolbar" parent="Widget.AppCompat.Toolbar">
    <!-- 设置该属性解决空白部分-->
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetEnd">0dp</item>
</style>

这个风格继承了 Widget.AppCompat.Toolbar,然后重新设置了 contentInsetStart 为 0dp.
接着,只要在AppTheme中将Toolbar的风格设置为我们新增的风格就可以了:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <!-- 设置toolbar的主题 -->
    <item name="toolbarStyle">@style/ClubToolbar</item>
</style>

回到布局界面,就发现左侧的内边距已经去掉了.


做一只特立独行的猪