标签: constraint-layout-chains

在ConstraintLayout我需要假设两个视图作为一个组并将该组中心水平放置在父级中，如下图所示：

这是我的 xml 代码：

<?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="match_parent"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintEnd_toStartOf="@id/view_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:text="View B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/view_a"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

我已经看过这个答案，但是当两个视图具有相同的宽度时它有效。我的视图宽度不一样，所以Guideline不起作用！

我怎样才能做到这一点？

我将约束布局（android.support.constraint.ConstraintLayout）用作XML文件中的主要布局。当我们得到布局的两个视图时（一个用于用户视图，第二个用于拖放视图并提供它们之间的关系）。但是我只得到一个完全空白的窗口，如下所示：-

在我的布局中使用任何视图时出现此错误。请检查下图

我的布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteY="25dp"
    tools:layout_editor_absoluteX="0dp">

    <ImageView
        android:id="@+id/image_shot"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="0dp" />

</android.support.constraint.ConstraintLayout>

我已经尝试过以下解决方案，但是对我来说不起作用，请检查我搜索过的链接

1.第一链接
2.第二链接
3.第三链接

请帮助我解决这个问题。谢谢

我正在创建一个对话框,其中两个按钮相对于父ConstraintLayout正确对齐.

一切都很好,直到按钮的文字变得很长.当其中一个或两个按钮的文本很长时,按钮会超出父级的边界,从而导致文本被剪切,如下图所示.我想处理文本较长的情况.

即期望的行为将是

• 文本很长时,按钮应该包装文本
• 按钮应保持在父级的范围内并遵循父级填充
• 按钮应保持与父对齐

当按钮文本很短时,布局按预期工作:

当按钮文本很长时:

• 取消按钮文本很长时,取消文本会被截断.发生这种情况是因为按钮本身被推过父母的边界.
• 当ok按钮的文本很长时,取消超出父边界的文本,因为按钮被推到父级边界之外.

布局代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/dialog_padding"
    android:paddingLeft="@dimen/dialog_padding"
    android:paddingRight="@dimen/dialog_padding"
    android:paddingTop="@dimen/dialog_padding">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dialog_text_margin"
        tools:text="Dialog title" />

    <TextView
        android:id="@+id/dialog_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dialog_text_margin"
        app:layout_constraintTop_toBottomOf="@id/dialog_title"
        tools:text="Dialog text content" />

    <Button
        android:id="@+id/cancel_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/ok_btn"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Dismiss" />

    <Button
        android:id="@+id/ok_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Accept" />
</android.support.constraint.ConstraintLayout>

我试过的事无济于事:

• 添加app:layout_constraintStart_toStartOf="parent"到取消按钮会导致按钮不再对齐,因此解决方案不正确
• 将关闭按钮的结束约束到接受按钮的开头会导致按钮不再对齐
• 使用layout_width="0dp"的按钮和使用app:layout_constrainedWidth="true"没有任何影响

我正在处理一个 Android 项目，我使用了ConstraintLayout.

我想将布局设计为两个保持水平线的块。每个块将获得 50% 的宽度：

我怎样才能做到这一点ConstraintLayout？

我在RecyclerView中有一个ViewHolder的XML布局.

此布局的根是ConstraintLayout,其高度设置为wrap_content.

在这个平面层次结构中,有3个文本视图和一个具有固定高度的图像视图; 考虑到:

<ConstraintLayout>
     <TextView height=wrap>
     <TextView height=wrap>
     <TextView height=wrap>
     <ImageView height=150dp>
</ConstraintLayout>

这是一个相对简单的布局.在beta4这是它的外观在设计(并最终在运行时,每个recyclerView细胞):

为"繁文缛节"道歉,但它是NDA等等.

话虽这么说,要素是:

3个文本视图(红色录制带有漂亮的紫色背景)高度为150dp的ImageView是灰色的.

紫色背景应用于根ConstraintLayout.一切都好.

