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

Question

虽然互联网上有部分信息或多或少的扩展Toolbar如何工作，以及您打算如何添加不同的View，我会喜欢为我和其他想要将扩展 Toolbar实施到他们的应用中的人（具体来说，如何）提供分步指南将视图添加到Toolbar，我应该在不同的View和Toolbar之间使用边距进行哪些测量

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

Answer 1

的更新：

在Google I / O 2015之后，您可以使用Design Support Library来实现材质设计视图，例如浮动操作按钮（FAB）。仍然会使用v7支持库创建Toolbar，如下所示。

设计Toolbar：

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

在我的情况下，我使用Fragment来更改主要内容（扩展Views内的Toolbar也不同），所以我有一个布局文件我的其他片段的活动和不同的布局文件。我主要活动的布局是：

<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））：< / p>

<?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中更改。我的一个片段需要两个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是指我在colorPrimary中定义的主要颜色（styles.xml）。我认为这两个属性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" /> ，这基本上是我用于顶部和底部边距的空视图：

        private void frm_add_players_Load(object sender, EventArgs e)
    {
        Divisions divs = new Divisions();
        Players players = new Players();
        DataTable dtDivisions = divs.GetActiveDivisions(); //divisions combo box
        DataTable dtPlayers = players.GetPlayersByTourID(this.tourID);
        //set the forms datatable
        this.dt_players = dtPlayers;

        //fill the combo box
        this.cmbo_divisions.DataSource = dtDivisions;
        this.cmbo_divisions.DisplayMember = "title";
        this.cmbo_divisions.ValueMember = "ID";
        this.cmbo_divisions.SelectedIndex = -1;
        this.cmbo_divisions.Text = "Select a Division";

        //set treeview imagelist
        this.tview_roster.ImageList = tview_imagelist;
        this.tview_roster.ImageIndex = 1; //division icon

        //fill treeview
        foreach (DataRow dr in dtPlayers.Rows)
        {
            FillPlayerTreeview(dr);
        }

        //expand treeview
        this.tview_roster.ExpandAll();
        this.ActiveControl = this.txt_player_name;
    }

使用浮动操作按钮：

至于使用浮动动作按钮，我发现了各种教程和Stack Overflow post，所以我使用了这些。我应该更好地研究这部分问题......

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

Answer 2

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

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

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