[英]How to add floating action button on top of scrollview
我有一个浮动操作按钮,我想将其添加到滚动视图之上,以便该按钮保持不变,即使您滚动。 我希望它位于滚动视图的顶部和屏幕的右下角。 我需要使用哪些视图组合来完成此操作?
这是xml文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.nhscoding.safe2tell.STORIES"
android:background="@color/stor_back">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/pink_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_icon="@drawable/ic_add"
fab:fab_colorNormal="@color/fab_back"
fab:fab_colorPressed="@color/fab_pressed_back"
android:layout_gravity="end"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"/>
</LinearLayout>
<ScrollView
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.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card1_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title1"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
android:layout_below="@id/card_view1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card2_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
/>
<TextView
android:id="@+id/info_text2"
android:layout_marginTop="16dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view3"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
android:layout_below="@id/card_view2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card3_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
/>
<TextView
android:id="@+id/info_text3"
android:layout_marginTop="16dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card4_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title4"
/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="16dp"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card5_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title5"
/>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
</RelativeLayout>
在后面的孩子RelativeLayout
倾向于早期儿童漂浮在一个RelativeLayout
。
(我说“倾向于”是因为 Android 5.0 的elevation
东西也起作用了,它们之间的关系是不明确的)
所以,有一个浮动的操作按钮(FAB)漂浮在ScrollView
中RelativeLayout
,请确保ScrollView
之后它首先定义的XML,与FAB。 这不会影响 X/Y 规则,但它应该让 FAB 出现在 Z 轴上的ScrollView
上。
另一种可能性,如果您只支持 Android 5.0+,将使用android:elevation
本身来提高 FAB。
尝试这个:
android:layout_alignParentRight="true"
机器人:layout_alignParentBottom =“真”
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.nhscoding.safe2tell.STORIES"
android:background="@color/stor_back">
<ScrollView
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.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card1_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
android:layout_below="@id/card_view1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card2_title"
android:textSize="@dimen/card_title_size"
android:gravity="top" />
<TextView
android:id="@+id/info_text2"
android:layout_marginTop="16dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view3"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
android:layout_below="@id/card_view2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card3_title"
android:textSize="@dimen/card_title_size"
android:gravity="top" />
<TextView
android:id="@+id/info_text3"
android:layout_marginTop="16dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card4_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title4" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="16dp"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card5_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title5" />
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="10dp">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/pink_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_icon="@drawable/ic_add"
fab:fab_colorNormal="@color/fab_back"
fab:fab_colorPressed="@color/fab_pressed_back"
android:layout_gravity="end"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp" />
</LinearLayout>
</RelativeLayout>
相对布局作为基础。 在那个滚动视图中,然后是浮动操作按钮(将 alignParent Right 和 Bottom 设置为 true)。
<?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">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="Your content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="@drawable/ic_add"
android:layout_margin="16dp"/>
</RelativeLayout>
BR马蒂亚斯
您可以使用android.support.design.widget.CoordinatorLayout
作为父布局。 制作两个 xml 一个,您可以在其中设置滚动条或列表。 另一个是使用您的FloatingActionButton
保存整个信息的父容器。
活动_main.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:backgroundTint="@color/colorAccent"
app:pressedTranslationZ="12dp"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_add" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
你可以在这里放置你的滚动条。 它很容易。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:gravity="center"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context=".MainActivity">
<ScrollView
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.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card1_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
android:layout_below="@id/card_view1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card2_title"
android:textSize="@dimen/card_title_size"
android:gravity="top" />
<TextView
android:id="@+id/info_text2"
android:layout_marginTop="16dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view3"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius"
android:layout_below="@id/card_view2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card3_title"
android:textSize="@dimen/card_title_size"
android:gravity="top" />
<TextView
android:id="@+id/info_text3"
android:layout_marginTop="16dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="@dimen/card_margin_bottom"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card4_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title4" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="@dimen/card_margin_top"
android:layout_marginBottom="16dp"
android:layout_marginLeft="@dimen/card_margin_left"
android:layout_marginRight="@dimen/card_margin_right"
card_view:cardCornerRadius="@dimen/card_radius">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/card_title_top"
android:layout_marginBottom="@dimen/card_title_bottom"
android:layout_marginLeft="@dimen/card_title_left"
android:layout_marginRight="@dimen/card_title_right"
android:text="@string/card5_title"
android:textSize="@dimen/card_title_size"
android:gravity="top"
android:id="@+id/title5" />
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
</RelativeLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.