将FAB对齐在右下角

时间:2015-07-31 10:32:22

标签: android alignment material-design floating-action-button

我有这个布局文件。我试图添加FloatingActionButton的地方。我无法将它放在右下角。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/action_bar_size"
            android:background="@color/myPrimaryColor"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <TextView
            android:id="@+id/offline_msg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#ff0000"
            android:gravity="center"
            android:padding="5dp"
            android:text="No Internet connection"
            android:textColor="@android:color/white" />

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

</LinearLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_drawer_header"
    app:menu="@menu/navigation_drawer_menu" />

</android.support.v4.widget.DrawerLayout>

FAB部分

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/ic_create_white"
    app:elevation="3dp"
    app:fabSize="normal"
    app:pressedTranslationZ="6dp"
    app:rippleColor="@color/white" />

但无论我把它放在上面的布局中,它都不会发生。任何帮助将不胜感激。

编辑 FrameLayout将在运行时被Fragment替换

2 个答案:

答案 0 :(得分:3)

为什么你不尝试使用FrameLayout作为你的父母布局,这样你就可以将FAB放在你想要的任何地方:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
 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.support.v4.widget.DrawerLayout 
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/action_bar_size"
            android:background="@color/myPrimaryColor"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <TextView
            android:id="@+id/offline_msg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#ff0000"
            android:gravity="center"
            android:padding="5dp"
            android:text="No Internet connection"
            android:textColor="@android:color/white" />

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

</LinearLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_drawer_header"
    app:menu="@menu/navigation_drawer_menu" />

</android.support.v4.widget.DrawerLayout>


<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_create_white"
app:elevation="3dp"
app:fabSize="normal"
app:pressedTranslationZ="6dp"
app:rippleColor="@color/white" />

</FrameLayout>

如您所见,您将FAB置于主要布局之上:)

我希望这会帮助你:)

答案 1 :(得分:1)

在NavigationView之后放置

<FrameLayout
    android:id="@+id/fab_rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="@dimen/fab_margin_right"
        android:src="@drawable/ic_add_shopping_cart_white_18dp"
        app:backgroundTint="@color/accent"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:pressedTranslationZ="12dp"
        app:rippleColor="@android:color/white"/>

</FrameLayout>