FloatingActionButton占据了屏幕的宽度

时间:2017-09-24 21:02:01

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

更多Android布局为Android新手造成的困境。我一直在努力学习android编程,并且在很大程度上它很容易(ish),最难的部分是布局。我现在有一个Tab布局是“主页”视图,在该视图中我需要一个浮动操作按钮。由于某种原因,浮动动作按钮占据了屏幕的整个宽度。按钮本身尺寸正确,但布局会切断屏幕底部。我已经按照一些教程进行了操作,无论我做什么,总是需要将整个宽度切断屏幕底部。从Android Studio在模拟器中运行的屏幕截图。 布局就在这里......

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="com.google.firebase.quickstart.auth.HomeActivity"
    android:orientation="vertical">
    <!--<android.support.design.widget.AppBarLayout-->
        <!--android:id="@+id/appbar"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:paddingTop="8dp"-->
        <!--android:theme="@style/AppTheme.AppBarOverlay">-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>
    <!--</android.support.design.widget.AppBarLayout>-->
    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:scaleType="center"
        android:padding="8dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="8dp"
        android:elevation="8dp"
        android:tint="@color/white"
        app:srcCompat="@drawable/ic_add"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primaryLightColor" />
</LinearLayout>

我正在用Fragments等填充视图,但我不认为那会是问题所在。任何人都可以看到为什么FloatingActionButton不浮动,而是充当完整的线性布局?非常感谢你的帮助。

enter image description here

2 个答案:

答案 0 :(得分:1)

使用坐标布局显示浮动操作按钮:

从XML代码中删除浮动操作按钮,您的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="info.androidhive.fab.MainActivity">


    <include layout="@layout/your_current_layout" /> // your current xml code layout

    <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:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

答案 1 :(得分:0)

您只需在家庭布局中添加FAB:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add"
        android:layout_gravity="bottom|end"/>