如何在线性布局上并排布置元素并应用适当的间距和对齐

时间:2016-06-15 10:50:22

标签: android android-layout

我遇到了线性布局布局的问题,这些布局的元素并排在一起。 通过将元素放在TableView中,我可以使它们在线性布局中并排,但我无法对它们进行适当的对齐。 例如TextView1必须左对齐,其伙伴TextView2右对齐 即使我使用

,即使按钮也不会对齐
android:layout_alignParentRight="true"

我正在尝试创建一个收据活动,其中标题为" SubTotal"," tax"," Total"左对齐,其值与右对齐 下面是我的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。 它必须是并排的,但右侧的标题是正确的,而右侧的值是合理的也是正确的

enter image description here

到目前为止,这是最新发生的事情 使用下面的xml

enter image description here

2 个答案:

答案 0 :(得分:3)

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

<!-- 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允许我们根据他们的&#34;权重来组织子视图。看看这些例子:

<强> 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空格)

<强> 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>

答案 1 :(得分:2)

使用相对布局,你可以这样做,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/firsttext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="@string/hello_world" />

    <TextView
        android:id="@+id/secondtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="@string/hello_world" />

</RelativeLayout>

如果您想使用LinearLayout,您需要使用权重和权重进行textview。