首页 > 解决方案 > 带有垂直颜色边框的Android列表视图

问题描述

我一直在努力绘制垂直边框。我想使用 ListView 制作报告,其中结果被分成正方形并混合在一起。尝试了多个代码但不能,如果有人可以提出我的错误编码会很棒。

水平工作正常,而垂直不能。

即使是垂直的颜色也可以。

当前 Listview 出现如下: 在此处输入图像描述

预期的 Listview 格式如下:内容之间需要垂直和水平边框或网格。 在此处输入图像描述

布局: **

<?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="match_parent"
    android:background="#FFC7C7C7"
    android:orientation="vertical"
    android:divider="@drawable/mydivider"
    android:showDividers="middle"
    android:dividerPadding="22dp"
    android:weightSum="9">



    <LinearLayout
        android:id="@+id/lvcontainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_weight="0.5"
        android:background="#FFC7C7C7"
        android:orientation="horizontal"
        android:padding="1dp"
        android:weightSum="3">

        <TextView
            android:id="@+id/txtproductcompany"
            style="?android:dividerVertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.63"
            android:gravity="left"
            android:text="no"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductname"
            style="?android:dividerVertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.59"
            android:gravity="left"
            android:padding="3dp"
            android:text="number"
            android:textColor="#000000"
            android:textSize="9sp" />


        <TextView
            android:id="@+id/txtproductprice"
            style="?android:dividerVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="name"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductprice1"
            style="?android:dividerVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="sun"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductprice2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="mon"
            android:textColor="#000000"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/txtproductprice3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="tuesday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice4"
            android:layout_width="56dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="wednesday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice5"
            android:layout_width="45dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="thursday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice6"
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="saturday"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice7"
            android:layout_width="33dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="closed"
            android:textColor="#000000"
            android:textSize="13sp" />
        <TextView
            android:id="@+id/txtproductprice8"
            android:layout_width="21dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="calling"
            android:textColor="#000000"
            android:textSize="13sp"
            android:layout_weight="0.60" />
        <TextView
            android:id="@+id/txtproductprice9"
            android:layout_width="21dp"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="3dp"
            android:text="week"
            android:textColor="#000000"
            android:textSize="13sp"
            android:layout_weight="6.22" />
    </LinearLayout>


    <ListView
        android:id="@android:id/list"
        android:layout_height="0dp"
        android:layout_below="@+id/lvcontainer"
        android:layout_weight="8.72"
        android:layout_width="match_parent"
        android:divider="@drawable/separator_line"
        android:dividerHeight="4.0sp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        android:dividerPadding="10dp"
        android:layout_centerVertical="true"
        android:showDividers="beginning|middle|end"
        android:cacheColorHint="#00000000"
        android:footerDividersEnabled="true"
        android:headerDividersEnabled="true"


        ></ListView>


    <TextView
        android:id="@+id/txtresulttext"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@android:id/list"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:layout_weight="0.5"
        android:gravity="left"
        android:text=""
        android:textColor="#FFF55F54"
        android:textSize="20sp"
        android:textStyle="italic|bold"></TextView>




    <LinearLayout
        android:id="@+id/lvbottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="1">

        <Button
            android:id="@+id/btnupload"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#1083f5"
            android:gravity="center"
            android:text="UPLOAD"
            android:textColor="#ffffff"
            android:textSize="15sp"
            android:textStyle="bold"
            android:visibility="invisible" />
    </LinearLayout>

</LinearLayout>

**

我的控制器:

myList = controller.getAllProducts();
        if (myList.size() != 0) {
            ListView lv = getListView();
            ListAdapter adapter = new SimpleAdapter(import2.this, myList,
                    R.layout.display2, new String[]{ "id","number", "outletname","sunday", "tuesday" , "wednesday" ,"thursday", "saturday" , "monday","calling","closed"}, new int[]{
                    R.id.txtproductcompany,R.id.txtproductname,R.id.txtproductprice,R.id.txtproductprice1,R.id.txtproductprice2,R.id.txtproductprice3,R.id.txtproductprice4,R.id.txtproductprice5,R.id.txtproductprice6,R.id.txtproductprice7,R.id.txtproductprice8});
            setListAdapter(adapter);
            lbl.setText("");

        }

代码结果。 在此处输入图像描述

底部的酒吧,

像这样。 在此处输入图像描述

标签: android-layoutandroid-listview

解决方案


由于要显示由ListView行组成的表格,因此必须确保列在每行中需要相同的空间。

或者您采用另一种方法并使用TableLayout。如果您有固定数量的行,这将是更好的选择。

但是让我们假设您有不同数量的行。然后,您的行布局将必须由相当严格的单元格组成,因此对于大多数sandroid:width="wrap_content"来说不是一个选项。View

解决此问题的一种方法是为列使用一组维度值:

尺寸.xml

