布局之间的FAB

时间:2016-12-16 10:19:44

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

这是我的xml:

<?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:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />

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

    <LinearLayout
        android:id="@+id/layout_first"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.8"
        android:background="@color/ColorPrimary"
        android:orientation="horizontal" />

    <LinearLayout
        android:id="@+id/layout_second"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.4"
        android:background="@color/ColorPrimaryLight"
        android:orientation="horizontal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:clickable="true"
        android:src="@drawable/ic_search_black_48dp"
        app:backgroundTint="#df0909"
        app:elevation="4dp"
        app:layout_anchor="@id/layout_first"
        app:layout_anchorGravity="bottom|right|end" />

    </LinearLayout>

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

这就是它的样子: enter image description here

我从这个答案中试了一下:How can I add the new “Floating Action Button” between two widgets/layouts

但当我将compile 'com.android.support:design:23.4.0'更改为compile 'com.android.support:design:25.0.1'时,我收到了错误消息:

apply plugin: 'com.android.application'
android {
 compileSdkVersion 23
 buildToolsVersion "23.0.3"

defaultConfig {
    applicationId "com.test.test"
    minSdkVersion 21
    targetSdkVersion 23
    versionCode 1
    versionName "1.0"
}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
} 
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
}

那么有没有办法实现这样的样子,其中fab在两个布局之间(不需要滚动): enter image description here

3 个答案:

答案 0 :(得分:2)

FloatingActionButton位于LinearLayout内。要使layout_anchor*属性起作用,它必须是CoordinatorLayout的直接子项。

只需将FloatingActionButton元素移至结束LinearLayout标记之后。

答案 1 :(得分:0)

您可以使用下一个:

<FloatingButton
 app:layout_anchor="@id/layout_first"
    app:layout_anchorGravity="bottom|left|end"/>

在您想要的布局上使用此功能,并尝试谷歌它以获得所需的效果。有许多锚定教程,所以请查阅。但是,重点是你需要将它锚定到你想要的布局上。

答案 2 :(得分:0)

android:layout_margin="-20dp"

使用负边距(FAB高度的一半)