简体   繁体   English

水平布局,TextViews左右对齐

[英]Horizontal layout with TextViews aligned to left and right

I have the following view structure: 我有以下视图结构:

------------------------------------
||------------||------------------||
||Text View 1 ||  Long Text View 3||
||------------||------------------||
||------------||------------------||
||Text 2      ||  View 4          ||
||------------||------------------||
------------------------------------

I want the following behavior: 我想要以下行为:

  1. Left column is aligned to the left 左列与左侧对齐
  2. right column is aligned to the right border as a group, but TextViews are aligned to the left. 右列作为一组与右边框对齐,但TextViews与左侧对齐。
  3. A column extends and takes space as long as enough space remains for other column. 只要剩余足够的空间用于其他列,列就会扩展并占用空间。
  4. If it is not enough space to fit both columns completely, horizontal space is divided 1/2 and text views wrap lines. 如果没有足够的空间来完全适合两列,则水平空间被划分为1/2,文本视图将换行。

I've almost achieved this with two vertical LinearLayouts nested into horizontal LinearLayout. 我几乎实现了这个,两个垂直LinearLayouts嵌套在水平LinearLayout中。 But #3 is not satisfied. 但#3并不满足。 If I set weight = 1 for both left and right columns they occupy 50% at most, even if there is more space. 如果我为左右列设置权重= 1,即使有更多空间,它们最多占用50%。

How can I achieve the desired layout? 如何实现所需的布局?

I have read Aligning textviews on the left and right edges in Android layout and other answers. 我已经在Android布局和其他答案的左右边缘阅读了对齐文本视图 Relativelayout does not work - in case of text overflow one column just overlaps another. Relativelayout不起作用 - 在文本溢出的情况下,一列只与另一列重叠。 Or if I specify "toTheRightOf" it first left column completely and then tries to fit right column ending with single char per line vertical text. 或者,如果我指定“toTheRightOf”,它首先完全离开列,然后尝试适合右列,每行垂直文本使用单个字符。

My xml: 我的xml:

    <LinearLayout
            android:orientation="horizontal"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
        <LinearLayout
                android:id="@+id/leftTopPanel"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="1dp"
                android:gravity="left"
                android:layout_weight="1">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="very very very long text "
                    style="@style/InfoTextStyle.Big"
                    android:id="@+id/leftTopText"/>
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"
                    style="@style/InfoTextStyle"
                    android:id="@+id/leftTopText2"/>
        </LinearLayout>
        <LinearLayout
                android:id="@+id/rightTopPanel"
                android:orientation="vertical"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="1dp"
                android:layout_weight="1"
                android:gravity="right"
                >
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Also very very very long text"
                    style="@style/InfoTextStyle"
                    android:id="@+id/rightTopText"
                    android:layout_gravity="left"/>
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Shorter text"
                    style="@style/InfoTextStyle"
                    android:id="@+id/rightTopText2"
                    android:layout_gravity="left"/>
        </LinearLayout>
    </LinearLayout>

This code is running for you... 此代码正在为您运行...

<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"
tools:context=".MainActivity" >

<RelativeLayout
    android:id="@+id/Sperator"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" >

</RelativeLayout>

<RelativeLayout
    android:id="@+id/FirstLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@id/Sperator" >

    <TextView
        android:id="@+id/tvFirstLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="TextView"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvFirstParagraph"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/tvFirstLabel"
        android:text="ASFDNASKLCFNLASKFKLACNKJCUKENFIWOCNAMSKLDJAIUEFBN" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/SecondLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@id/Sperator" >

    <TextView
        android:id="@+id/tvSecondLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="YourLongTextView"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvSecondParagraph"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/tvSecondLabel"
        android:text="ASFDNASKLsdfnjsacjsbnfsbfjhsbfjdsbfjhsbvfjhsbvfjbskCFNLASKFKLACNKJCUKENFIWOCNAMSKLDJAIUEFBN" />

</RelativeLayout>

ScreenShoot is ; ScreenShoot是;

在此输入图像描述

This is runnung.. Please try this.. 这是runnung ..请试试这个..

<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"
    tools:context=".MainActivity" >

    <RelativeLayout
            android:id="@+id/FirstLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:minWidth="100dp" >

            <TextView
                    android:id="@+id/tvFirstLabel"
                    android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="TextView"
            android:textSize="24sp" />

            <TextView
                    android:id="@+id/tvFirstParagraph"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@id/tvFirstLabel"
                    android:text="fasfdsfsdfsdcvzxfasd" />

    </RelativeLayout>

    <RelativeLayout
            android:id="@+id/Sperator"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/FirstLayout" >

    </RelativeLayout>

    <RelativeLayout
            android:id="@+id/SecondLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/Sperator"
            android:minWidth="100dp" >

            <TextView
                    android:id="@+id/tvSecondLabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:text="YourLongTextView"
                    android:textSize="24sp" />

            <TextView
                    android:id="@+id/tvSecondParagraph"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@id/tvSecondLabel"
                    android:text="ASFDNASKLsdfnjsacjsbnfsbfjhsbfjdsbfjhsbvfjhsbvfjbskCFNLASKFKLACNKJCUKENFIWOCNAMSKLDJAIUEFBN" />

    </RelativeLayout>

</RelativeLayout>

I hope this is help you :) 我希望这对你有所帮助:)

Ok, the following code works for me. 好的,以下代码适合我。 If you want to let panels grow more than 50% width replace android:layout_width="0dp" with android:layout_width="wrap_content" in two RelativeLayouts. 如果你想让面板增长超过50%,请在两个RelativeLayouts中用android:layout_width="wrap_content"替换android:layout_width="0dp"

    <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/relativeLayout">
        <RelativeLayout
                android:id="@+id/leftTopPanel"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginRight="1dp">
            <LinearLayout android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:orientation="vertical"
                          android:layout_alignParentLeft="true">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="very very very very text "
                        style="@style/InfoTextStyle.Big"
                        android:id="@+id/leftTopText"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="text"
                        style="@style/InfoTextStyle"
                        android:id="@+id/leftTopText2"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
                android:id="@+id/rightTopPanel"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content">
            <LinearLayout android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:orientation="vertical"
                          android:layout_alignParentRight="true">
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="long text"
                        style="@style/InfoTextStyle"
                        android:id="@+id/rightTopText"/>
                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Shorter text"
                        style="@style/InfoTextStyle"
                        android:id="@+id/rightTopText2"/>
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM