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

Question

虽然 Internet 上有 一些 信息或多或少地说明了扩展 Toolbar 的工作原理以及您如何向其中添加不同的 Views，但我希望有一个为我和其他想要在他们的应用中实现扩展Toolbar的人提供的分步指南（具体来说，如何添加视图 到Toolbar，对于不同Views 和Toolbar 等之间的边距，我应该使用什么测量值。

如果可能，我还想实现floating action buttons 和一些材料设计动画，因为我在 Android 中看不到任何类或内置方法。

Answer 1

Heree 是一个很好的教程，介绍如何使用全新的工具栏。

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

和...Here 是关于 FAB 又名浮动操作按钮的教程。

Answer 2

---

更新：

在 Google I/O 2015 之后，您可以使用 Design Support Library 来实现 Floating Action Button (FAB) 等 Material Design 视图。 Toolbar 仍将使用 v7 支持库创建，如下所示。

---

设计Toolbar:

查看these specifications and guidelines from Google，我设法使用正确的规格和测量设置了我的扩展Toolbar。

就我而言，我使用Fragments 来更改主要内容（扩展Toolbar 内的Views 也会有所不同），所以我有一个用于活动的布局文件和不同的布局我的其他片段的文件。 我的主要活动的布局是：

<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 中的内容（在主要活动的布局中）将在 Java 中更改。我的一个片段需要两个Spinners，我想将它们嵌入到扩展的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）。我认为contentInsetStart 和contentInsetEnd 这两个属性就像Toolbar 的填充。这意味着LinearLayout 将是72dp 从Toolbar 的左边缘，也将是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" />

使用浮动操作按钮：

至于使用浮动操作按钮，我找到了各种教程和Stack Overflow post，因此我使用了这些。我应该更好地研究这部分问题......

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