如何让自定义工具栏与操作栏对齐?

How to get a custom toolbar aligned with the action bar?

为了让 action-buttons 进入我的工具栏,我实现了一个 custom-toolbar,其中可以定义带有按钮图像的布局。在 activity_main 布局文件中,我通过包含指令引用此 custom-toolbar 布局。

现在在操作栏顶部的 1 行中显示了两个内容:我的程序标题和溢出菜单图标加上来自 custom-toolbar 的按钮。问题是在此行下方出现了第二个空行,其中没有任何内容。意思是,操作栏的高度加倍,这个不需要的区域与我的 canvas 重叠。现象截图如下:

我搜索了解决此问题的文档,但没有找到映射案例。此外,我在我的布局文件中尝试了所有类型的配置(例如关于 include 指令的位置)但没有实现更改。我还尝试使用不同大小的图像文件而不进行更改。当前尺寸为 3K,像素为 80x49。

这里我的代码被简化为只显示大小写相关的行:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
     }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    public void on_distance_waiting_Click(View view) {
     }

}

主要布局:

    <android.support.design.widget.CoordinatorLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.pm.pmactionbaricon.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:orientation="vertical">

        <include layout="@layout/custom_toolbar" />
        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"  />

    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

custom-toolbar布局:

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_collapseMode="pin"
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:padding="0dp"
    android:layout_width="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="310dp"
        android:layout_height="wrap_content"        >


            <Button
                android:id="@+id/button1"
                android:background="@drawable/distance_waiting_small"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                style="?android:attr/buttonBarButtonStyle"
                android:title="@string/Distance"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:onClick="on_distance_waiting_Click"/>

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

样式文件:

    <resources>

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

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />


    <style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColorPrimary">@android:color/holo_blue_light</item>
        <item name="actionMenuTextColor">@android:color/holo_green_light</item>
    </style>
 </resources>

这里还有使用过的图片:

当我在设计模式下使用布局时,我可以识别出常规工具栏元素(不是 custom-toolbar)似乎负责不需要的区域。以下 3 个屏幕截图可能有助于突出显示这一点。同样奇怪的是,这里的外观与开头显示的设备上的结果不同。

activity布局(考虑右边选择的是什么window):

选择了(标准)工具栏的 activity 布局:

自定义工具栏:

那么,是什么导致操作栏下方出现不需要的区域?

在您的 activity_main.xml 中删除多余的工具栏元素:

 <android.support.design.widget.CoordinatorLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.pm.pmactionbaricon.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:orientation="vertical">

        <include layout="@layout/custom_toolbar" />
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

在 custom_toolbar.xml 布局中进行如下所示的更改:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_collapseMode="pin"
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:padding="0dp"
    app:popupTheme="@style/AppTheme.PopupOverlay" 
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="310dp"
        android:layout_height="wrap_content">

            <Button
                android:id="@+id/button1"
                android:background="@drawable/distance_waiting_small"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                style="?android:attr/buttonBarButtonStyle"
                android:title="@string/Distance"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:onClick="on_distance_waiting_Click"/>

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

此外,请确保您的 activity 标签在清单文件中设置了此属性。

android:theme="@style/AppTheme.NoActionBar"