Question

我的布局是一个主要活动，我用片段替换内容。我想添加一个FloatingActionButton，我希望按钮的一半在工具栏中，而另一半我想要在片段内容中。我附上了我想要的结果图片。

但我得到了这个

工具栏与工厂的一半重叠。我试图让工具栏透明但没有任何变化。

片段的代码是

<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">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/home_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- contains archived and liked buttons -->
        <LinearLayout
            android:id="@+id/home_buttons"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:baselineAligned="false"
            android:orientation="horizontal">

            <!-- archived button -->
            <FrameLayout
                android:id="@+id/home_archived_button"
                android:layout_width="0.0dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/orange">

                <!-- archived button icon -->
                <ImageView
                    android:id="@+id/home_archived_button_icon"
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center_vertical|start"
                    android:layout_marginLeft="3dp"
                    android:layout_marginStart="3dp"
                    android:background="@mipmap/down_white_cyrcle_arrow"
                    android:contentDescription="@string/app_name" />

                <!-- archived button -->
                <TextView
                    android:id="@+id/home_archived_button_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="40dp"
                    android:layout_marginStart="40dp"
                    android:text="@string/home_archived"
                    android:textColor="@color/white" />

            </FrameLayout>

            <!--liked button -->
            <FrameLayout
                android:id="@+id/home_liked_button"
                android:layout_width="0.0dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="2dp"
                android:layout_marginRight="2dp"
                android:layout_weight="1"
                android:background="@color/orange">

                <!-- liked button icon -->
                <ImageView
                    android:id="@+id/home_liked_button_icon"
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center_vertical|end"
                    android:layout_marginEnd="3dp"
                    android:layout_marginRight="3dp"
                    android:background="@mipmap/down_white_cyrcle_arrow"
                    android:contentDescription="@string/app_name" />

                <!-- liked button text-->
                <TextView
                    android:id="@+id/home_liked_button_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical|end"
                    android:layout_marginEnd="40dp"
                    android:layout_marginRight="40dp"
                    android:text="@string/home_liked"
                    android:textColor="@color/white" />
            </FrameLayout>
        </LinearLayout>

        <!-- no matches -->
        <RelativeLayout
            android:id="@+id/home_no_matches_panel"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">

            <!-- no matches text -->
            <TextView
                android:id="@+id/home_no_matches"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:gravity="center"
                android:text="@string/home_no_matches"
                android:textColor="@color/black"
                android:visibility="gone" />

            <!-- home invite button -->
            <Button
                android:id="@+id/home_invite_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/home_no_matches"
                android:layout_centerHorizontal="true"
                android:background="@color/orange"
                android:padding="10dp"
                android:text="@string/invite_friends"
                android:textAllCaps="false"
                android:textColor="@color/white"
                android:visibility="gone" />
        </RelativeLayout>

        <!-- recyclerView for home fragment -->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/home_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/home_buttons"
            android:layout_marginBottom="35dp" />

        <!-- search button -->
        <FrameLayout
            android:id="@+id/home_search_button"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_alignParentBottom="true"
            android:background="@color/orange">

        </FrameLayout>
    </RelativeLayout>

    <!--home add property -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        style="@style/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@mipmap/home_add_property"
        app:backgroundTint="@color/white"
        app:borderWidth="0dp"
        app:elevation="0dp"
        app:layout_anchor="@id/home_buttons"
        app:layout_anchorGravity="top|center_horizontal" />

    <!-- home search button -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/home_search_fab"
        style="@style/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:src="@mipmap/home_search"
        app:backgroundTint="@color/orange"
        app:borderWidth="0dp"
        app:elevation="0dp"
        app:layout_anchor="@id/home_search_button"
        app:layout_anchorGravity="bottom|center_horizontal" />


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

，活动代码是

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:gravity="center"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:titleTextColor="@color/black">

            <!-- toolbar title -->
            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center" />

        </android.support.v7.widget.Toolbar>

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

    <include layout="@layout/content_main" />

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

和工厂的风格

 <style name="floating_action_button">
        <item name="android:layout_marginLeft">0dp</item>
        <item name="android:layout_marginTop">-500dp</item>
        <item name="android:layout_marginRight">0dp</item>
        <item name="android:layout_marginBottom">-15dp</item>
    </style>

Answer 1

嗯，不可能以你的方式去做。您的FAB位于Fragment，而Toolbar位于Activity。我建议你做两件事之一： 1）将FAB代码移动到Activity，并动态附加到它的动作（如果您需要与Fragment通信） 2）将Toolbar移至Fragment。无论如何，不是试图在styles.xml内对齐您的FAB，而是可以使用这样的锚标记（它是XML中的FAB属性）：

我是这样做的：

片段布局：

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/product_details_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

   //actual content
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:src="@android:drawable/ic_menu_save"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|center"
    android:id="@+id/add_to_cart_fab" />

活动布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

它正在与视差模式折叠。您可能想要更改它以便始终查看您的按钮，但这是附加FAB的正确方法。

工具栏与浮动操作按钮重叠

1 个答案: