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

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

比如这个粉色按钮:

enter image description here

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

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

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

339320 次浏览
小开

尝试这个库 (Javadoc在这里)，最小API级别是7:

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

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

light between

.

使用起来非常简单。根据提升行动模式，有可用的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"
/>

尝试编译演示应用程序. xml文件。有一个详尽的例子:浅色和深色主题，使用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>

FAB Layout example

小开

您可以在Android Studio中导入谷歌的样例项目，点击File > import sample…

Import sample

这个示例包含一个FloatingActionButton视图，它继承自FrameLayout。

<强>编辑 使用新的支持设计库，你可以像下面这样实现它: https://github.com/chrisbanes/cheesesquare < / p >

小开
这是一个额外的自由Android浮动动作按钮库。 它有许多自定义，需要SDK版本9及更高

enter image description here

完整演示视频

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

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

在你的gradle里:

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

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html < a href = " http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html " > < / >

小开

在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" < / p >
小开
最佳答案

最佳实践:

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

enter image description here

<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>
小开

将此添加到您的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项目的完整示例

小开
保持简单 添加浮动动作按钮使用TextView通过给予圆形xml背景。 -添加compile com.android.support:design:23.1.1到gradle文件

  • 使用CoordinatorLayout作为根视图。
  • 在结束CoordinatorLayout之前引入一个textView。
  • 在Drawable中画一个圆。

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>

点击这里看看它会是什么样子

小开

这里是工作代码。

希望这可能有帮助。

XML代码。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">


<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_height="192dp"
android:layout_width="match_parent">


<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="@+id/toolbar"
app:titleEnabled="true"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
android:id="@+id/collapsingbar"
app:contentScrim="?attr/colorPrimary">


<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:id="@+id/toolbarItemDetailsView"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>


<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">


<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rktech.myshoplist.Item_details_views">
<RelativeLayout
android:orientation="vertical"
android:focusableInTouchMode="true"
android:layout_width="match_parent"
android:layout_height="match_parent">




<!--Put Image here -->
<ImageView
android:visibility="gone"
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="230dp"
android:scaleType="centerCrop"
android:src="@drawable/third" />




<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">


<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">


<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardMaxElevation="6dp"
app:cardUseCompatPadding="true">


<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:padding="3dp">




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




<TextView
android:id="@+id/txtDetailItemTitle"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="Title" />


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:orientation="horizontal">


<TextView
android:id="@+id/txtDetailItemSeller"
style="@style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Shope Name" />


<TextView
android:id="@+id/txtDetailItemDate"
style="@style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:gravity="right"
android:text="Date" />




</LinearLayout>


<TextView
android:id="@+id/txtDetailItemDescription"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="match_parent"
android:minLines="5"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="16dp"
android:text="description" />


<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="horizontal">


<TextView
android:id="@+id/txtDetailItemQty"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Qunatity" />


<TextView
android:id="@+id/txtDetailItemMessure"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:gravity="right"
android:text="Messure in Gram" />
</LinearLayout>




<TextView
android:id="@+id/txtDetailItemPrice"
style="@style/TextAppearance.AppCompat.Headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:gravity="right"
android:text="Price" />
</LinearLayout>


</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>
</RelativeLayout>


</android.support.constraint.ConstraintLayout>


</android.support.v4.widget.NestedScrollView>


<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:fabSize="normal"
app:layout_anchorGravity="bottom|right|end"
android:layout_marginEnd="@dimen/_6sdp"
android:src="@drawable/ic_done_black_24dp"
android:layout_height="wrap_content" />


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

现在如果你粘贴上面的代码。您将在您的设备上看到以下结果。 Result Image < / p >


提交答案