Android如何将FloatingActionButton置于正确的位置？

Question

我正在尝试将FloatingActionButton放在地图上。我想在地图的“botton | right”位置放两个按钮，但效果不好。

这是我在设计上可以看到的，我想这样做。但是，在我将代码上传到手机后，我可以看到这些按钮不会停留在那里。

这是它在我的手机上的工作方式。 （对不起，图片太大..）

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

`<?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>`

我真的很感谢你的帮助！

Answer 1

当你设计任何屏幕时都有4.7英寸屏幕的Nexus 4手机。当您在更大的手机上运行时，您在该屏幕中看到的设计不会改变。并使用Constraint Layout而不是Linear或Relative布局，因为它在UI部分上为您提供了非常好的结果。

Answer 2

你的布局肯定过于复杂，但可能你应该这样做（注意fab的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>

Answer 3

这是关于你如何显示地图，实际上你的linearLayoutTmap存在于布局的末尾，但是在你创建地图之下，所以地图在linearLayoutTmap下面，其中包含浮动按钮。

你需要做的是把linearLayoutTmap放在RelativeLayout中，你必须提到linearLayoutTmap存在于右下方，此外你必须将LinearLayoutTemp宽度和高度更改为wrap_content而不是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>

Answer 4

试试这个

<?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>