Android 如何将 FloatingActionButton 放在正确的位置？答案

【问题标题】：Android How to put a FloatingActionButton in right position?Android 如何将 FloatingActionButton 放在正确的位置？
【发布时间】：2019-07-13 05:48:56
【问题描述】：

我正在尝试在地图上放置一个 FloatingActionButton。我想在地图的“底部|右侧”位置放置两个按钮，但效果不佳。

这就是我在设计上看到的，我想做这样的。但是，在我将代码上传到手机后，我可以看到这些按钮并没有保留在那里。

这就是它在我的手机上的工作方式。（抱歉图片太大了..）

这是我的代码..请看一下

`<?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:orientation="vertical"   
tools:context="com.example.gpgpt.myapplication.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="110dp"
    android:orientation="vertical"
    android:background="@android:color/holo_blue_light"
    android:padding="10dp"
    android:id="@+id/search_layout"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="304dp"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="출발지" />
                <EditText
                    android:id="@+id/departure"
                    android:layout_width="200dp"
                    android:layout_height="wrap_content" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="도착지"
                    />
                <EditText
                    android:id="@+id/arrival"
                    android:layout_width="200dp"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="88dp"
                android:background="@android:color/holo_green_light"
                android:id="@+id/search"
                android:text="Search" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayoutTmap"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/navigate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="28dp"
        android:layout_marginBottom="15dp"
        android:clickable="true"
        app:srcCompat="@drawable/location" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/current_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="28dp"
        android:layout_marginBottom="65dp"
        android:clickable="true"
        android:layout_gravity="bottom|end"
        app:srcCompat="@android:drawable/ic_menu_compass" />
</LinearLayout>

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

非常感谢您的帮助！

【问题讨论】：

请参考Multiple floating action button这个链接。希望对您有所帮助。
你能贴一张你的布局图吗，这段代码看起来不错
@rawcoder064 谢谢！我去看看。
@Davi 哦，当然！我刚刚添加了一张图片。
使用 FrameLayout 而不是 Linear

标签： android xml floating-action-button

【解决方案1】：

试试这个

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context="com.example.gpgpt.myapplication.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:id="@+id/search_layout"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@android:color/holo_blue_light"
        android:orientation="vertical"
        android:padding="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="304dp"
                android:layout_height="match_parent"
                android:background="@android:color/holo_orange_light"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:text="출발지" />

                    <EditText
                        android:id="@+id/departure"
                        android:layout_width="200dp"
                        android:layout_height="wrap_content" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:text="도착지" />

                    <EditText
                        android:id="@+id/arrival"
                        android:layout_width="200dp"
                        android:layout_height="wrap_content" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/search"
                    android:layout_width="wrap_content"
                    android:layout_height="88dp"
                    android:background="@android:color/holo_green_light"
                    android:text="Search" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayoutTmap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="bottom"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/navigate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        app:srcCompat="@drawable/location" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/current_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        app:srcCompat="@android:drawable/ic_menu_compass" />
</LinearLayout>

【讨论】：

【解决方案2】：

这是关于如何显示地图，实际上您的linearLayoutTmap 存在于布局的末尾，但在其下方您正在创建地图，因此地图位于包含浮动按钮的linearLayoutTmap 之下。

你要做的就是把linearLayoutTmap放在RelativeLayout里面，你必须提到linearLayoutTmap存在于右下角，另外你必须把LinearLayoutTemp的宽度和高度改为@ 987654327@而不是match_parent，最后在fragment里面放一个RelativeLayout来显示使用它的地图，所以会是这样的：

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.mapwithmarker.MapsMarkerActivity" />

        <LinearLayout
            android:id="@+id/linearLayoutTmap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:gravity="bottom"
            android:orientation="vertical">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/navigate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginRight="28dp"
                android:layout_marginBottom="15dp"
                android:clickable="true"
                app:srcCompat="@drawable/location" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/current_location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginRight="28dp"
                android:layout_marginBottom="65dp"
                android:clickable="true"
                app:srcCompat="@android:drawable/ic_menu_compass" />

        </LinearLayout>

    </RelativeLayout>

【讨论】：

【解决方案3】：

您的布局肯定过于复杂，但也许您应该这样做（注意，Fabs 的 LinearLayout 父级更改为 ConstraintLayout）：

   <android.support.constraint.ConstraintLayout
        android:id="@+id/linearLayoutTmap"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/navigate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="28dp"
            android:clickable="true"
            app:layout_constraintBottom_toTopOf="@+id/current_location"
            app:layout_constraintEnd_toEndOf="parent"
            app:srcCompat="@drawable/location" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/current_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="28dp"
            android:clickable="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:srcCompat="@android:drawable/ic_menu_compass" />
    </android.support.constraint.ConstraintLayout>

【讨论】：

它运行不好...该应用程序在我运行后立即关闭。但非常感谢你帮助我！
请分享将地图放入布局的代码。可能有助于更好地了解问题所在。

【解决方案4】：

当您设计任何屏幕时都有 4.7 英寸屏幕的 Nexus 4 手机。当您在更大的手机上运行时，您在该屏幕上看到的设计不会改变。并使用约束布局而不是线性或相对布局，因为它可以在 UI 部分为您提供非常好的结果。

【讨论】：