<resources>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="column_id_width">32dp</dimen>
    <dimen name="column_number_width">60dp</dimen>
    <dimen name="column_outletname_width">60dp</dimen>
    <dimen name="column_weekday_width">60dp</dimen>
    <dimen name="column_closed_width">48dp</dimen>
    <dimen name="column_calling_width">48dp</dimen>
    <dimen name="column_week_width">48dp</dimen>
    <dimen name="column_wednesday_width">76dp</dimen>
</resources>

...以及个人TextView风格

<style name="ListItemStyle" parent="TextAppearance.AppCompat.Body1">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">#000000</item>
    <item name="android:padding">4dp</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:background">@drawable/list_item_background</item>
</style>

形状可绘制为list_item_background

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <stroke android:color="#000000" android:width="1dp"/>
</shape>

列表标题:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:background="#aaaaaa"
    android:foreground="@drawable/list_header_foreground"
    android:layout_margin="2dp"
    android:weightSum="1">

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductcompany"
        android:layout_width="@dimen/column_id_width"
        android:layout_height="wrap_content"
        android:text="id3"
        android:background="#ffffff"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductname"
        android:layout_width="@dimen/column_number_width"
        android:layout_height="wrap_content"
        android:text="number"/>


    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="outletname"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice1"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="sunday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice2"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="monday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice3"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="tuesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice4"
        android:layout_width="@dimen/column_wednesday_width"
        android:layout_height="wrap_content"
        android:text="wednesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice5"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="thursday"/>

    <!-- friday is missing on purpose? -->

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice6"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="wrap_content"
        android:text="saturday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice7"
        android:layout_width="@dimen/column_closed_width"
        android:layout_height="wrap_content"
        android:text="closed"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice8"
        android:layout_width="@dimen/column_calling_width"
        android:layout_height="wrap_content"
        android:text="calling"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice9"
        android:layout_width="@dimen/column_week_width"
        android:layout_height="wrap_content"
        android:text="WEEK1"/>
</LinearLayout>

最后同样重要的是,列表行

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_margin="1dp"
    android:weightSum="1">

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductcompany"
        android:layout_width="@dimen/column_id_width"
        android:layout_height="match_parent"
        android:text="13" />

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductname"
        android:layout_width="@dimen/column_number_width"
        android:layout_height="match_parent"
        android:text="9003562"/>


    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:text="1rmarket"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice1"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Sunday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice2"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Monday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice3"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Tuesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice4"
        android:layout_width="@dimen/column_wednesday_width"
        android:layout_height="match_parent"
        android:text="Wednesday"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice5"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="Thursday"/>

    <!-- friday is missing on purpose? -->

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice6"
        android:layout_width="@dimen/column_weekday_width"
        android:layout_height="match_parent"
        android:text="No"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice7"
        android:layout_width="@dimen/column_closed_width"
        android:layout_height="match_parent"
        android:text="Yes"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice8"
        android:layout_width="@dimen/column_calling_width"
        android:layout_height="match_parent"
        android:lines="2"
        android:text="0001\nDaily"/>

    <TextView
        style="@style/ListItemStyle"
        android:id="@+id/txtproductprice9"
        android:layout_width="@dimen/column_week_width"
        android:layout_height="match_parent"
        android:text="WEEK1"/>
</LinearLayout>

注意:如果您希望绿框覆盖子项,则可以在列表标题中使用android:foreground带有的属性。另一个类似于list_item_background的可绘制形状可以解决问题。LinearLayoutView

另请注意,由于我不知道您的确切要求,因此我只留下了一些与分隔符相关的属性。如果基于形状可绘制的方法解决了您的问题,您可能希望摆脱它们。

图为ListView占位符上方列表头的Android Studio预览

设计视角中 ListView 上方的列表标题草图

我更改了 Activity 布局以使用更少的布局权重,并且所有内容都设置为android:visibility="visible"确保它们都适合屏幕:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#FFC7C7C7"
    android:divider="@drawable/mydivider"
    android:dividerPadding="2dp"
    android:orientation="vertical"
    android:showDividers="middle"
    android:weightSum="1">

    <include
        android:id="@+id/lvcontainer"
        layout="@layout/list_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFC7C7C7" />

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_weight="1"
        android:cacheColorHint="#00000000"
        android:divider="@drawable/separator_line"
        android:dividerHeight="4.0sp"
        android:dividerPadding="10dp"
        android:footerDividersEnabled="true"
        android:headerDividersEnabled="true"
        android:orientation="vertical"
        android:showDividers="beginning|middle|end" />

    <TextView
        android:id="@+id/txtresulttext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:gravity="left"
        android:text=""
        tools:text="result"
        android:textColor="#FFF55F54"
        android:textSize="20sp"
        android:textStyle="italic|bold" />


    <LinearLayout
        android:id="@+id/lvbottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">

        <Button
            android:id="@+id/btnupload"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#1083f5"
            android:gravity="center"
            android:text="UPLOAD"
            android:textColor="#ffffff"
            android:textSize="15sp"
            android:textStyle="bold"
            android:visibility="visible" />
    </LinearLayout>

</LinearLayout>

推荐阅读