无法在两行中创建两个TextView

Question

This is rather a layman question as I am totally green in Android development.

Recently I am trying to implement a simple calculator using android.

I want to make two rows of calculator display, with the top one showing what equations the user has input, and the bottom one with the answer.

Here is my code in the layout xml file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<LinearLayout
    android:id="@+id/linearLayout0"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true">

    <TextView
        android:id="@+id/calculatorDisplay0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" 
    android:layout_below="@+id/linearLayout0" >

    <TextView
        android:id="@+id/calculatorDisplay1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_below="@id/calculatorDisplay0"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />
</LinearLayout>
     .
     .
     .
     .

However, this is the result:

As you can see, the two lines are nested together.

I am pretty sure something wrong with my code, but I cannot locate it. Could anyone help me on it?

Answer 1

There's no reason to use separate linear layouts for each of the text views - put them into one layout with vertical orientation, one after another:

<LinearLayout
    android:id="@+id/linearLayout0"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/calculatorDisplay0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/calculatorDisplay1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />
</LinearLayout>

Also, you have some unnecessary attributes, which I removed in y answer.

Answer 2

Instead of adding two LinearLayouts add one with two TextView and set orientation to vertical . Linear layout is the container for storing "linear" content, so one child just after another.

<LinearLayout
    android:id="@+id/linearLayout0"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:orientation="vertical">

    <TextView
        android:id="@+id/calculatorDisplay0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/calculatorDisplay1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_below="@id/calculatorDisplay0"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />
</LinearLayout>

Answer 3

尝试从linearLayout1删除android：layout_alignParentTop =“ true”并在其顶部添加边距。

Answer 4

android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"

Those are attributes in the second LinearLayout where you have explicitly declared that you want second TextView (content of the LinearLayout) to overlap with what already is at the top. I'm not sure but I think you would get the same without specifying layout_* attributes in that LinearLayout. On the second look it seams android:layout_below="@+id/linearLayout0" attribute was ignored. In any case, it was in conflict with layout_alignParentTop , watch out for that in the future.

The desired behavior you have described is typical for LinearLayout with android:orientation="vertical" attribute. You were on the right track. What you have to change is to move second TextView in the first LinearLayout, so it can see that it has two views to manage and add desired orientation attribute because default orientation is horizontal [1] .

Layout XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<LinearLayout
    android:id="@+id/linearLayout0"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/calculatorDisplay0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/calculatorDisplay1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_below="@id/calculatorDisplay0"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />

</LinearLayout>
     .
     .
     .
     .