如何创建一个浮动工具栏，就像材料设计指南和Google地图应用程序中提出的那样，如下图所示。
6个回答
7
我之前曾经使用过Toolbar，所以我完全同意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。
- Budius
6
由于您正在遵循Material Design概念，我假设您正在使用协调布局（Coordinator Layout）作为主要布局而不是帧布局(Frame 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>
- Enzokie
5
我认为Mark在上面的评论中提出的获取CardView“外观”的建议值得这个派生答案：
只需将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>
- nmr
0
<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"**
/>
- Sreejith K Menon
0
只需添加以下代码...
<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>
- Satish Silveri
1
1请将代码编辑为代码块，并提供更多细节来支持您的答案。 - minocha
0
这里是浮动工具栏的代码，只需复制粘贴即可。
这是使用Appcompat的浮动工具栏示例，它可以在许多布局下工作，如相对布局、协调器布局或抽屉式布局。您可以增加高度以使其更有效。
<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>
drawable/edit_text_no_border.xml文件用于EditText，它没有轮廓框或底部边框，使其与背景相匹配，更加清晰。
<?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>
表情符号 = 点赞
- Nakul7272
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
RelativeLayout或FrameLayout作为地图和Toolbar的容器。将Toolbar作为容器中较晚添加的子视图可使其具有更高的层级并浮在地图表面之上。 - CommonsWareCardView是如何实现假下拉阴影的，并尝试复制它。 - CommonsWareToolbar，但是既然它是一个普通的小部件，我会假设它会响应像android:layout_width这样的属性。 - CommonsWare