标签: constraint-layout-chains

是否有可能在约束布局上实现负边距以实现重叠？我试图让一个图像以布局为中心,并有一个文本视图,使其重叠x x dp.我尝试设置负保证金值,但没有运气.如果有办法实现这一目标会很棒.

如何在约束布局中垂直对齐和居中对象？可以垂直或水平对齐,但除了限制两个网格线之间的视图之外,我还没有找到同时居中的方法.

垂直对齐中心:

似乎居中是约束布局的一个巨大问题,迫使我回到"centerInParent","centerVertical"和"centerHorizo​​ntal"的相对布局.

我想使用约束布局创建红色框的布局:

不幸的是,我发现不使用两个网格线的唯一方法是使用嵌套的Relative和LinearLayouts(Constraint Layout应该解决这个确切的场景!).

使用相对和线性布局的布局:

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    app:layout_constraintTop_toBottomOf="@id/user_points"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <LinearLayout
        android:id="@+id/stat_1_layout"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/divider_1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/stat_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal"
            android:text="10"
            android:textSize="16dp"
            android:textColor="@color/textSecondaryDark"
            android:maxLines="1"/>

        <TextView
            android:id="@+id/stat_detail_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="Streak"
            android:textSize="8sp"
            android:textColor="@color/textSecondary"
            android:maxLines="1"/>
    </LinearLayout>

    <View
        android:id="@+id/divider_1"
        android:layout_width="1dp"
        android:layout_height="38dp"
        android:layout_toLeftOf="@+id/stat_2_layout"
        android:background="@drawable/linedivider"/>

    <LinearLayout
        android:id="@+id/stat_2_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="18dp"
        android:layout_centerInParent="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/stat_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal"
            android:text="243"
            android:textSize="16dp"
            android:textColor="@color/textSecondaryDark"
            android:maxLines="1"/>

        <TextView
            android:id="@+id/stat_detail_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="Calories Burned"
            android:textSize="8sp"
            android:textColor="@color/textSecondary"
            android:maxLines="1"/>
    </LinearLayout> …

当我在Android Studio中使用布局编辑器时,我尝试使用约束锚点在EditText 视图和按钮 视图之间建立链(双向约束),但它不会产生链.

如果我尝试将一个视图约束到另一个视图,它只会产生约束.

我试图将EditText的右侧链接到Button的左侧.

这就是我的布局编辑器的样子:

2018年7月更新:

如果您正在使用ConstraintLayout 1.1.0,则使用正确的属性app:layout_constrainedWidth="true"代替旧的app:layout_constraintWidth_default="wrap"(和高度对应的).查看更新的答案.

2017年11月更新:

如果您使用的是ConstraintLayout 1.0.0稳定版(或以上版本)(此时为1.0.2版),请参阅更新的答案以获得更简单的解决方案,而无需嵌套布局.

原始问题:

使用ConstraintLayouts-Beta3于2016年11月3日发布.(来源)

我正在尝试执行以下操作:

ConstraintLayout 1.1.0

我用这样的布局实现了这个目标:

|                                        |
|<-[TextView]<->[ImageView] -----------> |
|                                        |

这看起来不错,但是当文本比可用空间长时......

app:layout_constrainedWidth="true" 文本视图具有指定以下内容的样式:

  <TextView
      android:id="@+id/textView"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"

      app:layout_constraintHorizontal_chainStyle="packed"

      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintRight_toLeftOf="@+id/caret"
      app:layout_constraintHorizontal_bias="0.0"

      android:text="Some Text"
      android:textAlignment="viewStart"
      android:gravity="start" />

  <ImageView
      android:id="@+id/caret"
      android:layout_width="wrap_content"
      android:layout_height="8dp"
      app:layout_constraintDimensionRatio="1:1"

      app:layout_constraintLeft_toRightOf="@+id/textView"
      app:layout_constraintRight_toRightOf="parent"

      app:layout_constraintTop_toTopOf="@+id/textView"
      app:layout_constraintBottom_toBottomOf="@+id/textView"


      app:layout_constraintHorizontal_bias="0.0"

      android:contentDescription=""
      app:srcCompat="@drawable/ic_selection"
      android:layout_marginStart="8dp"/>

所以它应该工作,但我不确定我需要什么约束让图像滑到右边然后停在那里让文本视图理解没有更多的空间.

我错过了什么？

注意:如果我将textview的宽度设置为0dp,它可以工作,但是图像总是在右边(水平偏差似乎被忽略了)

注2:我也尝试过beta2,事实上,似乎Beta3 在可视化编辑器中有一个错误.

更新:我试图在Xcode/AutoLayout中复制它:

这是短文本的外观

现在是相同的布局,我只需在文本视图中键入一个长文本...

正如您可以看到图像视图的轨迹(右)约束所示:您从右边距开始有8个或更多 …

我需要对一组视图应用一些约束ConstraintLayout.我想将这些视图分组并继续编辑,而Android Studio中的布局设计器将它们视为单个视图.有没有办法这样做而不用ViewGroup(另一种布局)实际包装视图？如果需要这样的包装器,可能会有一个包装器布局,ConstraintLayout并允许对对象进行分组而不会创建像RelativeLayout？

