在TextView之间添加分隔线

Question

我将尝试在Android Studio中重新创建以下布局：

因为我对Android的东西还很陌生，所以我首先尝试使用LinearLayout，但发现这可能不可能。现在我正在尝试使用RelativeLayout，我已经创建了这个带有颜色的块：

        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:background="@color/red_top">
        </RelativeLayout>

现在我想问如何将其分割，就像图1所示，顶部有1个栏，底部有2个栏，同一布局中如何放置相同的边框？

- HyperX

---

他说他需要它们在同一个布局中，bakriOnFire建议的TableLayout也很好。 - ClaireG

它在同一个父布局（线性）中，并且在其中进行了布局嵌套。 - Rishabh Srivastava

啊，是的，你说得对。我道歉。 - ClaireG

没关系...!!! 不需要道歉。 - Rishabh Srivastava

Answer 1

你可以使用以下xml代码来完成这个操作：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/custom_toast_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#CD96CD"
        android:text="TEXT" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000" />

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#CD96CD"
            android:text="TEXT" />

        <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#CD96CD"
            android:text="TEXT" />
    </LinearLayout>

</LinearLayout>

- Rishabh Srivastava

---

我该如何添加另一个带底线的文本视图，以便我能够像下面这样拥有： Text1 Text2 | Text3 Text4 如果我只尝试添加另一个文本视图，它会向右扩展到整个屏幕。 - HyperX

现在我有两个文本视图。我该如何添加另外两个，以便左侧显示：Wins: 0（2个文本视图），右侧显示Lost: 0（2个文本视图）？ - HyperX

看看你能不能通过settext这样的方法设置文本，像textview.settext("Wins: "+ no.of wins)一样，这样就可以节省一个额外的textview，或者你可以使用我下面发布的代码来实现。 - Rishabh Srivastava

Answer 2

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

<LinearLayout 
    android:id="@+id/FirstLinearLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/FirstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_ONE" />
</LinearLayout>
<LinearLayout
    android:id="@+id/SecondLinearLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/FirstLinearLayout"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/SecondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_TWO" />

    <TextView
        android:id="@+id/ThirdTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_Three" />
</LinearLayout>

首先，您需要一个容器来容纳所有组件；在我的示例中，我所说的容器是RelativeLayout。相对布局允许使用相应的ID将其子项放置在其位置上。看一下我如何使用android:layout_below="@+id/FirstLinearLayout"定位其他两个LinearLayout。

如果您坚持要在同一布局中拥有它们，请使用相对布局，并按以下方式定位TextView：

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


    <TextView
        android:id="@+id/FirstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_ONE" />


    <TextView
        android:id="@+id/SecondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FirstTextView"
        android:text="TEXT_TWO" />

    <TextView
        android:id="@+id/ThirdTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FirstTextView"
        android:layout_toRightOf="@+id/SecondTextView"
        android:text="TEXT_Three" />


</RelativeLayout>

希望这能帮到你。

- ClaireG

Answer 3

TableLayout 是实现您需求的最佳选择。

<TableLayout>
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="Text" />

    </TableRow>
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text" />

    </TableRow>
</TableLayout>

请注意第一个 TextView 中使用的 layout_span 属性，它可以跨越两列。

- bakriOnFire

Answer 4

您可以尝试使用以下方法添加额外的TextView：

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#CD96CD"
    android:text="TEXT" />

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#CD96CD"
        android:text="TEXT" />
     <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="#000000" />
     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#CD96CD"
        android:text="TEXT" />

    <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#CD96CD"
        android:text="TEXT" />
     <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="#000000" />
     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:background="#CD96CD"
        android:text="TEXT" />
</LinearLayout>

- Rishabh Srivastava

Answer 5

添加此视图，为您的文本视图之间绘制分隔线

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />

- elifekiz