浮动操作按钮位于工具栏和显示片段的框架之间
floating action button stay between toolbar and frame that shows fragments
我可以将 FAB 按钮完美地放置在布局的右下角。但我希望将 FAB 按钮放置在工具栏和框架布局的交叉点,我将其用于片段。
下面是我的activity_main.xml,是用DrawerLayout设计的。我已经尝试过使用 CoordinatorLayout,但是我的当前框架在布局中有些问题,我无法放置 FAB 按钮,如此 link
所示
http://i.stack.imgur.com/6RjOq.jpg
或
http://i.stack.imgur.com/xCxE0.png
我的activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/viewA">
<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="10dp"
android:layout_marginBottom="16dp"
app:fabSize="normal"
android:src="@mipmap/ic_action_stop"
app:backgroundTint="@color/colorPrimaryDark"
app:rippleColor="#F06292"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer"
/>
我不想在 container_body 中显示的片段中滚动内容,但只希望 fab 按钮显示在工具栏和框架的右中部。
我查看了其他 Whosebug post
How can I add the new "Floating Action Button" between two widgets/layouts
但我不知道应该把显示片段数据的 FrameLayout 放在哪里。
感谢大牛参考教程,给了一些帮助。
现在 FAB 显示在工具栏和片段之间,如我所愿。
已更新activity_main.xml低于
解决方案
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="150dp">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewA"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<LinearLayout
android:id="@+id/viewB"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
android:clickable="true"
android:src="@mipmap/ic_action_play"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom|right|end"
app:fabSize="normal"
app:backgroundTint="@color/colorPrimaryDark"
app:rippleColor="#F06292"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer"
/>
这是根据需要显示 FAB,如图 links.
this 指南中有有用的信息。仔细查看 "Embedding FloatingActionButton in Header" 部分。
总结一下:
您应该使用 FAB 的 layout_anchor
和 layout_anchorGravity
属性。在您的情况下,工具栏将是 "anchor" 并且您应该使用 layout_anchorGravity="bottom|right|end"
.
我可以将 FAB 按钮完美地放置在布局的右下角。但我希望将 FAB 按钮放置在工具栏和框架布局的交叉点,我将其用于片段。
下面是我的activity_main.xml,是用DrawerLayout设计的。我已经尝试过使用 CoordinatorLayout,但是我的当前框架在布局中有些问题,我无法放置 FAB 按钮,如此 link
所示http://i.stack.imgur.com/6RjOq.jpg
或
http://i.stack.imgur.com/xCxE0.png
我的activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@+id/viewA">
<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="10dp"
android:layout_marginBottom="16dp"
app:fabSize="normal"
android:src="@mipmap/ic_action_stop"
app:backgroundTint="@color/colorPrimaryDark"
app:rippleColor="#F06292"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer"
/>
我不想在 container_body 中显示的片段中滚动内容,但只希望 fab 按钮显示在工具栏和框架的右中部。
我查看了其他 Whosebug post How can I add the new "Floating Action Button" between two widgets/layouts
但我不知道应该把显示片段数据的 FrameLayout 放在哪里。
感谢大牛参考教程,给了一些帮助。
现在 FAB 显示在工具栏和片段之间,如我所愿。
已更新activity_main.xml低于
解决方案
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="150dp">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewA"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<LinearLayout
android:id="@+id/viewB"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
android:clickable="true"
android:src="@mipmap/ic_action_play"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom|right|end"
app:fabSize="normal"
app:backgroundTint="@color/colorPrimaryDark"
app:rippleColor="#F06292"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer"
/>
这是根据需要显示 FAB,如图 links.
this 指南中有有用的信息。仔细查看 "Embedding FloatingActionButton in Header" 部分。
总结一下:
您应该使用 FAB 的 layout_anchor
和 layout_anchorGravity
属性。在您的情况下,工具栏将是 "anchor" 并且您应该使用 layout_anchorGravity="bottom|right|end"
.