Framelayout无法在真实设备上正确显示FAB

时间:2015-09-03 07:36:56

标签: android android-layout

Android Studio 1.4

您好,

我有以下用于生成结果的布局。但是,当我在真正的三星设备(480 x 800 4.3英寸)上运行时,FAB显示不正确并始终在图像下方。对于所有设备预览屏幕,Android Studio设计器始终显示正确。

<FrameLayout 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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#e5a9deed"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="168dp"
            android:alpha="0.9"
            android:scaleType="fitXY"
            android:src="@drawable/newgroupchat"/>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tilRoomName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/etRoomName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/roomNameHint"
                android:textAppearance="?android:attr/textAppearanceMedium"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tilNickName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/etNickName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/roomNickName"
                android:textAppearance="?android:attr/textAppearanceMedium"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tilPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/etPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/roomPassword"
                android:inputType="textPassword"
                android:textAppearance="?android:attr/textAppearanceMedium"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/tilWelcomeMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/etWelcomeMessage"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/welcomeMessage"
                android:textAppearance="?android:attr/textAppearanceMedium"/>
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabCreateRoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="140dp"
        android:src="@drawable/ic_plus"
        app:fabSize="normal"/>

</FrameLayout>

我一直试图调整这个并且无法提出任何解决方案。

Android Studio designer

enter image description here

Samsung real device

enter image description here

1 个答案:

答案 0 :(得分:1)

这是因为真实设备的屏幕底部没有导航栏,而您使用密度像素(dp)在FAB上使用绝对定位,所以&# 39;扔掉它。

考虑使用RelativeLayout将按钮放在图片下方,然后使用负边距将FAB放置在相对于图像的位置。

例如:

<RelativeLayout
    android:width="match_parent"
    android:height="wrap_content">

    <ImageView
        android:id="@+id/bannerImage"
        android:layout_width="match_parent"
        android:layout_height="168dp"
        android:alpha="0.9"
        android:scaleType="fitXY"
        android:src="@drawable/newgroupchat"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabCreateRoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/bannerImage"
        android:margin_top="-20dp"
        android:margin_right="20dp"
        android:gravity="right"
        android:src="@drawable/ic_plus"
        app:fabSize="normal"/>

</RelativeLayout>