创建和定位浮动操作按钮

Question

我正在尝试将 FAB 添加到卡片视图的底部，例如在此应用中：

该按钮确实显示了，但它不与卡片视图重叠。我正在使用Android Material Design Library。这是我的文件：

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FFEB3B</color>
    <color name="colorAccentDark">#FBC02D</color>
</resources>

activity_main.xml:

    tools:context=".MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <LinearLayout
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/main_content"
        android:layout_below="@id/toolbar">

        <android.support.v7.widget.CardView
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/stop_card"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="5dp"
            card_view:cardCornerRadius="4dp">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingTop="5dp"
                android:paddingRight="10dp"
                android:paddingBottom="5dp">

                <TextView
                    android:id="@+id/label_stop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Fermata"
                    android:textSize="25sp"
                    android:textStyle="bold"
                    android:singleLine="true" />

                <EditText
                    android:id="@+id/edit_stop"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="number"
                    android:ems="10"
                    android:layout_gravity="end" />
            </LinearLayout>
        </android.support.v7.widget.CardView>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="72dp" >

            <com.gc.materialdesign.views.ButtonFloat
                android:id="@+id/buttonFloat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:animate="true"
                materialdesign:iconDrawable="@android:drawable/ic_menu_search"
                android:layout_gravity="end"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true" />

        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

build.gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "com.example.john.gttime"
        minSdkVersion 21
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.+'
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
    compile 'com.github.navasmdc:MaterialDesign:1.+@aar'
}

几乎是对的，但它应该在卡片视图的中间。这是我在 Android Studio 预览版中得到的：

Answer 1

您可以尝试向按钮或其父级添加负上边距，以便向上移动。由于您似乎想将其与卡片正好重叠一半，您可以将android:layout_marginTop="-36dp" 添加到按钮的父级RelativeLayout，其中36dp 是其高度的一半：

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="72dp"
        android:layout_marginTop="-36dp">

        <com.gc.materialdesign.views.ButtonFloat
            android:id="@+id/buttonFloat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#1E88E5"
            materialdesign:animate="true"
            materialdesign:iconDrawable="@android:drawable/ic_menu_search"
            android:layout_gravity="end"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true" />

    </RelativeLayout>