android中的布局 - 如何制作3列？

Question

我试图创造这样的东西（颜色只是为了更好地理解，背景将是白色的）：

我的问题是包含两个TextView的3个框，一个在另一个下面。

到目前为止，这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <!-- row 1 -->
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="TextView0"
        android:textSize="24dp"
        android:padding="16dp"
        android:background="#3366ff"/>
    <!-- row 1 end -->

    <!-- row 2 -->

        <!-- col 1 -->
            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView1"
                android:background="#aaaaaa"
                />

            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView1A"
                android:background="#cccccc"
                />
        <!-- col 1 end -->

        <!-- col 2 -->
            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView2"
                android:background="#bbbbbb"
                />

            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView2A"
                android:background="#dddddd"
                />

        <!-- col 2 end -->

        <!-- col 3 -->
            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView3"
                android:background="#cccccc"
                />

            <TextView
                android:padding="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView3A"
                android:background="#eeeeee"
                />
        <!-- col 3 end -->

    <!-- row 2 end -->

</LinearLayout>

这是我不完整的代码的结果：

我正在试验LinearLayout和RelativeLayout。我完全不明白最后一个。

Answer 1

您可以尝试这样的事情：

将每列的两个textview放在LinearLayout（Vertical）下，最后将三个LinearLayouts放在Horizo​​ntal LinearLayout下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!-- row 1 -->

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#3366ff"
        android:padding="16dp"
        android:text="TextView0"
        android:textSize="24dp" />
    <!-- row 1 end -->


    <!-- row 2 -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3" >

        <!-- col 1 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#aaaaaa"
                android:padding="8dp"
                android:text="TextView1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#cccccc"
                android:padding="8dp"
                android:text="TextView1A" />
        </LinearLayout>
        <!-- col 1 end -->
        <!-- col 2 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#bbbbbb"
                android:padding="8dp"
                android:text="TextView2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#dddddd"
                android:padding="8dp"
                android:text="TextView2A" />
        </LinearLayout>
        <!-- col 2 end -->
        <!-- col 3 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#cccccc"
                android:padding="8dp"
                android:text="TextView3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#eeeeee"
                android:padding="8dp"
                android:text="TextView3A" />
        </LinearLayout>
    </LinearLayout>
    <!-- col 3 end -->

</LinearLayout>

使用重量来平衡所有三列线性布局。

截图：

希望这有帮助。

Answer 2

我们需要使用嵌套布局 布局应该有点像这样

       <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dip" >

        <TextView
            android:id="@+id/email"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />


        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
             <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </LinearLayout>
        </LinearLayout>

Answer 3

更改LinearLayout的方向以水平放置视图：

android:orientation="horizontal"

但是当没有更多空间时它将会中断，因为视图不会自动转到下一行。

要准确创建图片上的内容，请尝试

<LinearLayout>
<!--horizontal-->
   <LinearLayout>
   <!--vertical-->
      <TextView />
      <TextView />
   </LinearLayout>
   <!-- repeat while you need -->
</LinearLayout>

但你真的需要TextViews吗？在图片上，它看起来像标签......

Answer 4

您需要在一些布局中放置3个TextView

如果你想让3 TextView具有完全相同的宽度，你可能需要设置它们的重量

类似这样的事情

<!-- row 2 -->
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <!-- col 1 -->

    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView1"
            android:background="#aaaaaa"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView1A"
            android:background="#cccccc"
            />
    <!-- col 1 end -->
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    <!-- col 2 -->
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView2"
            android:background="#bbbbbb"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView2A"
            android:background="#dddddd"
            />

    <!-- col 2 end -->

    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    <!-- col 3 -->
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView3"
            android:background="#cccccc"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView3A"
            android:background="#eeeeee"
            />
    <!-- col 3 end -->

    </LinearLayout>
<!-- row 2 end -->
</LinearLayout>

Answer 5

你可以使用一个水平的LinearLayout，它有三个垂直的子布局（RelativeLayouts也可以，但我坚持使用LinearLayouts，因为你完全理解RelativeLayouts）。三个子布局中的每一个都包含该列的两个textview。我已在下面为一列实现了它，只需复制粘贴第一列的布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

<!-- row 1 -->
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="TextView0"
    android:textSize="24dp"
    android:padding="16dp"
    android:background="#3366ff"/>
<!-- row 1 end -->

<!-- row 2 -->
<LinearLayout 
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<!-- col 1 -->
        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView1"
            android:background="#aaaaaa"
            />

        <TextView
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView1A"
            android:background="#cccccc"
            />
    <!-- col 1 end -->
    </LinearLayout>

<!-- row 2 end -->
</LinearLayout>