现在这就是它的外观,不需要对Beta 5进行任何修改:

正如您所看到的,紫色(根)约束布局现在"混淆",并且不会像过去那样包装内容.

我试过的事情:

1. 添加app:layout_constraintHeight_default="wrap"到ConstraintLayout(并传播).没有什么区别.

2. ImageView有一个app:layout_constraintBottom_toBottomOf="parent"我试图删除的约束,也没有任何区别.

3. 恢复到beta4 :)

为了记录,这是完整的布局(由于相同的原因,id已被重命名为出于繁文缛节的原因而没有工具:文本或类似的).布局在其他方面完全相同.

<?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="wrap_content"
    android:background="@color/colorAccent">

    <TextView
        android:id="@+id/toplabel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text=""
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/top_bottom_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/top_right_label"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/top_right_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="end"
        android:maxLines="1"
        android:text=""
        app:layout_constraintBottom_toTopOf="@+id/top_bottom_label"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toRightOf="@+id/toplabel"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/top_bottom_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content" …

我不确定它是否是ConstraintLayout的错误,所以我试着询问是否有人知道我犯了什么错误.

我有一个布局,我想在屏幕上均匀分布3个元素.如下所示:

我在它们之间形成了水平链条,正如你所看到的,它们均匀分布并且工作良好.

现在我想在每个元素中放置一个图像和一个TextView,如下所示:

所以这就是我尝试做的,以元素1为例:

        <ImageView
            android:id="@+id/image1"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@drawable/image1"
            app:layout_constraintBottom_toBottomOf="@id/element_1"
            app:layout_constraintLeft_toLeftOf="@id/element_1"
            app:layout_constraintTop_toTopOf="@id/element_1"
            app:layout_constraintRight_toLeftOf="@+id/text1"
            app:layout_constraintHorizontal_chainStyle="packed"/>

        <TextView
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="2dp"
            android:text="@string/text1"
            app:layout_constraintBottom_toBottomOf="@id/element_1"
            app:layout_constraintLeft_toRightOf="@id/image1"
            app:layout_constraintRight_toRightOf="@id/element_1"
            app:layout_constraintTop_toTopOf="@id/element_1"
            app:layout_constraintHorizontal_chainStyle="packed"
            android:gravity="center_vertical"/>

可悲的是,它似乎"打破"了3个元素的链条.3个元素现在不会水平扩散,但包裹到非常小的尺寸:

如果我删除了ImageView和TextView之间的链,它可以正常工作.但后来我无法将ImageView和TextView置于元素中心.

有没有人遇到这样的事情？你是如何解决的？

现在,我知道我至少有两种方法可以解决这个问题:
(1)使用一个带有复合drawable的TextView,而不是ImageView + TextView;
(2)使用LinearLayout包装ImageView和TextView

但我想知道为什么它不起作用(这样我们可以更好地理解ConstraintLayout),而不是找到替代方案.

谢谢!

我正在寻求构建一个UI，以使其在横向显示滚动，并将按钮保持在屏幕的最底部并固定在页脚，但是在横向视图期间滚动之间应该有一定的距离。

任何帮助是极大的赞赏。

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

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline40PercentVertical"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.35" />


<TextView
    android:id="@+id/tvPageHeader"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:text="Your detail"
    android:textAlignment="center"
    android:textSize="25sp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tvLabelName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="name"
    android:textAlignment="viewEnd"
    app:layout_constraintRight_toLeftOf="@+id/guideline40PercentVertical"
    android:layout_marginRight="10dp"
    android:layout_marginTop="62dp"
    app:layout_constraintTop_toBottomOf="@+id/tvPageHeader" />

<TextView
    android:id="@+id/tvName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    tools:text="Mr. Ian Citizen"
    android:layout_marginLeft="10dp"
    app:layout_constraintLeft_toLeftOf="@+id/guideline40PercentVertical"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelName" />


