Question

嗨，我想要一种波纹管式布局

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

我对约束布局完全不熟悉，我尝试在右侧部分使用LinearLayout重力/布局/对齐重力，但是它不起作用，全部从左对齐。如果有人为该布局plz提供示例代码，我将非常高兴

更新：我当前的代码

<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

对于这种视图，将LinearLayout具有 weightSum 属性用于父级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>

它看起来像这样：

LinearLayout无法正确对齐

4 个答案: