Android-如何在ListView的背景上显示垂直线(并根据行高)? [英] Android - How to show a vertical line on the background of a ListView (and according to row height)?

问题描述

如何在背景上显示垂直线，例如下图中以蓝色突出显示的垂直线?

How to show a vertical line on the background, such as the one highlighted in blue on the image below?

在此示例中，我有一个包含ImageView元素(和TextView，但与该行无关)的ListView，并且我希望这些项目的背景上有一条垂直线，以使它们感觉像是连接"到每个项目一个.

In this example, I have a ListView with ImageView elements (and TextView, but it is not related to the line), and I want a vertical line on the background of these items to feel like they are "connected" to each one.

此外，请注意，垂直线并不会填充所有背景.

And also, note that the vertical line does not fill all the background.

垂直线在左侧，并且在所有情况下均不相等.有时它会填满所有行高(在大多数ListView行中)，有时它会填满一半的行高(在ListView的最后一项中，在顶部的ListView之外，在顶部，我们可以看到带有星形图标.)

The vertical line is on the left, and it is not equal for the all cases. Sometimes it fills all the row height (in most of ListView rows) and sometimes it just fills the half of row height (in the last item of the ListView and outside of the ListView, on the top, where we can see the big ImageView with the star icon).

已更新

我尝试了Hellboy提出的建议，它几乎可以很好地工作.我针对我的情况修改了建议的代码:

I tried the suggestion proposed by Hellboy, and it almost work perfectly. I modified the proposed code for my case:

<RelativeLayout 
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="15dp">

<View
    android:layout_width="4dp"
    android:layout_height="match_parent"
    android:background="#3399CC"
    android:gravity="center"
    android:layout_centerHorizontal="true"/>

<ImageView
    android:id="@+id/user_image"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:gravity="center"
    android:background="@android:color/holo_blue_light" >
</ImageView> 
</RelativeLayout>

RelativeLayout的width ="40dp"(与我使用的原始ImageView相同)，height ="match_parent(与他说的相同)，gravity =" center(使它们位于行高)和layout_marginLeft ="15dp"(在左边距留出一个空格).在ImageView中，我添加了marginTop ="10dp"和marginBottom ="10dp"，并显示了蓝色垂直线.但是我在同一行中有其他元素，所以我有一个父级布局(线性布局).我的父级布局是:

the RelativeLayout with the width="40dp" (the same as the original ImageView I was working with), height="match_parent (the same as he said), gravity="center" (to let them in the center of the row height) and layout_marginLeft="15dp" (to let a space to the left margin). In the ImageView, I added marginTop="10dp" and marginBottom="10dp", and with it, the blue vertical line appears. But I have other elements in the same row, so I have a parent layout (a linear layout). My parent layout is:

<?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:orientation="horizontal"
    android:gravity="center"
    android:id="@+id/linearlayoutservicerow">

因此，上面的父布局具有描述的RelativeLayout和其他LinearLayout以及其他行元素.但是该代码会产生展平图像.为什么会发生这种情况?似乎RelativeLayout将其高度视为ImageView的高度(40dp)，并确实将其marginTop和marginBottom视为图像，并以此将其展平.

So, this parent layout above, has the described RelativeLayout and other LinearLayout with the other row elements. But the code results in flattened images. Why does this happen?! It seems like the RelativeLayout consider its height as the ImageView height (40dp) and does consider its marginTop and marginBottom, and with this the image is flattened.

等待该问题的更多答案.我将尝试其他替代方法.

Waiting more answers to this problem. I'll try another alternatives.

推荐答案

您可以将ImageView替换为以下内容:

You can replace your ImageView with something like this:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/navy_blue"
        android:layout_centerHorizontal="true"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/image"/>
</RelativeLayout>

当然，在您的第一个元素和最后一个元素中，您需要操纵View的高度并将其与顶部或底部对齐

and of course in your first and last element you need to manipulate the height of the View and align it to Top or Bottom

这篇关于Android-如何在ListView的背景上显示垂直线(并根据行高)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！