<TextView
    android:id="@+id/tvLabelMobile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="mobile"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelName"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelName" />

<TextView
    android:id="@+id/tvMobile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="189232323"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvName"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelMobile" />



<TextView
    android:id="@+id/tvLabelEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="email"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelMobile"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelMobile" /> …

这是一个“如何做”的问题。

我在 ConstraintLayout 中有一个带有 6 个 ImageView 对象的 android 活动。我想将它们放在水平行中，始终使用屏幕的整个宽度。对于更大的屏幕，而不是 ImageViews 之间的空白空间，我希望 ImageViews 放大，保持它们的纵横比。我正在使用矢量资源作为图像的内容。

如何才能做到这一点？

这是我的代码

<?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"
android:background="@color/nav_and_action_bar_color"
 >

<ImageView
    android:id="@+id/some_person"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/some_person"
    app:layout_constraintBottom_toTopOf="@+id/et_username"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<EditText
    android:id="@+id/et_username"
    android:layout_width="@dimen/login_page_text_fields_width"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@android:color/white"
    android:hint="@string/email_hint"
    android:padding="10dp"
    app:layout_constraintBottom_toTopOf="@+id/et_password"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/some_person" />

<EditText
    android:id="@+id/et_password"
    android:layout_width="@dimen/login_page_text_fields_width"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@android:color/white"
    android:hint="@string/password_hint"
    android:inputType="textPassword"
    android:padding="10dp"
    app:layout_constraintBottom_toTopOf="@+id/login_button"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/et_username" />

<Button
    android:id="@+id/login_button"
    android:layout_width="@dimen/login_button_width"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@color/colorAccent"
    android:elevation="5dp"
    android:onClick="clickedOnLogin"
    android:text="@string/login_button"
    android:textColor="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/et_password" />
</android.support.constraint.ConstraintLayout>

结果我似乎得到了这个

我如何将元素组合在一起？我想让他们靠得很近。

我有一个带有ImageView的ConstraintLayout和带链样式的3个链式TextView:spread_inside

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/space_normal"
        android:paddingEnd="@dimen/space_normal"
        android:paddingStart="@dimen/space_normal"
        android:paddingTop="@dimen/space_big">

        <ImageView
            android:id="@+id/ivImage"
            android:layout_width="@dimen/feed_list_image_size"
            android:layout_height="@dimen/feed_list_image_size"
            android:layout_marginBottom="@dimen/space_normal"
            android:contentDescription="@null"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            tools:src="@color/debug_3" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/space_normal"
            android:ellipsize="end"
            android:maxLines="3"
            android:textSize="@dimen/text_size_big"
            app:layout_constraintBottom_toTopOf="@+id/tvContent"
            app:layout_constraintEnd_toStartOf="@+id/ivImage"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="spread_inside"
            app:textAllCaps="true"
            tools:text="@tools:sample/lorem" />

        <TextView
            android:id="@+id/tvContent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/space_big"
            android:layout_marginTop="@dimen/space_normal"
            android:ellipsize="end"
            android:maxLines="4"
            android:textColor="@color/gray_600"
            android:textSize="@dimen/text_size_normal"
            app:layout_constraintBottom_toTopOf="@+id/tvDate"
            app:layout_constraintEnd_toEndOf="@+id/tvTitle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvTitle"
            tools:text="@tools:sample/lorem/random" />

        <TextView
            android:id="@+id/tvDate"
            style="@style/AppTheme.ItemFeedList.Date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/space_normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvContent"
            tools:text="@tools:sample/date/hhmm" />

    </android.support.constraint.ConstraintLayout>

</android.support.design.card.MaterialCardView>

这在编辑器中呈现了一个漂亮而灵活的布局:

但有时顶视图被"推"出其约束,因此文本渲染是错误的(剪裁).这很奇怪,因为spread_inside链条样式应该膨胀并缩小中间视图.从布局检查器 …