Android两列（列表视图）线性布局，左列自动宽度

Question

我的目标是通过标题（左），图（右）和进度条（下方）实现以下布局。

我希望标题描述在填充空格后不会在新行上断开，而不是向右溢出（图）。

我最接近的是使用GridLayout作为LinearLayout的子项。

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

    <!-- top row -->
    <GridLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:columnCount="2"
        android:paddingBottom="4dp"
        android:paddingTop="4dp">

        <TextView
            android:id="@+id/budget_listItem_title"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            tools:text="foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz"
            />

        <TextView
            android:id="@+id/budget_listItem_remaining"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            tools:text="1000"
            android:layout_gravity="end"/>

    </GridLayout>

        <ProgressBar
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progress="50"/>

</LinearLayout>

但是当描述太长时，它会将数字推离屏幕;

那么，忽略实际的样式/主题，实现这种布局的正确方法是什么？

Answer 1

试试这个布局：

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

    <TextView
        android:id="@+id/budget_listItem_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/budget_listItem_remaining"
        tools:text="foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz" />

    <TextView
        android:id="@+id/budget_listItem_remaining"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        tools:text="1000" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/budget_listItem_title"
        android:progress="50" />

</RelativeLayout>

我使用了相对布局，因为您可以通过名称来判断，它允许我们相对于彼此放置元素。在这个例子中，我们希望标题位于剩余值的左侧，并与父级左上角的边缘对齐。