我正在尝试使用ConstraintLayout创建布局组合.为了简化我的案例,我的布局应该有三个部分:

1. 第一个布局(红色),应根据剩余空间增长并具有最大高度.
2. 第二个布局(绿色),固定大小为150dp,应始终低于第一个布局.
3. 第一个布局(粉红色),也有150dp的固定大小,应该与视图底部对齐.

我正在努力的部分是为第一个布局设置最大高度(红色).好像ConstraintLayout忽略了我的"最大高度语句":

app:layout_constraintHeight_max="300dp"

这是我当前的结果(红色部分忽略了高度限制..):

这是完整的XML:

<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:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context="com.mixtiles.android.reviewOrder.ReviewOrderActivity"
tools:layout_editor_absoluteY="25dp">


<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">
        <android.support.v7.widget.Toolbar
            android:id="@+id/review_order_toolbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

<FrameLayout
    android:id="@+id/red"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/red"
    app:layout_constraintBottom_toTopOf="@+id/green"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_max="300dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appBarLayout"
    app:layout_constraintVertical_chainStyle="spread_inside">

</FrameLayout>


<FrameLayout
    android:id="@+id/green"
    android:layout_width="0dp"
    android:layout_height="150dp"
    android:background="@color/greenish"
    app:layout_constraintBottom_toTopOf="@+id/pink"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/red">

</FrameLayout>

<FrameLayout
    android:id="@+id/pink"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="@color/pink"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/green">

</FrameLayout>

我在布局中使用的是androidx.constraintlayout.widget.ConstraintLayout，它没有显示链，也无法拖动任何小部件。我只是输入要使用的约束。

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="112dp"/>

这是androidx约束布局的示例屏幕截图： androidx.constraintlayout.widget.ConstraintLayout

但是当我尝试切换回android.support.constraint.ConstraintLayout时，我可以看到它

<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="112dp"/>

这是支持constraintLayout的示例屏幕截图： android.support.constraint.ConstraintLayout

这是错误还是什么？

编辑：

我当前的解决方案是从：

implementation 'androidx.constraintlayout:constraintlayout:1.1.2'

至

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

但这不能解决我的问题，因为我不想使用支持。

我ViewHolder在顶部有一个标题,并且标题在特定情况下变得可见.在大多数其他情况下,标头设置为GONE.问题是当标题设置为GONE时,仍然会计算其高度,而其他视图则spread不同(两者之间的空间更大).

这是一个布局蓝图:

蓝图说明:

1. 标题被约束为top,left和right.
2. 下面两个视图中packed chain,约束到上一个标头top,ImageView向right和父的left和bottom.

以下是布局检查器的截图,其中突出显示的标题视图设置为GONE:

根据文档,标题视图,当设置为GONE应该缩小到指向其他视图仍然应用于它的约束时,但标题不应占用布局空间并影响ConstraintLayout其设置的高度wrap_content.

在这个检查员截图中,目前尚不清楚实际发生了什么.标题不可见,底部视图显然约束到父顶部,但标题仍在检查器中显示为具有指定高度的全宽.

我不确定这是不是一个错误,或者我应该强制ConstraintLayout重新测量自己.

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_width="match_parent"
    android:layout_height="wrap_content">


    <TextView
        android:id="@+id/list_item_step_conversion_tv_header"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/gray_very_light"
        android:padding="@dimen/activity_vertical_margin"
        android:text="@string/favorites"
        android:textColor="@android:color/black"
        android:textSize="@dimen/default_text_size"
        android:textStyle="bold"
        android:visibility="gone"
        tools:visibility="visible"
        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/list_item_step_conversion_tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:ellipsize="end" …

我正在使用 Android Studio 3.4.1。当我使用 ConstraintLayout 时，我将 3 个按钮拖到布局中，全选，然后创建水平链。但此后不显示循环链模式按钮。所以，我不能选择其他选项：Packed、Spread、Spread inside

这部分去掉了吗？或者我需要设置一些东西。谢谢。

我正在尝试根据以下布局使用3个imageViews构建活动：

   <------W------->         <------W-------->
^  +---------------+--------+---------------+
|  |               |        |               |
|  |               |        |               |
H  |       A       |   B    |      C        |
|  |               | (1:3)  |               |
|  |               |        |               |
v  +---------------+--------+---------------+

• H应该是父母身高的1/3
• B的固定长宽比为1：3
• A和C的宽度应相同

我尝试了多种解决方案，却找不到可行的解决方案。最后一个用途：

• 设定为父母身高的33％的准则
• A，B和C之间的水平链
• B的固定长宽比
• A，B和C使用match_constraint尺寸

虽然我希望求解器能够做出所需的布局，但看起来该链定义了与所有视图相似的宽度，如屏幕截图所示。

我也尝试使用a，LinearLayout但似乎无法固定其中一个项目的纵横比。

<?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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintDimensionRatio=""
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toTopOf="@+id/guideline" …