Question

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

enter image description here

Answer 1

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

Toolbar窗口小部件（https://developer.android.com/reference/android/support/v7/widget/Toolbar.html）与任何其他Viewgroup完全没有任何特殊或不同，并且与其他任何ViewGroup的行为都不同。

将其放在FrameLayout内，在其上加layout_margin个参数，将layout_width改为match_parent并将其设为。

将其放在LinearLayout orientation=horizontal内，您可以使用layout_weight来控制百分比的大小。或者只使用普通dip，如果符合您的需要。

Answer 2

由于您遵循Material Design概念，我假设您使用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

我认为马克建议购买CardView＆＃34;外观＆＃34;在上面的评论中应该得到这个衍生答案：

只需将Toolbar放入CardView：

<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>

Answer 4

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    **android:layout_margin="10dp"
    android:elevation="5dp"**
    />

Answer 5

只需添加以下代码....

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:id="@+id/toolbar"
    android:background="@color/colorPrimary"
    android:elevation="8dp"
    android:layout_margin="5dp"
    >
     //add whatever elements you want to add in here.
</android.support.v7.widget.Toolbar>

Answer 6

这是浮动工具栏的代码，只需复制和粘贴即可。

这是一个使用Appcompat的浮动工具栏的示例，它可以在诸如Relative，Coordinator或DrawerLayout的许多布局下工作。您可以增加海拔以使其更有效。

floating toolbar with Edit text or Search box

<LinearLayout
    android:background="@color/colorWhite"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">


<androidx.appcompat.widget.Toolbar
    android:background="@drawable/floating_toolbar"
    android:id="@+id/app_toolbar"
    android:elevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="50dp">

<EditText
    android:gravity="start"
    android:id="@+id/search_bar"
    android:background="@drawable/edit_text_no_border"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Search here.." />

</androidx.appcompat.widget.Toolbar>       
</LinearLayout>

drawable / floating_toolbar.xml文件，用于设置背景阴影。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="rectangle">
        <solid android:color="#6FA5A5A5" />
        <corners android:radius="6dp"/>
    </shape>
</item>
<item android:top="1dp" android:right="1dp" android:left="1dp" android:bottom="1dp">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/colorWhite"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

EditText的 editable / edit_text_no_border.xml文件，没有轮廓框或底部边框，以使其与背景完全匹配。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners  android:radius="0px"/>
    <stroke android:width="0dp" android:color="#FFFFFF"/>
</shape>

表情符号= ThumbsUp

使用Appcompat浮动工具栏

6 个答案:

预期/类似输出

XML代码段

这是浮动工具栏的代码，只需复制和粘贴即可。