如何在两个小部件/布局之间添加新的“浮动操作按钮”

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

比如这个粉红色的按钮：

在这里输入图像描述

我的问题听起来很愚蠢，我已经尝试了很多东西，但是把这个按钮放在两个布局的交叉点上的最好方法是什么？

在上面的例子中，这个按钮完全放在我们可以想像的ImageView和一个relativeLayout之间。

我已经尝试了很多调整，但我确信有一个正确的方法来做到这一点。

最佳实践：

  • 将compile '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>

似乎在这个例子中最干净的方式是：

  • 使用RelativeLayout
  • 将两个相邻的视图置于另一个之下
  • 将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>

FAB布局示例

您可以通过单击“文件”>“导入示例…”在Android Studio中导入Google的示例项目。

导入样本

此示例包含一个从FrameLayout继承的FloatingActionButton视图。

编辑使用新的支持设计库，你可以像这个例子一样实现它： https ： //github.com/chrisbanes/cheesesquare

使用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属性，需要名称空间app ，所以将此名称空间添加到布局中： xmlns:app="http://schemas.android.com/apk/res-auto"

现在它是官方设计支持库的一部分。

在你的gradle中： 

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

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

尝试这个库 （ javadoc在这里 ），最低的API级别是7： 

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

它提供了单个小部件，可以通过主题，XML或Java代码进行自定义。

光之间

这是非常简单的使用。 根据Promoted Actions模式，可以使用normal和mini实现。 

 <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 ， 两个视图之间对齐 。

这里是Android的一个自由的浮动动作按钮库 。 它有很多的自定义，需要SDK版本9和更高版本

在这里输入图像描述

完整的演示视频 

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

保持简单通过提供四舍五入的xml背景，使用TextView添加浮动操作按钮。 – 将编译com.android.support:design:23.1.1添加到gradle文件

  • 使用CoordinatorLayout作为根视图。
  • 在结束CoordinatorLayout之前引入一个textView。
  • 可绘制内画一个圆圈。

Circle Xml是 

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/colorPrimary"/> <size android:width="30dp" android:height="30dp"/> </shape>

布局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" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:weightSum="5" > <RelativeLayout android:id="@+id/viewA" android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1.6" android:background="@drawable/contact_bg" android:gravity="center_horizontal|center_vertical" > </RelativeLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="3.4" android:orientation="vertical" android:padding="16dp" android:weightSum="10" > <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" > </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Name" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:id="@+id/name" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="Ritesh Kumar Singh" android:singleLine="true" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Phone" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:id="@+id/number" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="8283001122" android:textSize="22dp" android:textColor="@android:color/black" android:singleLine="true" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="Email" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="ritesh.singh@betasoftsystems.com" android:textSize="22dp" android:singleLine="true" android:textColor="@android:color/black" android:padding="3dp" /> </LinearLayout> <LinearLayout android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:weightSum="4" android:orientation="horizontal" > <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:text="City" android:textSize="22dp" android:textColor="@android:color/black" android:padding="3dp" /> <TextView android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="3" android:text="Panchkula" android:textSize="22dp" android:textColor="@android:color/black" android:singleLine="true" android:padding="3dp" /> </LinearLayout> </LinearLayout> </LinearLayout> <TextView android:id="@+id/floating" android:transitionName="@string/transition_name_circle" android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="16dp" android:clickable="false" android:background="@drawable/circle" android:elevation="10dp" android:text="R" android:textSize="40dp" android:gravity="center" android:textColor="@android:color/black" app:layout_anchor="@id/viewA" app:layout_anchorGravity="bottom"/> </android.support.design.widget.CoordinatorLayout>

点击这里看它将如何

将此添加到您的gradle文件 

 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.0' compile 'com.android.support:design:23.0.1' }

这个给你的activity_main.xml 

 <android.support.design.widget.CoordinatorLayout 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/viewOne" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_blue_light" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewTwo" 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/floatingButton" 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/viewOne" app:layout_anchorGravity="bottom|right|end" app:backgroundTint="#FF0000" app:rippleColor="#FFF" /> </android.support.design.widget.CoordinatorLayout>

你可以在http://www.ahotbrew.com/android-floating-action-button/上找到android studio项目的完整例子。

Interesting Posts