android按钮与textview高度相同 [英] android button same height as textview

问题描述

我正在努力为列表项创建UI，该列表项应如下所示:

I am struggling creating the UI for a list item which should look like this:

我正在尝试为清单项构建类似的布局，如上图所示.但是，由于我不完全知道，我被困住了，因为如何嵌套视图，以便使卖出按钮的高度与两个textview的高度相同.

I am trying to build a similar layout for my list items like in the picture above. However, I am stuck, because I don't exactly know, how to nest the views so the sell-buttons has the same height as both textviews.

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

If I use the RelativeLayout than I cannot use the layout_weight attribute anymore which position the views evenly horizontally on the screen.

但是，如果我使用LinearLayout，则无法使用alignTop等相对属性.我正在尝试以某种方式嵌套视图，以实现此目的，但是到目前为止，我仍然失败...(对我的英语能力很差表示歉意)

However, if I use the LinearLayout than I cannot use the relative-attributes like alignTop and so on. I am trying to nest the views in a way so I can achieve this, however I am failing so far... (sry for my poor english skills)

到目前为止，这是我所能获得的，但是我仍然无法获得理想的结果:

This is what I have so far, however I still cannot get the desired result:

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

推荐答案

我建议 ConstraintLayout .这将允许您将按钮的顶部设置为限制在第一个文本视图的顶部，将按钮的底部设置为限制在第二个文本视图的底部，并在水平方向上保持从左到右的均匀分布链.

I'd recommend ConstraintLayout. This will allow you to set the top of the button to be constrained to the top of first text view, the bottom of the button to be constrained to the bottom of the second text view, and maintain the even distribution left to right with a horizontal chain.

这是我为了娱乐而凑在一起的一个例子:

Here's a an example I just threw together for funsies:

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

这会在预览中为您提供以下布局:

This gives you this layout in the preview:

这就是预览显示约束的样子.您可以看到该按钮被限制在两个视图(虚线)中，并且遍布"Google Pixel"标签，"Quantity"标签和整个内容均匀分布的按钮.

And this is what the preview looks like showing the constraints. You can see the button being constrained to the two views (dashed lines), and the chain across the "Google Pixel" label, the "Quantity" label, and the button that keeps everything evenly distributed.

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

Note that if you want the button to be smaller to shrink down to match the bottom of the second text view, you have to set the button's minHeight attribute to 0. You'll probably also have to replace the default background of the button if you want pixel-perfect alignment of the top and bottom as the default background drawable has some built-in padding.

希望有帮助！

这篇关于android按钮与textview高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！