左右边框拉伸(stretch)到高度的Android ListView行 View

Question

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

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

因此对于单行文本，行 View 应如下所示:

对于两行文本，行 View 应如下所示:

我的 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 就足以确保它们被拉伸(stretch)到正确的高度，但这没有用，我得到的结果如下:

即图像未被拉伸(stretch)以填充高度。

然后我回头尝试在根部使用水平 LinearLayout 而不是 RelativeLayout 并有 3 个 subview 。这确实有效，并且左右边框被适当拉伸(stretch)以填充高度，但是我遇到的问题是似乎没有办法将 rightCellBorder 固定到右侧带有 LinearLayout(除非我遗漏了什么)。

那么——我怎样才能达到我正在寻找的效果呢？我最好坚持使用 RelativeLayout，因为这给了我更大的灵 active 。当然，这不应该这么困难!

Answer 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 补丁，放弃 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 之外但在周围元素之前的空间，您可以在布局上使用填充...