【问题标题】:android button same height as textviewandroid按钮与textview相同的高度
【发布时间】:2017-06-26 01:36:44
【问题描述】:

我正在努力为应该如下所示的列表项创建 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>

【问题讨论】:

  • 为什么不能使用android:layout_height="match_parent" 作为按钮?这将使按钮的高度等于父高度。
  • 我不太明白你的意思......M
  • 鉴于您有一个自定义行,它是一种布局(实际上不管是哪一个)。使您的按钮与行一样高可以解决您的问题。这是因为这两个 TextView 显然一个对齐到顶部边框,另一个对齐到行的底部边框。或者,至少,我会这样做。这真的很简单
  • 我已经编辑了我的问题...也许我想得太复杂了..如果我使视图的边框可见而不是它们具有相同的高度,但是按钮顶部/底部边框不匹配textviews 的高度..它不是一条直线
  • 请注意嵌套布局不利于性能。一个 RelativeLayout 会导致更快的运行。

标签: android user-interface android-linearlayout android-relativelayout


【解决方案1】:

我推荐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”标签、“数量”标签和保持所有内容均匀分布的按钮的链。

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

希望有帮助!

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

    • 谢谢,但这不是重点..我知道如何使用自定义适配器等等....你读过我的问题吗?
    • 我已阅读您的问题...如果您知道如何创建自定义适配器,那么我认为创建与 textview 高度相同的按钮没有任何问题。你只需要使高度匹配它的父视图
    • 感谢您的快速回复,但我仍然卡住了..我已经编辑了我的问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-12-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-27
    • 1970-01-01
    相关资源
    最近更新 更多