带有居中文本的垂直线答案

【问题标题】：Vertical line with centered text带有居中文本的垂直线
【发布时间】：2017-05-24 02:03:29
【问题描述】：

我有以下 list_item.xml：

<?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:gravity="center_vertical"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/points_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="10dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/score_a"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/zero"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"/>

    <LinearLayout
        android:id="@+id/points_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_b"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/zero"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

这导致了这个视图：

但我想要类似的东西：

所以只是垂直边框顶部的文本，其中包含一些文本。

我找到了水平线的解决方案，但我无法采用它： Android : horizontal line with text in middle

【问题讨论】：

您可能需要制作一个由方框和垂直线组成的九个补丁可绘制对象。

标签： android

【解决方案1】：

使用此代码..没有Framelayout

将LinearLayout 与weightsum 属性一起使用

    <?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:background="@drawable/border"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">

    <LinearLayout
        android:id="@+id/points_a"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.9"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_a"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.2"
        android:orientation="vertical"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:weightSum="1">

        <View
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="0.20"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.6"
            android:background="@drawable/border"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />

        <View
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="0.20"
            android:background="@android:color/darker_gray" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/points_b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.9"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_b"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

在 res/drawable/border.xml 中：

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
    <corners android:radius="0dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

输出

【讨论】：

太棒了！只有一个问题：我怎样才能使盒子更小？
检查编辑的布局代码..我减少了layout_weight并添加了一些填充android:paddingLeft="6dp"

【解决方案2】：

将您的布局修改为：

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

    <LinearLayout
        android:id="@+id/points_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="10dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/score_a"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"/>

    <LinearLayout
        android:id="@+id/points_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_b"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

    <TextView
        android:textSize="20sp"
        android:text="0"
        android:background="@android:drawable/btn_default"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</FrameLayout>

您可以使用可绘制的形状作为视图的背景来编辑中间的文本。

<TextView android:text="Text" android:background="@drawable/border"/>

在你的drawable文件夹中可绘制border.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <solid android:color="@android:color/white" />
   <stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>

【讨论】：