如何使用ConstaintLayout将多个视图集中在一起?

背景

谷歌已经宣布了一种名为“ ConstraintLayout ”的新布局,该布局应该是最终布局,可以取代所有布局,同时保持平坦(没有内部布局)并具有更好的性能。

问题

事情是,我几乎没有看到任何可以帮助我解决这个问题的教程,除了在Google IO上展示的video。

我尝试做的是,我在另一个布局中有一个垂直居中的LinearLayout – 将它们转换为单个ConstraintLayout。

毕竟,这是这个新布局的目的……

我想要处理的布局如下:

在此处输入图像描述

请注意,中心的视图仅垂直居中,并且2个textView位于ImageView的右侧,ImageView也垂直居中。

这一切都适用于RelativeLayout,它具有2个TextViews的LinearLayout,但我想知道如何将它们转换为单个ConstraintLayout。

这是我展示的示例XML:

          

我尝试了什么

我尝试阅读一些文章并观看Google的一些video:

  • https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
  • https://www.youtube.com/watch?v=sO9aX87hq9c
  • https://youtu.be/csaXml4xtN8?t=1693

这没有用,所以我尝试使用它,希望我自己能find如何使用它。 但我无法find如何做到这一点。 我尝试使用该function转换布局,但这会使视图变得非常混乱,并且会增加我不希望拥有的额外边距。

这个问题

如何将2个布局转换为单个ConstraintLayout?

Solutions Collecting From Web of "如何使用ConstaintLayout将多个视图集中在一起?"

看看我的答案。

ContraintLayout包含一个function – Chains – 可以实现您的要求:

链在单个轴(水平或垂直)上提供类似行的行为。

如果一组小部件通过双向连接链接在一起,则它们被视为链

创建链后,有两种可能性:

  • 将元素传播到可用空间中
  • 链也可以“打包”,在这种情况下,元素被组合在一起

至于你的情况,你必须打包你的labeldescription TextViews并将它们垂直居中于你的父级:

(确保使用支持链的ConstraintLayout版本)

 < ?xml version="1.0" encoding="utf-8"?>        

app:layout_constraintVertical_bias="0.5"设置为需要垂直居中的视图,偏置属性仅在您指定边界的约束时有效(例如,垂直偏差的顶部和底部,水平偏差的左侧和右侧)

一个例子:

    

它在我的布局中工作: https : //github.com/hidroh/tldroid/blob/master/app/src/main/res/layout/activity_main.xml ,几乎相似的布局,虽然我把东西放在1 /屏幕高度的第3位。

在此处输入图像描述

编辑:这个答案是在链条可用之前编写的。 请立即使用链,请参阅上面的答案: https : //stackoverflow.com/a/40102296/1402641


现在我相信你唯一的选择是将两个文本视图包装在另一个布局中 – 可能线性布局最适合这种情况。

但是约束布局背后的团队表示他们想要引入“虚拟容器”,它正好服务于这个用例:将两个或多个视图组合在一起并在容器上设置约束(如垂直居中)。 这个想法是它不是约束布局中的完整嵌套布局,而只是约束布局用于定位它的子项的东西 – 因此它应该提供比嵌套更好的性能。

他们在他们的I / O谈话中提到它(与确切的时间相关联)。 所以我想请继续关注。

要垂直或水平居中,请在布局上设置相反的约束 。

垂直居中

  app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 

水平居中

  app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" 

看看我的例子( ConstraintLayout中的中心组件 )

现在你可以居中“图像”(约束左上 – 下),将“标签”顶部约束到“图像”顶部,将“描述”顶部约束到“标签”底部。 在下面的示例中,我将按钮高度与右侧的两个文本视图匹配(这是您的情况)。 其他文本视图受限于上面的链接。

在此处输入图像描述

更新:在下面回答你的评论:

我已经安装了你的应用程序,这只是我能想到的。 由于它是ViewHolder布局,layout_height可以设置为wrap_content,或者如果您愿意,可以修复它。 如果你愿意,我可以寄给你xml,我不想淹没答案。

Top TextView左约束被约束为ImageView的右约束。 另外,顶部TextView – >顶部约束被约束到容器顶部,所以是正确的。 底部TextView被约束到容器的底部。 中间的TextViews被约束为匹配顶部TextView的宽度,并且与ImageView没有任何关联。

在此处输入图像描述