如何让自定义工具栏与操作栏对齐?
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"
为了让 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"