如何在线性布局上并排布置元素并应用适当的间距和对齐方式 [英] How to layout elements side by side on a Linear Layout and apply proper spacing and alignment

问题描述

我在将线性布局的元素并排在一起时遇到问题. 通过将元素放在TableView中，可以使它们在线性布局中并排放置，但是我无法对其进行适当的对齐. 例如TextView1必须向左对齐，其伙伴TextView2必须向右对齐 即使我使用，即使Button也不会向右对齐

I am having problem with layout of a Linear layout with elements that are side by side together. I can make them go side by side within a Linear layout by putting the elements inside a TableView but I cannot apply proper alignment to them. e.g. the TextView1 must be align left and its partner TextView2 is align right Even the Button wont align Right even if I use

android:layout_alignParentRight="true"

我正在尝试创建一个收据活动，其中标题"SubTotal"，"tax"和"Total"在左侧对齐，而其值在右侧对齐 下面是我的xml

I am trying to create a receipt activity where the caption "SubTotal", "tax","Total" are aligned to the left and their values aligned to the right Below is my xml

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

    android:paddingTop="20dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/app_bar_main"
    tools:context=".MainActivity"
    android:elevation=".5dp"
    android:focusable="true"
    android:layout_centerHorizontal="true">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="SAN AGUSTIN MUSEUM"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textViewTicketName"/>
    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="(Comes with Audio Guide)"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textViewTicketDesc"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border"
        android:orientation="vertical"
        android:gravity="bottom">



        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <TextView
            android:id="@+id/TblText1"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="Subtotal:"/>

        <TextView
            android:id="@+id/TblText11"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="$5.00"
            android:layout_alignParentRight="true"/>
        </TableRow>

        <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"

        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Subtotal $5.00"
        android:paddingLeft="0dp"
        android:layout_below="@+id/textViewTicketName"

        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textSubtotal"/>




        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Tax $0.50"
            android:paddingLeft="0dp"
            android:layout_below="@+id/textViewTicketName"

            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/textTax"/>

        <View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"

        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Total $5.50"
        android:paddingLeft="0dp"
        android:layout_below="@+id/textTotal"

        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/textViewTotalAmount"/>

    </LinearLayout>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" PURCHASE "
        android:id="@+id/hiaButton"
        android:onClick="hiaGetTicket"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentRight="true"

        android:textSize="18sp"
        android:textColor="@color/colorWhite"
        android:alpha="20"

        android:background="@drawable/buttonround"/>

</LinearLayout>
</ScrollView>

这就是我的目标.在xml中，有2个小计的文本字段，因为我正在尝试TablView. 它必须并排，但右侧的标题是右对齐的，而右侧的值也是右对齐的

This is what I am aiming for. In the xml there are 2 subtotal textfields because I was trying out the TablView. It must be side by side but the caption on the right side is justified right while the values on the right side is justified right also

到目前为止，这是正在发生的事情 使用下面的xml

So far this is whats happening using the xml below

推荐答案

使用layout_weight在两个视图之间创建一个空格.

Use layout_weight to create a space between two views.

<!-- Subtotal row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
orientation:"horizontal">

  <!--txt-->
  <TextView
  android:layout_width="120dp"
  android:layout_height="wrap_content"
  android:text="Subtotal"
  android:gravity="right"
  />

  <!-- empty space that will fill "subtotal" and "price", using layout_weight -->
  <View 
  android:layout_width="0dp"
  android:layout_weight="1"
  android:layout_height="1dp"/>

  <!-- price -->
  <TextView
  android:layout_width="20dp"
  android:layout_height="wrap_content"
  android:text="Subtotal"
  />

</LinearLayout>

---

layout_weight允许我们根据子视图的权重"来组织子视图.看那些例子:

---

layout_weight allows us to organize child views based on their "weight"s. Look at those examples:

1.示例

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
orientation:"horizontal"
android:weightSum="300" --> total sum of child's weight
>

<Button 
      android:layout_width="0dp"
      android:layout_weight="100" -> %33
      android:layout_height="1dp"
      android:text="Button1"
/>

<Button 
      android:layout_width="0dp"
      android:layout_weight="100" -> %33
      android:layout_height="1dp"
      android:text="Button2"
/>

<Button 
      android:layout_width="0dp" 
      android:layout_weight="100" -> %33
      android:layout_height="1dp"
      android:text="Button3"
/>

</LinearLayout>

预览:

____ Button1 ____ ____ Button2 ____ ____ Button3 ____ (相等的宽度，将有％1个空格)

____Button1________Button2________Button3____ (equal widths, and there will be %1 space)

2.示例

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
orientation:"horizontal"
android:weightSum="80" --> total sum of child's weight
>

<Button 
      android:layout_width="0dp"
      android:layout_weight="40" -> %50
      android:layout_height="1dp"
      android:text="Button1"
/>

<Button 
      android:layout_width="0dp"
      android:layout_weight="20" -> %25
      android:layout_height="1dp"
      android:text="Button2"
/>

<Button 
      android:layout_width="0dp" 
      android:layout_weight="20" -> %25
      android:layout_height="1dp"
      android:text="Button3"
/>

</LinearLayout>

预览:

________ Button1 ________ ____ Button2 ____ ____ Button3 ____ (第一个更大)

3.例如，您的情况

<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
orientation:"horizontal">

  <!--txt-->
  <TextView
  android:layout_width="120dp"
  android:layout_height="wrap_content"
  android:text="Subtotal"
  android:gravity="right"
  />

  <View 
  android:layout_width="0dp"
  android:layout_weight="777" --> this will fill empty space, we didn't specify weightSum, so it thinks weightSum is 777.
  android:layout_height="5dp"
  android:background="#ff0000"
  />

</LinearLayout>

这篇关于如何在线性布局上并排布置元素并应用适当的间距和对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！