android 按钮与 textview 高度相同

Question

我正在为应该如下所示的列表项创建 UI：

我正在尝试为我的列表项构建类似上图的布局。但是，我被卡住了，因为我不完全知道如何嵌套视图，使销售按钮的高度与两个文本视图的高度相同。

如果我使用 RelativeLayout，我就不能再使用 layout_weight 属性来将视图水平均匀地放置在屏幕上。

但是，如果我使用 LinearLayout，则无法使用 alignTop 等相对属性。我试图以某种方式嵌套视图，以便实现此目的，但是到目前为止我还是失败了...（对不起，我的英语水平很差）

这是我目前的情况，但是我仍然无法得到想要的结果：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:padding="16dp">

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

        <TextView
            android:id="@+id/productname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="Google Pixel" />

        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/productname"
            tools:text="699$" />

        <TextView
            android:id="@+id/quantity_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            tools:text="Quantity" />

        <TextView
            android:id="@+id/quantity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/quantity_textview"
            android:layout_centerHorizontal="true"
            tools:text="31" />
    </RelativeLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        tools:text="SELL"
        android:layout_alignParentTop="true" />
</RelativeLayout>

Answer 1

尝试使用框架布局，使用它您可以根据需要对齐视图。或者您可以使用带有自定义适配器的列表视图来创建这种视图。可以参考这个link

http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

Answer 2

我会推荐 ConstraintLayout。这将允许您将按钮的顶部设置为限制在第一个文本视图的顶部，将按钮的底部设置为限制在第二个文本视图的底部，并保持从左到右的水平分布链.

这是我为了好玩而拼凑的一个例子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="0dp"
        android:text="TextView"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        tools:text="Google Pixel" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintLeft_toLeftOf="@+id/textView2"
        app:layout_constraintRight_toRightOf="@+id/textView2"
        tools:text="6995" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintLeft_toRightOf="@+id/textView2"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Quantity" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="32dp"
        android:text="TextView"
        app:layout_constraintLeft_toLeftOf="@+id/textView4"
        app:layout_constraintRight_toRightOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        tools:text="31" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="0dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintLeft_toRightOf="@+id/textView4"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        tools:text="Sell" />
</android.support.constraint.ConstraintLayout>

这会在预览中为您提供此布局：

这就是显示约束的预览图。您可以看到按钮被限制在两个视图（虚线），以及跨越 "Google Pixel" 标签、"Quantity" 标签和使所有内容均匀分布的按钮的链。

请注意，如果您希望按钮更小以缩小以匹配第二个文本视图的底部，则必须将按钮的 minHeight 属性设置为 0。您可能还必须替换默认背景如果您希望顶部和底部像素完美对齐，请点击按钮，因为默认背景可绘制对象具有一些内置填充。

希望对您有所帮助！

android 按钮与 textview 高度相同

android button same height as textview

user-interface

android

android-linearlayout

android-relativelayout