如何在android中列表视图的列之间绘制垂直线

时间:2015-06-08 11:42:48

标签: android android-listview divider multiple-columns

这里我创建一个由多列列表视图组成的android应用程序。通过这个多列列表视图,我想通过在它们之间绘制一条垂直线来分隔每列的数据。任何人都可以告诉我如何在列表视图列之间绘制垂直线。提前谢谢

这是我的列表视图布局

<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="com.developer.milanandroid.AC_fuse_ckt" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_below="@+id/pager_sliding_tab_strip"
        android:weightSum="4" >

        <TextView
            android:id="@+id/txt_s.no"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp"
            android:text="sno"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/txt_test_point_name"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="100dp"
            android:text="Pointname"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/txt_Description"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="120dp"
            android:text="Description"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/txt_Range"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="110dp"
            android:text="Range"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/txt_Measurement"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="80dp"
            android:text="Result"
            android:textSize="20dp" />
    </LinearLayout>
    <View android:id="@+id/view_1"
          android:layout_width="match_parent"
          android:layout_height="1dp"
          android:background="#BDBDBD"
          android:layout_below="@+id/linearLayout1"/>

    <ListView
        android:id="@+id/listView_bc_fuse_ckt_tests"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:padding="20dp"

        android:layout_below="@+id/linearLayout1" >
    </ListView>

</RelativeLayout>

4 个答案:

答案 0 :(得分:1)

列表中没有太多列的一个技巧,每列具有固定大小,只是使用您用来划分标题的相同维度来划分列表项布局。

然后,在列表行的每一列之间,您可以

  • 添加宽度为1px的View和所需的分隔符颜色作为背景颜色
  • 或在左侧或右侧有边框的每个单元格上放置背景图片,可能使用9-patch
  • 或让LinearLayout为你完成工作!

第三个解决方案的一些细节: 将LinearLayoutandroid:orientation:"horizontal"一起使用。您可以使用android:layout_weight自定义单元格填充可用空间的方式,也可以将某些单元格设置为android:layout_width中指定的固定宽度。对于使用权重进行调整的单元格,android:layout_width应设置为wrap_content

然后,这里出现了神奇的属性:

<LinearLayout
    android:divider="@drawable/yourDividerDrawable"
    android:showDividers="middle"
/>

那就是它!

showDividers属性告诉LinearLayout使用divider属性中指定的drawable在项目之间自动绘制分隔符。 在这里,showDividers设置为middle,以便仅在项目之间绘制分隔符。其他可能的值允许在第一个项目之前或最后一个项目之后添加分隔符。

答案 1 :(得分:0)

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:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:weightSum="8" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="0.80"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="a" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="0.80"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="B" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1.20"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="C" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1.20"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="D" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1.30"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="E" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="0.70"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="F" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1.20"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="G" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="50dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="0.80"
            android:gravity="center"
            android:paddingLeft="@dimen/medium_padding"
            android:singleLine="true"
            android:text="H" />
    </LinearLayout>

</LinearLayout>

答案 2 :(得分:0)

您可以使用此

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:background="#000000"
        android:text="" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

    <TextView
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:background="#000000"
        android:text="" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

</LinearLayout>

我希望这会对你有所帮助

答案 3 :(得分:0)

一个非常简单的方法,不需要你改变你的行布局,就是将listview包装在FrameLayout中。在这种情况下,我从左边距放置了2行100dp和102 dp。

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1">

    <ListView
        android:id="@+id/myListView"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:cacheColorHint="#00000000"
        />

    <TextView
        android:layout_width="1dp"
        android:layout_marginLeft="100dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        />

    <TextView
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_marginLeft="102dp"
        android:background="@color/red"/>

</FrameLayout>