底部 Sheet FAB 的设计问题

Question

我为我的底部实现了以下布局 sheet:

但我对实施不满意。我使用了一个不可见的虚拟工厂，以便标题可以与其对齐。可见的晶圆厂位于带有标题的布局之外。如果没有虚拟 fab，标题太长（有时）并且位于 fab 下方。如果没有虚拟工厂，我无法弄清楚如何获得这种布局。

这是我的 layout.xml 到目前为止：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

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

    <RelativeLayout
        android:id="@+id/titleLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/ColorPrimary">

    <TextView
        android:id="@+id/markerTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/bottom_sheet_navigation_dummy"
        android:layout_toStartOf="@+id/bottom_sheet_navigation_dummy"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:padding="@dimen/defaultPadding"
        android:maxLines="1"/>

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/bottom_sheet_navigation_dummy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_navigation_white_24dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:visibility="invisible"
            android:theme="@style/MenuButtonsStyle"/>

    </RelativeLayout>

    <TextView
        android:id="@+id/markerAdressLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/address"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerAdress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerTelephoneNumberLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/telephone"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerTelephoneNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerOpeningHoursLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/opening_hours"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerOpeningHours"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerWebsiteLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/website"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/markerWebsiteLabel2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="@string/more_information"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/markerWebsite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:textSize="14sp" />
</LinearLayout>

<com.github.clans.fab.FloatingActionButton
    android:id="@+id/bottom_sheet_navigation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/ic_navigation_white_24dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:theme="@style/MenuButtonsStyle"/>

任何人都可以为我的布局分享更智能的解决方案吗？提前致谢！

Answer 1

我会将带标题的 RelativeLayout 和标题本身从 LinearLayout 中取出，并使它们成为 Fab Button 的兄弟姐妹。

这样你就可以告诉 TextView 是 "layout_toLeftOf="@+id/bottom_sheet_navigation"。然后您需要确保文本的背景（您的 RelativeLayout）仍然一直向右延伸。不幸的是，为此您仍然需要一个不可见的虚拟对象 TextView，它需要与您的标题具有相同的参数（填充、文本大小）。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

    <!--Title background-->
    <RelativeLayout
        android:id="@+id/titleLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent">

        <!--Dummy Textview which is required to provide the correct height for the background
        "@id/titleLayout"
        It has the same parameters as ""@id/markerTitle""-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textStyle="bold"
            android:padding="@dimen/defaultPadding"
            android:maxLines="1"
            android:background="@color/colorAccent"
            android:visibility="invisible"/>

    </RelativeLayout>

    <!--The title with the correct allignment-->
    <TextView
        android:id="@+id/markerTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:padding="@dimen/defaultPadding"
        android:maxLines="1"
        android:background="@color/colorAccent"
        android:layout_toLeftOf="@+id/bottom_sheet_navigation"
        android:text="This is a super long title. 123456"/>

    <!--The info LinearLayout needs to be placed below the title-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/markerTitle"
        android:orientation="vertical">

        <!--...-->

    </LinearLayout>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/bottom_sheet_navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@drawable/ic_navigation_white_24dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:theme="@style/MenuButtonsStyle"/>
</RelativeLayout>

底部 Sheet FAB 的设计问题

Bottom Sheet Design Issue with FAB

android

android-layout

floating-action-button

bottom-sheet