如何使用约束布局1.1中的新特性?

24

有人知道如何使用约束布局 1.1 中的新功能,即障碍和基于百分比的尺寸吗?网上绝对没有任何文档可用,在最近的 Google I/O 设计师工具讲座上,仅详细介绍了占位符。顺便说一句,我发现如何使用分组,这也是一个新功能。你只需要简单地添加

<android.support.constraint.Group
    app:constraint_referenced_ids="button1, button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

将app:constraint_referenced_ids属性添加到您的约束布局中,它是一个字符串,您应该枚举用逗号分隔的视图id,这些视图希望与此组关联。现在,切换组的可见性会更改所有引用它的视图的可见性,我认为这个功能的主要目的就是如此。


2
有一个快捷方式可以为选定的视图创建组。它会自动包含所有ID,以它们应该被包含的方式。你应该试一试。 此外,对于百分比,有3个新属性(只需键入“app:per”,然后观看Android Studio提示)。 - Ekalips
谢谢!我会去看看。 - Roman
4个回答

31

更新:Constraint Layout 1.1.0 正式版终于发布了,附有官方文档!


在这个问题被首次提出时,新功能的文档资料非常有限。我找到的最好的参考是Reddit 上的这篇帖子!但那里的信息足以给我一些提示,让我创建一个包含水平障碍物的约束布局。它实际上能够工作,而且新(测试版)的约束布局还修复了一些关于 wrap_content 的问题。我对 Constraint Layout Beta 的良好第一印象经过了大量的额外测试的验证。

在使用新东西之前,请将 ConstraintLayout 1.1.0 添加到项目中。

app/build.gradle 中,将约束布局的依赖项更改为以下内容:

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

你可能还需要将该 maven 仓库添加到项目的 build.gradle 中(这是一个不同的文件,在项目的根目录中)。找到allprojects repositories 部分,并添加以下内容:maven { url 'https://maven.google.com' } 因此,整个部分应该看起来像这样:

allprojects {
     repositories {
         jcenter()
         maven { url 'https://maven.google.com' }
     }
}

现在到有趣的部分啦! 下面这段代码创建了一个水平障碍,使得bottom_textView位于included_layoutmultiline_textview之下。

<android.support.constraint.Barrier
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/barrier1"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="included_layout, multiline_textview" />

<TextView
    android:id="@+id/bottom_textview"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/barrier1"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />

第一印象:屏障非常棒!我的新布局更加扁平和简单,但仍然似乎可以做到我想要的一切。它绝对值得一试。

更详细的文档正在逐步推出:

@Vyacheslav A 的答案也对新功能做了很好的总结。


1
谢谢提供的信息! - Roman
我们真的需要这些行吗?例如,它们是否被省略了?app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/multiline_textview" - Roman Nazarevych
你说得对,@Lemberg!我已经相应地更新了答案。 - Rapunzel Van Winkle

18

1. 百分比尺寸

宽度为0dp(或匹配约束)的小部件的默认行为是spread(可通过layout_constraintWidth_default属性进行配置)。在ConstraintLayout 1.0.x中,我们可以选择将其更改为wrap,在1.1.x中,我们有一个新值percent,使我们可以将小部件设置为占用一定百分比的可用空间。

    <!-- the widget will take 40% of the available space -->
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.4"

2. 障碍

从这个新的小部件中,我们来看一些来自ConstraintLayout.com的例子。障碍将防止一个或多个小部件绕过障碍。当这种情况发生时,障碍将移动自身,并避免小部件被放置在其上方。 在下面的示例中,text1和text2的结束属性不能绕过障碍。当这种情况发生时,障碍将向右移动(如果在RTL布局中,则向左移动)。这在处理不同的小部件大小时特别有用,具体取决于某些配置或国际化。

<android.support.constraint.ConstraintLayout...>
  <TextView
    android:id="@+id/text1" ... />
  <TextView
    android:id="@+id/text2" ... />
  <android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end" <!-- start, top, bottom, right... -->
    app:constraint_referenced_ids="text1,text2" />
  <TextView
    android:id="@+id/text3"
    ...
    app:layout_constraintStart_toEndOf="@+id/barrier" />
</android.support.constraint.ConstraintLayout>

3.组

组,就像指南一样,是大小为0的小部件。但组可以帮助对一组小部件应用一些操作。最常见的情况是控制一组小部件的可见性。在处理此场景时,最常见的解决方案是在 Activity 或 Fragment 中自行维护一个视图列表或集合,甚至添加一个 ViewGroup 并将所有视图放置其中,控制容器的可见性。现在,您只需要将它们的 id 添加到组中,组将将操作传播到所有已连接的视图。

<android.support.constraint.ConstraintLayout ...>
  <TextView
    android:id="@+id/text1" ... />
  <TextView
    android:id="@+id/text2" ... />
  <android.support.constraint.Group
    android:id="@+id/group"
    ...
    app:constraint_referenced_ids="text1,text2" />
</android.support.constraint.ConstraintLayout>

在这种情况下,如果我们调用

group.setVisibility(View.GONE);

那么text1和text2将会被设置为GONE。

原始文本在此

官方文档描述在此。


1

这里是官方文档,完美地解释了约束布局1.1中添加的所有新功能。

但需要注意的是,对于,如果您将视图作为引用ID放入组中,则其个别可见性将不起作用,为了使其起作用,您需要为其创建一个单独的组。 如果我错了,请纠正我。 这是使用的示例代码,如您所见,在此处分配给组后,view1的可见性将无法工作。

    <?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="view1,view2" />

    <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/black"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1" />

    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view3" />

</android.support.constraint.ConstraintLayout>

现在我们可以创建一个新的组来处理view1的可见性,如下所示。
<android.support.constraint.Group
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:constraint_referenced_ids="view1" />

这是我发现的解决方法,如果存在这样的情况,我们需要在不同情况下处理组的可见性以及单个视图的可见性。


1

这里有一些关于屏障的信息在这里


9
欢迎提供潜在解决方案的链接,但请在链接周围添加上下文,这样其他用户就能了解它是什么以及为什么出现在这里。重要链接请引用最相关的部分,以防目标网站无法访问或永久离线。请查看《为什么会删除某些答案?》和《如何写好回答?》。 - Gary99

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接