android - 设计工具栏和使用 float 操作按钮

Question

尽管 Internet 上有一些信息，或多或少地介绍了扩展的 Toolbar 的工作原理以及您打算如何添加不同的 View就此而言，我想为我和其他想要在他们的应用程序中扩展工具栏的人提供一个分步指南(具体来说，如何添加 View 到工具栏，我应该使用什么测量方法来衡量不同 View 之间的边距>s 和 Toolbar 等

如果可以的话，我也想实现floating action buttons以及一些 Material 设计动画，因为我在 Android 中看不到任何类或内置方法。

Answer 1

---

更新:

在 Google I/O 2015 之后，您可以使用 Design Support Library实现 Material Design View ，例如 float 操作按钮 (FAB)。 工具栏 仍将使用 v7 支持库创建，如下所示。

---

设计工具栏:

查看these specifications and guidelines from Google ，我设法使用正确的规范和测量值设置我的扩展工具栏。

在我的例子中，我使用 Fragment 来更改主要内容(扩展的 Toolbar 中的 Views 也会有所不同)，所以我有一个用于该 Activity 的布局文件，以及用于我的其他 fragment 的不同布局文件。 我的主要 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 只是指以下布局(我用于标准工具栏的布局(即正常高度，就像 Action 条)):

<?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 中更改。我的一个 fragment 需要两个 Spinner，我想将它们嵌入到扩展的 Toolbar 中。 Toolbar 可以方便地用作 ViewGroup，因此我为我的一个 fragment 创建并使用了以下布局:

<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 距离 Toolbar 的左边缘 72dp 并且距离 16dp它的右边缘。此外，我引用了两次 @layout/toolbar_space_margin，这基本上是我用于顶部和底部边距的空 View :

<?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" />

使用 float 操作按钮:

至于使用 float 操作按钮，我找到了各种教程和一个 Stack Overflow post关于这个，所以我用了那些。我应该更好地研究那部分问题......

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