如何使用constraint layout 1.1的新特性?
How to use new features in constraint layout 1.1?
有谁知道如何使用约束布局 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。现在,切换组的可见性会改变它引用的所有视图的可见性,我认为这是目前此功能的主要目的。
更新:An official release of Constraint Layout 1.1.0 is finally here, complete with official documentation!
Documentation of the new features was very scarce when this question was first asked. The best that I could find was in this Reddit post!但是那里的信息给了我足够的提示来创建一个带有水平屏障的约束布局。它确实有效,新的(测试版)约束布局还修复了 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_layout
和 multiline_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" />
第一印象:障碍很大!我的新布局更扁平、更简单,而且似乎仍然完全符合我的要求。绝对值得一试。
越来越详细的文档逐渐可用:
an excellent article about circular positioning, complete with animation
a nice detailed article about barriers at constraintlayout.com (!)
an article about the new 1.1.x widgets (including lots of details and sample code) at medium.com
@Vyacheslav A 的回答也很好地总结了新功能的功能。
有一些关于 Barrier here 的信息。
1.尺寸百分比
宽度为 0dp(或 match_constraint)的小部件的默认行为是展开的(可通过 layout_constraintWidth_default 属性 配置)。在 ConstraintLayout 1.0.x 中,我们可以选择将其更改为换行,而在 1.1.x 中,我们有一个新值 percent,它允许我们设置一个小部件以占用一定百分比可用 space.
<!-- 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 的结尾 属性 都无法绕过 Barrier。发生这种情况时,Barrier 将自行向右移动(如果在 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 的可见性将消失。
原创text here.
的官方文档
这里是 official doc 完美解释了约束布局 1.1 中添加的所有新功能
但是 Groups 还需要注意的一件事是,如果您将您的视图作为 Group 中的参考 ID,它的个人可见性将不起作用,要使它起作用,您将需要为它创建一个单独的组。
如果我错了,请纠正我。
这是使用 Group 的示例代码,正如您在此处看到的 view1's 可见性将不起作用,因为它已分配给一个组。
<?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.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。现在,切换组的可见性会改变它引用的所有视图的可见性,我认为这是目前此功能的主要目的。
更新:An official release of Constraint Layout 1.1.0 is finally here, complete with official documentation!
Documentation of the new features was very scarce when this question was first asked. The best that I could find was in this Reddit post!但是那里的信息给了我足够的提示来创建一个带有水平屏障的约束布局。它确实有效,新的(测试版)约束布局还修复了 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_layout
和 multiline_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" />
第一印象:障碍很大!我的新布局更扁平、更简单,而且似乎仍然完全符合我的要求。绝对值得一试。
越来越详细的文档逐渐可用:
an excellent article about circular positioning, complete with animation
a nice detailed article about barriers at constraintlayout.com (!)
an article about the new 1.1.x widgets (including lots of details and sample code) at medium.com
@Vyacheslav A 的回答也很好地总结了新功能的功能。
有一些关于 Barrier here 的信息。
1.尺寸百分比
宽度为 0dp(或 match_constraint)的小部件的默认行为是展开的(可通过 layout_constraintWidth_default 属性 配置)。在 ConstraintLayout 1.0.x 中,我们可以选择将其更改为换行,而在 1.1.x 中,我们有一个新值 percent,它允许我们设置一个小部件以占用一定百分比可用 space.
<!-- 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 的结尾 属性 都无法绕过 Barrier。发生这种情况时,Barrier 将自行向右移动(如果在 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 的可见性将消失。
原创text here.
的官方文档这里是 official doc 完美解释了约束布局 1.1 中添加的所有新功能
但是 Groups 还需要注意的一件事是,如果您将您的视图作为 Group 中的参考 ID,它的个人可见性将不起作用,要使它起作用,您将需要为它创建一个单独的组。 如果我错了,请纠正我。 这是使用 Group 的示例代码,正如您在此处看到的 view1's 可见性将不起作用,因为它已分配给一个组。
<?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" />
这是我遇到的解决方法,如果在这种情况下我们想要在不同情况下处理组的可见性以及个人视图的可见性。