LinearLayout 无法正确对齐

Question

嗨，我想要一个像下面这样的布局

Main amount         120 usd
Extra charge        2   usd
----------------------------
Sub Total           122 usd
Discount             5  usd
----------------------------
Total amount        117 usd

我完全不熟悉约束布局我尝试对右侧部分使用 LinearLayout 重力/布局/对齐重力，但它不起作用，全部从左侧对齐。如果有人提供此布局的示例代码，我会很高兴.

更新：我当前的代码

<LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:text="Main Amount"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_width="wrap_content"
            android:gravity="left"
            android:layout_gravity="left"
            android:textAlignment="gravity"
            android:text="10 "
            android:layout_height="wrap_content" />
        <TextView
            android:layout_width="wrap_content"
            android:gravity="left"
            android:layout_gravity="left"
            android:textAlignment="gravity"
            android:text="USD"
            android:layout_height="match_parent" />
        </LinearLayout>

Answer 1

对于这种视图，使用带有 weightSum 属性的 LinearLayout 到父 LinearLayout 并使用 layout_weight 作为子 LinearLayout

<LinearLayout 
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:weightSum="4">

   <LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2">
       <TextView
         android:layout_width="wrap_content"
         android:text="Main Amount"
         android:layout_height="wrap_content" />
  </LinearLayout>
  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1">
        <TextView
            android:layout_width="wrap_content"
            android:gravity="left"
            android:layout_gravity="left"
            android:textAlignment="gravity"
            android:text="10 "
            android:layout_height="wrap_content" />
  </LinearLayout>
  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1">
        <TextView
            android:layout_width="wrap_content"
            android:gravity="left"
            android:layout_gravity="left"
            android:textAlignment="gravity"
            android:text="USD"
            android:layout_height="match_parent" />

   </LinearLayout>
</LinearLayout>

Answer 2

如果没有对子元素进行大量的 layout_width 硬编码，LinearLayout 将会很困难。你试过 TableLayout 吗？

https://developer.android.com/reference/android/widget/TableLayout

TableLayout 有时很难做到完美，但它会为您提供所需的布局。

Answer 3

你可以试试这样： 我使用 LinearLayout 作为父级并向其添加 RelativeLayout 以按照您想要的方式创建对齐 TextViews。 您可以复制相对布局来创建其余部分。 不确定这是否是最好的方法......但它有效

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Main" />

    <TextView
        android:id="@+id/amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/main"
        android:text="amount" />

    <TextView
        android:id="@+id/extra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Extra"
        android:layout_below="@+id/amount"
        />

    <TextView
        android:id="@+id/charge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/extra"
        android:layout_alignBottom="@+id/extra"
        android:text="charge" />

    <TextView
        android:id="@+id/usd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/main"
        android:layout_alignParentRight="true"
        android:text="usd"
        android:layout_marginRight="30dp"
        />

    <TextView
        android:id="@+id/num1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/main"
        android:layout_toLeftOf="@+id/usd"
        android:text="120"
        android:layout_marginRight="10dp"
        />

    <TextView
        android:id="@+id/usd2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/extra"
        android:layout_alignParentRight="true"
        android:text="usd"
        android:layout_marginRight="30dp"
        />

    <TextView
        android:id="@+id/num2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/extra"
        android:layout_toLeftOf="@+id/usd2"
        android:text="120"
        android:layout_marginRight="10dp"
        />

</RelativeLayout>

Answer 4

我相信对于这种布局，您最好使用ConstraintLayout。 构建此布局只需几分钟，您可以添加Guidelines 让您的生活更轻松。

此外，您的布局将响应所有屏幕尺寸，因此请考虑使用ConstraintLyaout

这是您想要使用ConstraintLyaout 的布局示例：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button6"
    app:layout_constraintStart_toStartOf="@+id/button"
    app:layout_constraintTop_toBottomOf="@+id/button3" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="4dp"
    android:text="Button"
    android:background="@color/bronze"
    app:layout_constraintBottom_toTopOf="@+id/button7"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

<Button
    android:id="@+id/button7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="@+id/button"
    app:layout_constraintTop_toBottomOf="@+id/button6" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintStart_toStartOf="@+id/button"
    app:layout_constraintTop_toBottomOf="@+id/button5" />

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button5"
    app:layout_constraintStart_toStartOf="@+id/button"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="4dp"
    android:text="Button"
    android:background="@color/bronze"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button4" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button" />

<TextView
    android:id="@+id/textView12"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/button7"
    app:layout_constraintEnd_toEndOf="@+id/textView11"
    app:layout_constraintTop_toTopOf="@+id/button7" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="@+id/textView11"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<TextView
    android:id="@+id/textView14"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="@+id/textView11"
    app:layout_constraintTop_toTopOf="@+id/button3" />

<TextView
    android:id="@+id/textView15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="@+id/button4"
    app:layout_constraintEnd_toEndOf="@+id/textView11"
    app:layout_constraintTop_toTopOf="@+id/button4" />
</android.support.constraint.ConstraintLayout>

看起来像这样：