带有 Appcompat 的浮动工具栏

Posted 2023-04-13

【中文标题】带有 Appcompat 的浮动工具栏

【英文标题】：Floating Toolbar with Appcompat

【发布时间】：2015-05-02 03:36:13

【问题描述】：

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

【问题讨论】：

即兴发挥，我假设您将使用RelativeLayout 或FrameLayout 作为地图的容器和Toolbar。将Toolbar 作为容器中较晚的子项将使其具有更高的高度并使其漂浮在地图表面上。

是的。这可以使工具栏漂浮在地图表面上。但是如何给工具栏一种“分离”的感觉（如图）？ .谢谢。

我不太清楚你的意思。如果您指的是投影，那么它应该在 android 5.0 上“开箱即用”。在 Android 4.4 及更低版本上，您可能会查看 CardView 如何实现其假投影并尝试重现它。

抱歉，上述评论不够清晰。我会再尝试。常规工具栏占据整个宽度。但在上图中，工具栏不是全宽的。从而给它一种“分离”的独立感觉。

好吧，我还没有玩过Toolbar，但由于它是一个普通的小部件，我会假设它会响应android:layout_width之类的东西。

【参考方案1】：

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

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。

【参考方案2】：

由于您遵循 Material Design 概念，我假设您使用 Coordinator Layout 作为您的主布局而不是框架布局。

首先我们需要声明重要的依赖关系。

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

预期/相似输出

XML sn-p

<?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_
    android:layout_
    android:fitsSystemWindows="true">

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

    <LinearLayout
        android:layout_
        android:layout_
        android:padding="16dp">

        <android.support.v7.widget.CardView
            android:layout_
            android:layout_>

            <android.support.v7.widget.Toolbar
                android:id="@+id/tlbr_locationnote_mainmenu"
                android:layout_
                android:layout_
                app:layout_collapseMode="pin" />
        </android.support.v7.widget.CardView>
    </LinearLayout>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_locationnote_fab"
        android:layout_
        android:layout_
        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>

【参考方案3】：

我认为 Mark 关于在上面的评论中选择 CardView“外观”的建议值得这个衍生答案：

只需将Toolbar 放入CardView：

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

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

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

【参考方案4】：

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

<android.support.v7.widget.Toolbar
    android:layout_
    android:layout_
    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>

【讨论】：

请将代码编辑成代码块并提供更多细节以支持您的回答

【参考方案5】：

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

【参考方案6】：

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

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

floating toolbar with Edit text or Search box

<LinearLayout
    android:background="@color/colorWhite"
    android:layout_
    android:layout_
    android:padding="16dp">


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

<EditText
    android:gravity="start"
    android:id="@+id/search_bar"
    android:background="@drawable/edit_text_no_border"
    android:layout_
    android:layout_
    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 的drawable/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: android:color="#FFFFFF"/>
</shape>

表情符号 = 竖起大拇指