返回按钮改变Toolbar布局问题咨询及自定义Toolbar代码展示

我懂你碰到的这个问题——当启用返回按钮后，Toolbar的布局就乱了，明明已经设置了内边距相关属性，但还是没解决对吧？先看看你给出的自定义Toolbar代码，我帮你梳理下问题和解决方案：

首先把你提供的自定义Toolbar代码格式化出来，方便查看：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/white"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:layout_height="?attr/actionBarSize"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:contentInsetStartWithNavigation="0dp"
    app:contentInsetStart="0dp"
    app:layout_collapseMode="pin">

    <ImageView
        <!-- 你的ImageView属性内容 -->
    />
    <!-- 其他Toolbar子控件 -->
</android.support.v7.widget.Toolbar>

你已经设置了app:contentInsetStartWithNavigation="0dp"和app:contentInsetStart="0dp"，这一步是对的，目的就是消除Toolbar显示返回按钮时默认的左侧内边距，但布局还是出问题，大概率是内部子控件的布局逻辑没处理好，给你几个具体的解决方案：

1. 用容器统一管理Toolbar内部元素 #

直接在Toolbar里嵌套一个LinearLayout或RelativeLayout，把所有自定义控件放在这个容器里，这样能更好地控制元素排列，避免被返回按钮挤压：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/white"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:layout_height="?attr/actionBarSize"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:contentInsetStartWithNavigation="0dp"
    app:contentInsetStart="0dp"
    app:layout_collapseMode="pin">

    <!-- 用LinearLayout作为容器统一管理内部元素 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical">
        
        <!-- 自定义图标 -->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_custom_icon"/>
            
        <!-- 和返回按钮保持间距，避免重叠 -->
        <Space
            android:layout_width="16dp"
            android:layout_height="match_parent"/>
            
        <!-- 标题文本 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="页面标题"/>
    </LinearLayout>
</android.support.v7.widget.Toolbar>

2. 自定义主题调整返回按钮样式 #

如果默认返回按钮的位置或内边距还是影响布局，可以通过自定义主题来修改，甚至替换成自己的返回图标：

在styles.xml中添加以下样式：

<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="actionBarStyle">@style/CustomActionBarStyle</item>
</style>

<style name="CustomActionBarStyle" parent="Widget.AppCompat.ActionBar">
    <!-- 替换成自己的返回图标 -->
    <item name="homeAsUpIndicator">@drawable/your_back_icon</item>
    <!-- 消除返回按钮和内容的默认间距 -->
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetStartWithNavigation">0dp</item>
</style>

然后把Toolbar的app:theme替换成这个自定义主题即可。

3. 代码中动态调整布局参数 #

如果以上方法都不行，还可以在启用返回按钮后，动态调整子控件的布局参数，比如给自定义图标加个左侧边距：

// 启用返回按钮
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

// 获取自定义ImageView
ImageView customIcon = findViewById(R.id.your_image_view_id);
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) customIcon.getLayoutParams();
// 设置和返回按钮的间距，可根据需求调整数值
params.setMarginStart(getResources().getDimensionPixelSize(R.dimen.toolbar_icon_margin));
customIcon.setLayoutParams(params);

这样就能确保返回按钮显示后，你的自定义控件不会被覆盖或挤偏啦。

内容的提问来源于stack exchange，提问作者ora