【问题标题】:floating action button stay between toolbar and frame that shows fragments浮动操作按钮停留在工具栏和显示片段的框架之间
【发布时间】:2016-06-19 21:47:26
【问题描述】:

我可以将 FAB 按钮完美地放置在布局的右下角。但我希望将 FAB 按钮放置在工具栏和框架布局的交叉点,我将其用于片段。

下面是我用 DrawerLayout 设计的 activity_main.xml。我已经尝试使用 CoordinatorLayout,但是在布局中使用当前框架时,我无法按此链接所示放置 FAB 按钮

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 按钮显示工具栏和框架的中间右侧。

我查看了其他 stackoverflow 帖子 How can I add the new "Floating Action Button" between two widgets/layouts

但我不知道应该将显示片段数据的 FrameLayout 放在哪里。

感谢 Danail 提供了一些帮助的参考教程。

现在 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 并显示在图片链接中。

【问题讨论】:

    标签: android android-fragments drawerlayout android-coordinatorlayout floating-action-button


    【解决方案1】:

    this 指南中有有用的信息。仔细查看“在标题中嵌入 FloatingActionButton”部分。

    总结一下: 您应该使用 FAB 的 layout_anchorlayout_anchorGravity 属性。在您的情况下,工具栏将是“锚点”,您应该使用 layout_anchorGravity="bottom|right|end"

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-06-11
      • 2015-08-24
      • 1970-01-01
      • 2015-07-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多