如何创建一个浮动工具栏,就像材料设计指南和Google地图应用程序中提出的那样,如下图所示。
我之前曾经使用过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
。
由于您正在遵循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 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>
我认为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>
<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"**
/>
只需添加以下代码...
<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>
这是使用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>
表情符号 = 点赞
RelativeLayout
或FrameLayout
作为地图和Toolbar
的容器。将Toolbar
作为容器中较晚添加的子视图可使其具有更高的层级并浮在地图表面之上。 - CommonsWareCardView
是如何实现假下拉阴影的,并尝试复制它。 - CommonsWareToolbar
,但是既然它是一个普通的小部件,我会假设它会响应像android:layout_width
这样的属性。 - CommonsWare