左右边框拉伸到高度的 Android ListView 行视图答案

【问题标题】：Android ListView row view with left and right border stretched to height左右边框拉伸到高度的 Android ListView 行视图
【发布时间】：2013-08-13 16:16:21
【问题描述】：

我有一个 Android ListView，我希望它包含一个带有单个 TextView 和文本 (titleTextView) 的行，并且我想要一个左 (leftCellBorder) 和右 (rightCellBorder) 边框图片被拉伸以填充行的高度。

行高取决于titleTextView 中有多少文本。如果文本溢出到第二行，则应垂直拉伸两个边框以填充边框的高度。

所以对于单行文本，行视图应该是这样的：

有两行文本，行视图应该是这样的：

我的 XML 的第一个版本是这样的：

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

     <ImageView
         android:id="@+id/leftCellBorder"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_alignParentBottom="true"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:layout_gravity="fill_vertical"
         android:adjustViewBounds="true"
         android:scaleType="fitXY"
         android:src="@drawable/cell_border_left" />

    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="210dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Title"
        android:textSize="30dp" />

    <ImageView
        android:id="@+id/rightCellBorder"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/cell_border_right" />

</RelativeLayout>

我认为将leftCellBorder 和rightCellBorder 的layout_height 设置为match_parent 足以确保它们被拉伸到正确的高度，但这不起作用，我得到的结果是如下：

即图像没有被拉伸以填充高度。

然后我回去尝试在根目录使用水平的LinearLayout 而不是RelativeLayout 并有3 个子视图。这实际上有效，并且左右边框被适当拉伸以填充高度，但是我遇到的问题是似乎没有办法将rightCellBorder 夹在右侧LinearLayout（除非我遗漏了什么）。

那么——我怎样才能达到我想要的效果呢？最好我想坚持使用RelativeLayout，因为这给了我更多的灵活性。当然这不应该这么难！

【问题讨论】：

标签： android android-listview

【解决方案1】：

线性布局绝对是您设计的更好布局选择（并且渲染速度更快）。您只需要使用 layout_weight 属性即可。

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

    <ImageView
        android:id="@+id/leftCellBorder"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/cell_border_left" />

    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="0dp" <!-- When assigning a weight, either the width or the height will be inferred from the weight depending upon your layouts orientation. Whichever will be inferred should be set to 0dp, it's more efficient. -->
        android:layout_height="wrap_content"
        android:layout_weight="1" <!-- If only one child has weight, it occupies all the remaining space. (As with real children.) -->
        android:gravity="center"
        android:text="Lorem Ipsum Dolor Sit Amet Consecteteur Adipiscing Elit"
        android:textSize="30dp" />

    <ImageView
        android:id="@+id/rightCellBorder"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/cell_border_right" />

</LinearLayout>

编辑：然而，最简单的解决方案是为您的背景可绘制对象创建一个 9-patch，放弃 ImageViews 并将其应用于您的 TextView；您可以简单地使用填充来确保文本保留在透明部分中......就像这样：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20dp" <!-- Use the padding to space the text from your sides -->
        android:paddingRight="20dp"
        android:background="@drawable/YOUR_9_PATCH"
        android:gravity="center"
        android:text="Lorem Ipsum Dolor Sit Amet Consecteteur Adipiscing Elit"
        android:textSize="30dp" />

</LinearLayout>

如果您想要/需要在 TextView 之外但在周围元素之前的空间，您可以在布局上使用填充...

【讨论】：

这实际上是一个很好的答案，我特别喜欢您使用 9patch 进行编辑。因为我想在最终应用程序中对我的背景应用一些填充，所以我决定将我的 9patch 放入 ImageView 并将其用作背景视图：<ImageView android:id="@+id/cellBorder" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:background="@drawable/cell_border" /> 唯一的问题是它仍然是 still i> 不填充RelativeLayout 高度！
看起来像一个困扰RelativeLayout的循环依赖... match_parent希望它的高度来自父级，但父级设置为wrap_content，因此存在冲突。我想我毕竟需要切换到LinearLayout！
@jon 是的，我发现我使用 RelativeLayouts 的主要目的是当我想要元素非线性定位时。如果我希望它们以相对大小线性定位，那么 LinearLayout 是最好的。另外，您不需要将 9-patch 放在 ImageView 中，我会为此放置布局代码...
最后，我只是将我的 9patch 直接放入我的 RelativeLayout 的 android:background 属性中，然后就完成了。太折腾了。理想情况下，我想在背景上应用一些填充，但现在我不能这样做......但实际上我的观点有点复杂，因为我为了这个问题而简化了，切换到 LinearLayout 也一样很多工作。
@jon Ahh...我想知道您为什么不切换，示例布局很简单，可以轻松地从头开始重做...好吧，只要解决方案有效，它就是可靠的！

【解决方案2】：

如果您想坚持使用RelativeLayout，请将 ImageViews 的属性更改为：

android:layout_height="wrap_content"
android:layout_alignTop="@+id/titleTextView"
android:layout_alignBottom="@+id/titleTextView"

并删除 alignParentTop、alignParentBottom 和 layout_gravity。

【讨论】：

【解决方案3】：

回到LinearLayout并尝试：

<ImageView
.
.
android:layout_weight="0"
>
<TextView
.
.
android:layout_weight="1"
>
<ImageView
.
.
android:layout_weight="0"
>

（确保所有视图上的 android:layout_width="wrap_content"）

【讨论】：