Question

我为我的底页实现了以下布局：

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

到目前为止，这是我的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，它需要与你的标题具有相同的参数（padding，textSize）。

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

FAB的底板设计问题

1 个答案: