如何正确设置浮动操作按钮？答案

【问题标题】：How to set Floating Action Button correctly?如何正确设置浮动操作按钮？
【发布时间】：2015-01-31 13:02:53
【问题描述】：

我有问题。我用这个库来制作滑动面板。点击here。我添加了它，然后我尝试像在谷歌地图应用程序中一样制作浮动操作按钮。（如图所示）。

但在我的结果下方。如何像第一张图片一样正确设置（使滑动面板顶部可能是）。

fragment_1.xml（查看滑动布局部分）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="56dp"
        sothree:umanoShadowHeight="4dp"
        sothree:umanoParalaxOffset="50dp"
        sothree:umanoDragView="@+id/dragView"
        xmlns:fab="http://schemas.android.com/apk/res-auto">

        <!-- MAIN CONTENT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:weightSum="100">

        </LinearLayout>


        <!-- SLIDING LAYOUT -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="390dp"
            android:background="@android:color/transparent"
            android:orientation="vertical"
            android:clickable="true"
            android:focusable="false"
            sothree:umanoOverlay="true"
            android:layout_below="@+id/main_content">

            <!-—TOP OF PANEL -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:orientation="horizontal"
                android:background="#03A9F4"
                android:id="@+id/dragView">


                <TextView
                    android:id="@+id/name"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="14sp"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"
                    android:textColor="@android:color/white"/>

                <Button
                    android:id="@+id/follow"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:gravity="center_vertical|right"
                    android:paddingRight="10dp"
                    android:paddingLeft="10dp"/>

                <com.melnykov.fab.FloatingActionButton
                    android:id="@+id/fab"
                    sothree:fab_type="normal"
                    android:layout_marginBottom="25dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|right|center"
                    android:tint="@android:color/white"
                    android:src="@android:drawable/ic_dialog_map"
                    fab:fab_colorNormal="@color/fab_primary"
                    fab:fab_colorPressed="@color/fab_pressed"
                    fab:fab_colorRipple="@color/fab_ripple"/>

            </LinearLayout>
        </LinearLayout>
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>

感谢您的帮助！

【问题讨论】：

标签： android android-layout android-activity android-fragments android-button

【解决方案1】：

把<com.melnykov.fab.FloatingActionButton/>放在<com.sothree.slidinguppanel.SlidingUpPanelLayout/>外面，别忘了用marginTop和marginLeft来定位：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="56dp"
        sothree:umanoShadowHeight="4dp"
        sothree:umanoParalaxOffset="50dp"
        sothree:umanoDragView="@+id/dragView"
        xmlns:fab="http://schemas.android.com/apk/res-auto">

        <!-- MAIN CONTENT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:weightSum="100">

        </LinearLayout>


        <!-- SLIDING LAYOUT -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="390dp"
            android:background="@android:color/transparent"
            android:orientation="vertical"
            android:clickable="true"
            android:focusable="false"
            sothree:umanoOverlay="true"
            android:layout_below="@+id/main_content">

            <!--—TOP OF PANEL -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:orientation="horizontal"
                android:background="#03A9F4"
                android:id="@+id/dragView">


                <TextView
                    android:id="@+id/name"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textSize="14sp"
                    android:gravity="center_vertical"
                    android:paddingLeft="10dp"
                    android:textColor="@android:color/white"/>

                <Button
                    android:id="@+id/follow"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="14sp"
                    android:gravity="center_vertical|right"
                    android:paddingRight="10dp"
                    android:paddingLeft="10dp"/>



            </LinearLayout>
        </LinearLayout>
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        sothree:fab_type="normal"
        android:layout_marginBottom="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|center"
        android:tint="@android:color/white"
        android:src="@android:drawable/ic_dialog_map"
        android:layout_marginLeft="300dp"
        android:layout_marginTop="200dp"
        fab:fab_colorNormal="@color/fab_primary"
        fab:fab_colorPressed="@color/fab_pressed"
        fab:fab_colorRipple="@color/fab_ripple"/>
</RelativeLayout>

【讨论】：

你好@ali-nrd 这不是我需要的。浮动操作按钮必须绑定到面板，就像在谷歌地图应用程序中一样。你有什么想法吗？
@NurzhanNogerbek 没错，这也是我的问题。我遇到了同样的问题。一旦我工作就会发布。但是你找到答案了吗？？
你好！是的，我解决了这个问题。您需要在库内进行重大更改。检查它：github.com/umano/AndroidSlidingUpPanel/pull/362/files

【解决方案2】：

一种更简单的方法，这就是我所做的，就是在滑动布局中的第一项添加 28 dp 的内边距，然后将 SlidingLayout 置于覆盖模式。

<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="@+id/sliding_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:sothree="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:gravity="bottom"
sothree:umanoOverlay="true"
sothree:umanoPanelHeight="228dp"
sothree:umanoShadowHeight="0dp"
tools:context="com.myfab5.mobile.myfab5.ui.BusinessActivityFragment"
tools:ignore="RtlHardcoded">

<com.google.android.gms.maps.MapView
    android:id="@+id/map_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent">

    <ImageView
        android:id="@+id/header_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="28dp" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/directions_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="@dimen/full_margin"
        android:elevation="@dimen/quarter_margin"
        android:src="@drawable/ic_directions_white_24dp"
        fab:fab_colorNormal="@color/accent"
        fab:fab_colorPressed="@color/accent_60"
        fab:fab_colorRipple="@color/accent_60" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="@dimen/triple_margin"
        android:layout_marginLeft="@dimen/full_margin"
        android:layout_marginTop="@dimen/quadruple_margin"
        android:text="@string/business_name"
        android:textColor="@color/white"
        android:textSize="24sp" />


</RelativeLayout>

【讨论】：