[英]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.