约束布局：将一行中所有视图的高度设置为与最高视图匹配

Question

约束布局：将一行中所有视图的高度设置为与最高视图匹配

35

我试图使用ConstraintLayout（版本1.0.2）将两个并排视图的高度设置为它们中最高的那个。这可用作RecyclerView的ViewHolder，其中每个TextView都获得任意长度的文本...

如果我将每个设置为wrap_content，则较短的一个将缩小。如果我将两个都设置为0dp（match_contraints），则两者的高度都为0。

以下是设置：

<?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_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/id1"
        android:layout_width="60dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/id2"/>

    <TextView
        android:id="@+id/id2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/id1"
        app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.ConstraintLayout>

我认为这是一个bug，因为“0dp”应该更像match_parent而不是真正的0dp。

顺便说一下，在iOS上，相应的自动布局规则（将视图的高度设置为匹配父级的顶部和底部）会产生预期的结果。

当然，使用LinearLayout很容易实现这个功能，但这个布局是更大布局的一部分，我想简化视图层次结构…

- jazzgil

点击此处观看关于Barrier使用的帮助视频：https://youtu.be/Ngz5cgLC7m4?t=134。 - Kathir

5个回答

0

我已经使用LinearLayout完成了这个操作

父容器高度为wrap content
子元素高度为match parent
子元素宽度为0，且权重相同

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        >
<TextView
        android:layout_weight="1"
        android:id="@+id/id1"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:background="@color/green_400"
        android:text="11"
        android:textSize="50sp"
        />

<TextView
        android:layout_weight="1"
        android:id="@+id/id2"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:background="@color/cat_grey_lite"
        android:text="2222222222"
        android:textSize="50sp"
        />
</LinearLayout>

- GaRRaPeTa

1

我想在Constrainlayout中实现这个。 - karan

0

虽然这个方法有些棘手和慢，但它可以实现。

关键在于：

添加额外的“不可见”布局来测量高度。此布局具有wrap_content的高度属性，因此如果父容器足够大，它将会拉伸。
将可见布局的高度设置为0dp，这样它将填充父容器的其余部分。

如下面所示，在此我们有两个布局。隐藏的那一个是wrap_contents。

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

    <TextView
        android:id="@+id/view_1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#DDDDDD"
        android:text="@android:string/yes"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/view_2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_1_invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#DDDDDD"
        android:text="@android:string/yes"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/view_2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_2"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#DDDDDD"
        android:text="@android:string/httpErrorBadUrl"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/view_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_2_invisible"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="#DDDDDD"
        android:text="@android:string/httpErrorBadUrl"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/view_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Stanley Ko

0

这可能会对你有所帮助。

<android.support.constraint.ConstraintLayout
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:padding="@dimen/activity_vertical_margin"
        android:text="sjdjhshdjhdjhsdgfjhgsdjfgjsdgfjsdgfhgdsjhfghs"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:padding="@dimen/activity_vertical_margin"
        android:text="sjdjhsjhd"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

- S Haque

1

不起作用。也许是您的垂直填充隐藏了问题。 - jazzgil

无论如何，match_parent不受支持，被视为0dp，据我所知。 - jazzgil

我注意到，如果宽度固定为60dp，高度为match_parent，它就可以工作。 - S Haque

2

如果这个能够工作，我认为这只是因为两个孩子的身高匹配是他们父母中唯一的两个孩子。如果你有一个复杂的布局（如果你使用“ConstraintLayout”，那么什么时候不会呢？），这种方法就行不通了。 - spaaarky21

你应该使用Ctrl+K或Cmd+K来正确格式化你的源代码块。 - Eugene Brusov

不起作用，伙计。 - karan

-2

<TextView
    android:id="@+id/txt_service_request_id"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_id"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/txt_service_request_status"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/txt_service_request_status"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_status"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_service_request_id"
    app:layout_constraintEnd_toStartOf="@+id/txt_service_request_desc"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/txt_service_request_id"
    app:layout_constraintTop_toTopOf="parent" />


<TextView
    android:id="@+id/txt_service_request_desc"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_desc"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_service_request_id"
    app:layout_constraintEnd_toStartOf="@+id/txt_service_request_cat"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/txt_service_request_status"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/txt_service_request_cat"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/bg_rectangle_blue"
    android:gravity="center"
    android:padding="8dp"
    android:text="@string/service_request_cat"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_service_request_id"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/txt_service_request_desc"
    app:layout_constraintTop_toTopOf="parent" />

- Developine

我不理解。为什么这样做可以解决问题？我们都知道你的父级ConstraintLayout可能有固定尺寸。 - behelit

2

编辑：我找到了您的网站并可以看到完整的源代码。看起来你只是将其他视图与第一个视图的高度匹配。这仅在第一个视图大于其余视图时才有效，如果第二/第三个视图增长，则无效。 - behelit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PunitD · Accepted Answer

回答一下，以防将来有人寻找答案。

ConstraintLayout在v1.1中引入了Barrier，以实现问题中OP所要求的某些功能。

可以使用以下xml实现上述功能：

<?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_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <TextView
      android:id="@+id/id1"
      android:layout_width="60dp"
      android:layout_height="wrap_content"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintBottom_toBottomOf="@+id/barrier"
      app:layout_constraintVertical_bias="0.0"
      android:text="@string/id1_text" />

  <TextView
      android:id="@+id/id2"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintLeft_toRightOf="@+id/id1"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="@+id/barrier"
      app:layout_constraintVertical_bias="0.0"
      android:text="@string/id2_text" />

  <android.support.constraint.Barrier
      android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="bottom"
      app:constraint_referenced_ids="id1,id2" />

</android.support.constraint.ConstraintLayout>