如何对齐第一个元素填充所有可用空间的2个元素？

Question

我正在尝试创建以下布局，我遇到了一些困难：

难点在于让左边的Button填充右侧ImageButton未占用的所有可用空间。

这是我正在使用的axml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="center_vertical">
  <LinearLayout
      android:id="@+id/layout1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
      <Button
          android:background="@null"
          android:text="The Button Text"
          android:id="@+id/btnText"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent" />
  </LinearLayout>
  <ImageButton
      android:id="@+id/imgSettings"
      android:layout_toRightOf="@id/layout1"
      android:background="@null"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:src="@drawable/settings_light"
      android:layout_centerVertical="true" />
</RelativeLayout>

它看起来像这样：

如何使其显示在第一张图片中？

Answer 1

你可以这两种方式 - 第一种是线性布局。你给文本宽度为0dp，但是在第一次测量后用“layout_weight”属性告诉它留下任何空间。 Image占用了所需的空间，然后通过文本元素一直向右推送：

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <Button
      android:background="@null"
      android:text="The Button Text"
      android:id="@+id/btnText"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:gravity="left"
      />
  <ImageButton
      android:id="@+id/imgSettings"
      android:background="@null"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/settings_light"
      android:layout_centerVertical="true"
      android:layout_weight="0" />
</LinearLayout>

第二个是相对布局 - 你再次给文本宽度为0dp，但你告诉它将它的左边缘与父对齐，并且它与图像的右边缘。图像在右侧对齐，只占用所需的空间

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  <Button
      android:background="@null"
      android:text="The Button Text"
      android:id="@+id/btnText"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_toLeftOf="@+id/imgSettings"
      android:layout_alignParentLeft="true"
      android:gravity="left"
      />
  <ImageButton
      android:id="@id/imgSettings"
      android:background="@null"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/settings_light"
      android:layout_centerVertical="true"
      android:layout_alignParentRight="true" />
</RelativeLayout>

Answer 2

您应该包含android:layout_weight属性。使用此属性，同一布局中的元素按百分比共享空间。

所以将<Button>和<ImageButton>放在同一个<LinearLayout>中，这样他们就可以分享空间百分比。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="center_vertical">
  <LinearLayout
      android:id="@+id/layout1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
      <Button
          android:background="@null"
          android:text="The Button Text"
          android:id="@+id/btnText"
          android:layout_weight:".80"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent" />
      <ImageButton
          android:id="@+id/imgSettings"
          android:layout_toRightOf="@id/layout1"
          android:background="@null"
          android:layout_weight:".20"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentRight="true"
          android:src="@drawable/settings_light"
          android:layout_centerVertical="true" />
  </LinearLayout>
</RelativeLayout>