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

时间:2016-09-12 19:40:01

标签: android android-layout android-actionbar imagebutton

为了将动作按钮放入我的工具栏,我实现了一个自定义工具栏,可以在其中定义带有按钮图像的布局。在activity_main布局文件中,我通过include指令引用此自定义工具栏布局。

它适用于现在在操作栏顶部的一行中显示的内容:我的程序标题和溢出菜单图标从自定义工具栏中添加按钮。问题是,在此行下方会出现第二个空行,但没有内容。意思是,操作栏的高度加倍,这个不需要的区域与我的画布重叠。这里是现象的截图:

On the device

我搜索了解决这个问题的文件,但没有找到映射案例。此外,我在我的布局文件中尝试了所有类型的星座(例如关于包含指令的位置),但没有实现更改。我也试过不同尺寸的图像文件,没有改变。当前尺寸为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>

自定义工具栏布局:

    <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>

此处还使用了图片:enter image description here

当我在设计模式中使用Layouts时,我可以发现常规工具栏元素(不是自定义工具栏)似乎负责不需要的区域。以下3个屏幕截图可能有助于突出显示此内容。同样奇怪的是,这里的外观与设备上的结果不同,如开头所示。

活动布局(考虑在右侧窗口中选择的内容): enter image description here

选择了(标准)工具栏的活动布局: enter image description here

自定义工具栏: enter image description here

那么,导致操作栏下面这个不需要的区域的原因是什么?

1 个答案:

答案 0 :(得分:0)

在您的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>

另外,请确保您的活动代码在清单文件中设置了此属性。

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