带有垂直颜色边框的Android列表视图答案

【问题标题】：Android listview with Color Border in vertical带有垂直颜色边框的Android列表视图
【发布时间】：2019-12-02 07:40:25
【问题描述】：

我一直在努力绘制垂直边框。我想使用 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("");

        }

代码结果。

底部的栏，

同样如此。

【问题讨论】：

感谢您提供有趣的谜题 :) 我发现了标题行为何如此之高 - 如果您愿意，请查看他的聊天记录
是的。非常有趣的是，除了你之外没有人能够破解解决方案，甚至我用谷歌搜索了几个但不能。也尝试使用gridview，但不能。在您的编码的帮助下纠正并获得所需结果的三个布局的高度的问题。我相信这些编码也会帮助许多其他人..
@0X0nosugar 如何在底部添加条以查看右侧内容？附在问题中的酒吧样本
由于 ListView 而不确定，但我会尝试将所有内容都放在 horizontal ScrollView
@0X0nosugar 谢谢你。如果你有，你能分享一下编码吗

标签： android-layout android-listview

【解决方案1】：

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

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

但是让我们假设您有不同数量的行。那么你的行布局必须包含相当严格的单元格，所以android:width="wrap_content" 不是大多数Views 的选项。

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

dimens.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>

...以及个人风格TextViews

<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>

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

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

图片显示了ListView占位符上方列表头的Android Studio预览

我更改了 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>

【讨论】：

我的列表视图工作正常，但我想在我的问题中提到的数据之间保持垂直和水平网格。您的答案仅显示水平。请建议
@Leace - 我的回答展示了如何使用形状可绘制对象获得网格结构。效果类似于 HTML 边框
在这种情况下，我应该有两个布局文件，一个用于列表标题，另一个用于列表行？还是应该在单一布局中进行组合？
@Leace - 如果您使用单个布局文件，您可能必须在运行时应用小的更改，例如标题字段“id3”具有白色背景，其他为灰色，而列表行项目都有相同的背景。我从标题布局广告开始，然后将其复制到另一个布局文件并稍作更改以获取行布局。重要的是保持标题和行布局的列宽值不变
list_header_foreground 缺少此信息？以及上面附加的列表标题结果。缺少什么

【解决方案2】：

根据用户 0X0nosugar 的建议，创建了三个布局。 1.main 布局 2.listheader 3.listrow 并按照建议应用剩余矩阵。现在工作正常

【讨论】：

【解决方案3】：

在适配器项目布局中使用视图作为边框。请改用回收站视图。

【讨论】：

您是否有任何示例编码，因为我尝试了许多编码但未能如愿回复。