繁体   English   中英

水平布局,TextViews左右对齐

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

我有以下视图结构:

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

我想要以下行为:

  1. 左列与左侧对齐
  2. 右列作为一组与右边框对齐,但TextViews与左侧对齐。
  3. 只要剩余足够的空间用于其他列,列就会扩展并占用空间。
  4. 如果没有足够的空间来完全适合两列,则水平空间被划分为1/2,文本视图将换行。

我几乎实现了这个,两个垂直LinearLayouts嵌套在水平LinearLayout中。 但#3并不满足。 如果我为左右列设置权重= 1,即使有更多空间,它们最多占用50%。

如何实现所需的布局?

我已经在Android布局和其他答案的左右边缘阅读了对齐文本视图 Relativelayout不起作用 - 在文本溢出的情况下,一列只与另一列重叠。 或者,如果我指定“toTheRightOf”,它首先完全离开列,然后尝试适合右列,每行垂直文本使用单个字符。

我的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>

此代码正在为您运行...

<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是;

在此输入图像描述

这是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>

我希望这对你有所帮助:)

好的,以下代码适合我。 如果你想让面板增长超过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