设计工具栏和使用浮动操作按钮

Designing Toolbar and using Floating Action Buttons

尽管 Internet 上有 一些 信息或多或少地介绍了扩展 Toolbar 的工作原理以及您打算如何添加不同的 Views为此,我想为我和其他所有想要 extended Toolbar 实施到他们的应用程序中的人提供一份分步指南(具体来说,如何将视图 添加到 Toolbar,我应该使用什么度量来测量不同 [=] 之间的 边距 11=]s 和 Toolbar,等等

如果可能,我还想实现 floating action buttons 和一些 material 设计动画,因为我在 Android.

Heree 是关于如何使用全新工具栏的精彩教程。

将工具栏集成到您的 Activity 后,您可以像往常一样添加菜单项。(通过 onCreateOptionMenu() 和 xxx_menu.xml)

and... Here 是关于 FAB aka Floating-Action-Button 的教程。


更新:

2015年GoogleI/O后,可以使用Design Support Library实现material设计视图如Floating Action Button(FAB ). Toolbar 仍将使用 v7 支持库创建,如下所示。


设计Toolbar

查看 these specifications and guidelines from Google,我设法使用正确的规格和测量值设置了扩展 Toolbar 我想要的方式。

在我的例子中,我使用 Fragments 来更改主要内容(扩展 Toolbar 中的 Views 也会有所不同),所以我有一个布局activity 的文件和其他片段的不同布局文件。我的主要 activity 的 布局是:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include android:id="@+id/main_toolbar" layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/main_toolbar" />
</RelativeLayout>

@layout/toolbar 只是指以下布局(我用于标准工具栏的布局(即正常高度,就像 ActionBar)):

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

并且 FrameLayout 中的内容(在主要 activity 的布局中)将在 Java 中更改。我的一个片段需要两个 Spinner,我想将它们嵌入到一个扩展的 Toolbar 中。 Toolbar 可以方便地用作 ViewGroup,因此我为我的一个片段创建并使用了以下 布局 :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/extended_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:contentInsetStart="72dp"
        app:contentInsetEnd="16dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|center_horizontal"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

            <include layout="@layout/toolbar_space_margin" />

            <Spinner
                android:id="@+id/spinner_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <Spinner
                android:id="@+id/spinner_two
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"/>

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/extended_toolbar" >

        <!-- The main content of that activity layout -->

    </ScrollView>
</RelativeLayout>

?attr/colorPrimary指的是我在styles.xml中定义的原色(colorPrimary)。我认为 contentInsetStartcontentInsetEnd 这两个属性就像 Toolbar 的填充。这意味着 LinearLayout 将从 Toolbar 的左边缘 72dp 开始,并且也会从它的右边缘开始 16dp 。另外,我引用了两次 @layout/toolbar_space_margin,这基本上是 我用于顶部和底部边距的空视图 :

<?xml version="1.0" encoding="utf-8"?>
<Space
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="16dp" />

使用浮动操作按钮:

关于使用 Floating Action Buttons,我找到了各种教程和一个 Stack Overflow post,所以我使用了那些。我应该更好地研究那部分问题......

我希望遇到此设计问题的其他人会发现此答案有用。