【问题标题】:How to keep a floating button fixed to bottom right of screen and not fixed to the layout如何将浮动按钮固定在屏幕的右下角而不固定在布局上
【发布时间】:2020-01-15 09:10:35
【问题描述】:

我有一个可滚动的布局并添加了一个浮动菜单按钮。 这一切都有效,但按钮固定在布局上的某个位置,我希望按钮固定在屏幕底部。

如果用户上下滚动,按钮将固定在屏幕位置而不是布局上,换句话说,无论滚动视图在哪里,它始终保持在右下角

我读过,人们说要使用相对布局,但我确信我选择了约束布局,因为我希望布局是可滚动的。 我经常遇到的例子是:

android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"

任何指导将不胜感激

Floating_Menu.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/textview_share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="80dp"
        android:layout_marginBottom="156dp"
        android:background="#5C212121"
        android:padding="8dp"
        android:text="StockDetails"
        android:textColor="#000000"
        android:visibility="invisible" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="147dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:elevation="16dp"
        android:focusable="true"
        android:visibility="invisible"
        app:backgroundTint="#ffffff"
        app:maxImageSize="50dp"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_pound" />


    <TextView
        android:id="@+id/textview_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="82dp"
        android:layout_marginBottom="99dp"
        android:background="#60212121"
        android:padding="8dp"
        android:text="StockFigures"
        android:textColor="#000000"
        android:visibility="invisible" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="90dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:elevation="16dp"
        android:focusable="true"
        android:visibility="invisible"
        app:backgroundTint="#ffffff"
        app:maxImageSize="50dp"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_arrow" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="120dp"
        android:layout_height="100dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="32dp"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:elevation="16dp"
        android:focusable="true"
        android:visibility="visible"
        app:backgroundTint="#ffffff"
        app:maxImageSize="50dp"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_add" />
</RelativeLayout>

Activity Layout:(浮动菜单是底部的Include)

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:id="@+id/ScrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".StockEnquiry">


    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/StockCodeLayout"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/BarcodeLayout">

            <EditText
                android:id="@+id/StockCode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />

            <TextView
                android:id="@+id/StockCodetext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Stock Code" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/SupplierLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SoldLayout">

            <EditText
                android:id="@+id/supplier"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/supplierText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Supplier" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/TestLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="200dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SupplierLayout">
            <EditText
                android:id="@+id/test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/testext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Some Test Box" />
        </RelativeLayout>

        <include
            layout="@layout/floating_menu"
            android:layout_width="411dp"
            android:layout_height="0dp"
            android:layout_marginBottom="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

更新了 Afzal Khan 答案的变化:

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

<ScrollView

    android:id="@+id/ScrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/StockCodeLayout"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/BarcodeLayout">

            <EditText
                android:id="@+id/StockCode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />

            <TextView
                android:id="@+id/StockCodetext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Stock Code" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/SupplierLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SoldLayout">

            <EditText
                android:id="@+id/supplier"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/supplierText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Supplier" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/TestLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="200dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/SupplierLayout">
            <EditText
                android:id="@+id/test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/text_boarder"
                android:focusable="false"
                android:inputType="none"
                android:maxLines="1"
                android:padding="10dp"
                android:paddingLeft="5dp"
                android:singleLine="true" />
            <TextView
                android:id="@+id/testext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="7dp"
                android:background="#ffffff"
                android:text="Some Test Box" />
        </RelativeLayout>
    </android.support.constraint.ConstraintLayout>
</ScrollView>
    <include
        layout="@layout/floating_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</RelativeLayout>

【问题讨论】:

    标签: android android-layout android-constraintlayout


    【解决方案1】:

    实际上,您不应该将浮动操作按钮放在可滚动内容中,而应该将浮动操作按钮放在滚动视图之外,如下所示:-

    <RelativeLayout>
    .
    ... <ScrollView>
       ...Your Scroll View Content
       </ScrollView>
     <include
                layout="@layout/floating_menu"
                android:layout_width="411dp"
                android:layout_height="0dp"
                android:layout_marginBottom="10dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />
    </RelativeLayout>
    

    最好用约束布局代替相对布局

    【讨论】:

    • 谢谢你。这是有道理的,现在正在工作。我添加了一个相对布局作为顶部节点,并将滚动视图向下移动一个节点,将 ConstraintLayout 作为滚动视图的子节点,因为滚动视图上只能有一个直接子节点。结束了 scrollview 节点并包含了完成关闭 RelativeLayout 顶部节点的浮动菜单。完美的作品谢谢
    • 谢谢,这个解决方案很有效,很有意义。
    【解决方案2】:

    您必须使用RelativeLayout,如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".StockEnquiry">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
             <!--! Your other content here -->
    
        </ScrollView>
    
    
        <!--! Your menu here -->
        <View
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    </RelativeLayout>
    

    或者FrameLayout如下:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".StockEnquiry">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
             <!--! Your other content here -->
    
        </ScrollView>
    
    
        <!--! Your menu here -->
        <View
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    </FrameLayout>
    

    【讨论】:

      猜你喜欢
      • 2020-12-09
      • 1970-01-01
      • 2018-08-10
      • 2017-08-24
      • 2013-10-11
      • 1970-01-01
      • 2015-05-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多