带Appcompat的浮动工具栏

Question

如何按照材质设计指南和Google Map应用程序中的建议创建一个浮动工具栏，如下图所示。

​

​

Answer 1

我以前使用过工具栏，所有来自CommonsWare的评论都是绝对正确的。

Toolbar小部件(https://developer.android.com/reference/android/support/v7/widget/Toolbar.html)与任何其他Viewgroup完全没有什么特别之处，也没有什么不同，其行为也与任何其他ViewGroup没有什么不同。

把它放在一个FrameLayout中，在它上面放一个layout_margin参数，让这个layout_width不是match_parent，就是这样。

使用orientation=horizontal将其放入LinearLayout中，您就可以使用layout_weight来控制百分比大小。或者只使用普通的dip，如果它适合你的需要。

Answer 2

既然你正在遵循材料设计的概念，我假设你正在使用Coordinator Layout作为你的主布局，而不是框架布局。

首先，我们需要声明重要的依赖项。

dependencies {
    compile 'com.android.support:design:22.2.1'
    compile 'com.android.support:cardview-v7:22.2.1'
}

预期/类似输出

​

​

XML代码片段

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/frmlyout_locationnote_mapholder"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- You can add your Map here-->
        <ImageView
            android:id="@+id/imgvw_locationnote_background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/tlbr_locationnote_mainmenu"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.v7.widget.CardView>
    </LinearLayout>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_locationnote_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_plus_white_24dp"
        app:layout_anchor="@id/frmlyout_locationnote_mapholder"
        app:layout_anchorGravity="bottom|right" />

</android.support.design.widget.CoordinatorLayout>

Answer 3

我认为Mark在上面的评论中提出的关于使用CardView "look“的建议值得得到这个衍生的答案：

只需在CardView中放置一个Toolbar

<android.support.v7.widget.CardView
    android:id="@+id/map_toolbar_container"
    android:layout_width="@dimen/whatever_you_want"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardElevation="8dp"
    app:cardBackgroundColor="#324">

    <android.support.v7.widget.Toolbar
        android:id="@+id/wld_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"/>

</android.support.v7.widget.CardView>