【问题标题】:Include Floating Action Button on top of ListView在 ListView 顶部包含浮动操作按钮
【发布时间】:2017-10-13 04:50:25
【问题描述】:

我正在尝试在我的一个布局中添加一个浮动操作按钮。我为浮动操作按钮创建了一个单独的布局,以包含在我的主布局中。但每当我包含它时,它都不在列表视图的顶部。

浮动操作按钮 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">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="23dp"
    android:layout_marginEnd="22dp"
    android:clickable="true"
    app:fabSize="mini"
    app:srcCompat="@android:drawable/ic_menu_add" />
    </RelativeLayout>

活动布局:

<LinearLayout 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:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:weightSum="1"
android:background="@color/BG_beige">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:orientation="horizontal"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="10dp">

    <TextView
        android:id="@+id/textView17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1.58"
        android:text="Name"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Price"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/textView19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.51"
        android:text="Paid"
        android:textSize="20sp"
        android:gravity="center"/>



</LinearLayout>

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<include
    layout="@layout/utility_fab"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

 </LinearLayout>

所以结果布局是这样的:

【问题讨论】:

    标签: android android-layout listview floating-action-button


    【解决方案1】:

    将您的布局包裹在 FrameLayout 中并应用 android:layout_gravity="bottom"

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <include
            layout="@layout/utility_fab"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom" />
    </FrameLayout>
    

    【讨论】:

    • 但是框架布局不会破坏我当前的定位吗?因为我使用线性
    • FrameLayout 仅用于对齐列表视图和浮动操作按钮...不会影响线性布局
    【解决方案2】:

    RelativeLayout 设置错误

    <RelativeLayout>
        <Your main layout/>
        <Fab button/>
    </RelativeLayout>
    

    目前您已经告诉 android 将 fab 按钮和父级 RelativeLayout 布局放在 listview 之后,我怀疑它在屏幕之外

    【讨论】:

      【解决方案3】:

      如果您想将一个组件放在另一个组件之上,您可以尝试使用 FrameLayout,例如在这里您可以找到示例(请参阅已接受的答案):

      How to show one layout on top of the other programmatically in my case?

      另一种选择是使用RelativeLayout(请参阅已接受的答案):

      how to put 2 layouts on top of each others

      更新:您可以尝试使用以下代码。可能您必须自己进行一些额外的设置,但这是一般的想法:

      <FrameLayout 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">
      
          <LinearLayout
          android:orientation="vertical"
          android:layout_height="match_parent"
          tools:context=".MainActivity"
          android:weightSum="1"
          android:background="@color/BG_beige">
      
          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="44dp"
              android:orientation="horizontal"
              android:paddingLeft="5dp"
              android:paddingRight="5dp"
              android:paddingTop="10dp">
      
              <TextView
                  android:id="@+id/textView17"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_weight="1.58"
                  android:text="Name"
                  android:textSize="20sp"/>
      
              <TextView
                  android:id="@+id/textView15"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:text="Price"
                  android:textSize="20sp"/>
      
              <TextView
                  android:id="@+id/textView19"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_weight="0.51"
                  android:text="Paid"
                  android:textSize="20sp"
                  android:gravity="center"/> 
          </LinearLayout>
      
          <ListView
              android:id="@+id/list"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />
       </LinearLayout>
      
      <include
          layout="@layout/utility_fab"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          />
      
      </FrameLayout>
      

      【讨论】:

      • 但是框架布局不会破坏我当前的定位吗?因为我使用线性
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-06-08
      • 1970-01-01
      • 2015-10-23
      • 1970-01-01
      • 2015-10-26
      • 2015-12-02
      • 1970-01-01
      相关资源
      最近更新 更多