如何正确设置浮动操作按钮?

时间:2015-01-31 13:02:54

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

我有问题。我使用这个库来制作向上滑动的面板。点击here。我添加了它,然后我尝试在谷歌地图应用程序中制作浮动操作按钮。(如图所示)。 enter image description here

但是在我的结果下面。如何在第1张图片中正确设置(使滑动面板trasprent的顶部)正确。

enter image description 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>

感谢您的帮助!

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

更简单的方法,就是我所做的,只是在滑​​动布局中的第一项添加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>