MaterialDesignLibrary 浮动按钮

Question

我正在将一个旧的现有应用程序更新为仅 4+，并试图引入一种 Material 为 < Lollipop 设计的风格。为此，我使用 MaterialDesignLibrary 添加一些元素 - 特别是浮动按钮。

浮动按钮显示正常，连同其动画，但我无法正确显示其底部位置。

尽管建议将组件放在屏幕的右下角，但我试图将组件放在容器包装器的右下角......正确的定位工作正常，但是底部定位似乎取自错误的元素。

这是我在屏幕中的 xml 部分：

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dip"
        android:layout_marginRight="20dip"
        android:layout_marginTop="10dip" >

        <RelativeLayout
            android:id="@+id/llFeelingContainer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/light_background"
            android:baselineAligned="true"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tvFeelingTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="3dip"
                android:paddingLeft="5dip"
                android:textSize="16sp" />

            <View
                android:id="@+id/vSeparatorTop"
                android:layout_width="match_parent"
                android:layout_height="1dip"
                android:layout_below="@id/tvFeelingTitle"
                android:background="@color/material_lightgreen_100" />

            <LinearLayout
                android:id="@+id/llCircleContentHolder"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_below="@id/vSeparatorTop"
                android:baselineAligned="false"
                android:orientation="horizontal"
                android:paddingBottom="5dip"
                android:paddingTop="3dip" >

                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:gravity="center"
                        android:text="pain"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.app.prohealth.extras.CircleDisplay
                        android:id="@+id/circlePain"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/circle_0"
                        android:gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:gravity="center"
                        android:text="energy"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.app.prohealth.extras.CircleDisplay
                        android:id="@+id/circleMood"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/circle_0"
                        android:gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="4dp"
                        android:gravity="center"
                        android:text="mood"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <com.app.prohealth.extras.CircleDisplay
                        android:id="@+id/circleEnergy"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/circle_0"
                        android:gravity="center" />
                </LinearLayout>
            </LinearLayout>

            <View
                android:id="@+id/vSeparatorBottom"
                android:layout_width="match_parent"
                android:layout_height="1dip"
                android:layout_below="@id/llCircleContentHolder"
                android:background="@color/material_lightgreen_100" />

            <TextView
                android:id="@+id/tvFeelingSubTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/vSeparatorBottom"
                android:paddingBottom="3dip"
                android:paddingLeft="5dip"
                android:text="How are you feeling now?"
                android:textSize="16sp" />
        </RelativeLayout>

        <com.gc.materialdesign.views.ButtonFloat
            android:id="@+id/buttonFloat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginTop="20dp"
            android:background="#1E88E5"
            materialdesign:animate="true"
            materialdesign:iconDrawable="@drawable/fab_ic_add" />
    </FrameLayout>

这是浮动按钮出现位置的截图，以及它应该出现的位置：

您会在代码中看到我尝试了负边距和填充，但我尝试过的都没有任何效果。

浮动按钮应与 tvFeelingSubTitle 的底部对齐；出了什么问题？

更新 mistwalker 的建议 奏效了 ，因为按钮现在与底部对齐。但是，它会扩展底部容器的高度以匹配按钮的高度：

我尝试了该建议的多种不同变体，要么将按钮压扁以适应固定高度的容器，要么完全覆盖内容。

我想要创建的布局更像这样：

也许这是不可能的，我在浪费我和你的时间...

你怎么看？

Answer 1

尝试将

android:layout_below="@id/vSeparatorBottom" android:align_baseline=@id/tvFeelingSubTitle android:alignParentRight="true"

并删除边距属性加上 alignParentBottom 属性。

应该就可以了。

添加：关于你的第二个问题 - 你看到的是因为你的浮动操作按钮（FAB）在你的 RelativeLayout 里面。取而代之的是将 FrameLayout 作为最外层的父级，将 RelativeLayout（减去 FAB）和 FAB 作为兄弟。然后调整 FAB 上的样式，使其位于 FrameLayout 的右下角 layout_gravity=bottom|right 以及您可能想要添加的任何边距。

MaterialDesignLibrary 浮动按钮

MaterialDesignLibrary FloatButton

android

android-layout