我猜你已经看到了新的Android设计指南,新的“浮动动作按钮”,又名“FAB”

比如这个粉色按钮:

我的问题听起来很愚蠢,我已经尝试了很多东西,但是把这个按钮放在两个布局的交集的最佳方法是什么?

在上面的例子中,这个按钮被完美地放置在我们想象中的ImageView和relativeLayout之间。

我已经尝试了很多调整,但我相信有一个正确的方法。


当前回答

这是另外一个免费的Android浮动动作按钮库。 它有许多自定义,需要SDK版本9及更高版本

完整演示视频

dependencies {
    compile 'com.scalified:fab:1.1.2'
}

其他回答

在这里输入图像描述

使用ConstraintLayout

<androidx.constraintlayout.widget.ConstraintLayout 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:padding="16dp"
    android:background="@drawable/bg_gradient"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@android:color/white"
        android:orientation="vertical"
        android:paddingStart="16dp"
        android:paddingTop="16dp"
        android:paddingEnd="16dp"
        android:paddingBottom="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.498"
        tools:layout_editor_absoluteX="69dp">


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/ic_quote" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/linearLayout"
        app:layout_constraintEnd_toEndOf="@+id/linearLayout"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

试试这个库(javadoc在这里),最小API级别是7:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

它提供了通过Theme、xml或java-code自定义小部件的能力。

使用起来非常简单。根据提升动作模式,有普通和迷你实现。

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

尝试编译演示应用程序。有详尽的例子:浅色和深色主题,使用ListView,在两个视图之间对齐。

似乎这个例子中最简洁的方法是:

使用相对布局 将相邻的2个视图一个放在另一个下面 将FAB对齐到父的右/端,并添加右/端边距 将FAB对齐到头部视图的底部,并添加一个负边距,即FAB大小的一半,包括阴影

例子改编自萨满国实现,使用任何你想要的FAB。假设FAB是64dp高,包括阴影:

<?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"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

最佳实践:

将编译'com.android.support:design:25.0.1'添加到gradle文件中 使用CoordinatorLayout作为根视图。 将layout_anchor添加到FAB并将其设置为俯视图 将layout_anchorGravity添加到FAB,并设置为:bottom|right|end

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

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

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

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

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

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

在AppCompat 22中,FAB支持旧设备。

在build.gradle(app)中添加新的支持库:

compile 'com.android.support:design:22.2.0'

然后你可以在你的xml中使用它:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

要使用elevation和pressedTranslationZ属性,需要namespace app,所以将这个namespace添加到你的布局中: xmlns:应用= " http://schemas.android.com/apk/res-auto "