编程安卓Android技术

Android ConstraintLayout详解

2016-05-31  本文已影响129029人  llitfk_DockOne

1. 概述

在本篇文章中，你会学习到有关ConstraintLayout -- 一种构建于弹性Constraints（约束）系统的新型Android Layout。最终你将会在Android Studio中编辑与构建一个相对复杂的Layout。

收获
需求

2. 获取示例代码

$ git clone https://github.com/googlecodelabs/constraint-layout.git

3. 运行示例代码

  1. 打开Android Studio，选择 File>New>Import Project，选择步骤2下载的示例代码的文件夹constraint-layout-start。
  2. 点击Gradle sync按钮。
  3. 在Project�面板内打开 res/layout/activity_main_done.xml
  4. 选择Design选项显示最终的layout编辑界面
  5. 在编辑器左上角选择Virtual Device to render the layout with为Nexus 5x
  6. 完工

4. Constraints 系统概览

Layout引擎使用Contraints指定每个widget来决定他们在layout中的位置。你可以使用Android Studio Layout编辑器界面来手动或者自动指定约束。要更好的理解他，需要我们了解一下他对一个选中的widget的基本控键。

Constraints

Constraints帮助你保持widgets对齐。你可以使用箭头来决定各widgets的对齐规则。例如（�图示 A），从button 2左侧控键设置一个constraint到button 1的右侧控键意味着：button 2会放置于button 1右侧56dp处

图示 A
控键类型
图示 B：不同类型的控键

《ConstraintLayout从入门到放弃》

太长；别读

5. ConstraintLayout应用

一）开启

现在，让我们开始来构建你自己的Constraint Layout。

从左侧导航栏打开 res/layout/activity_main_start.xml。

dependencies {
  ...
  compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
}

<?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.ConstraintLayout>

在编辑器底部转换到Design选项


ImageView一旦拖到layout中，UI会提示需要resource。constraint-layout-start已经包含了resources，请选择@drawable/singaporeresource。
一旦选中ImageView，你可以点击并按住调整尺寸控键来调整图片大小。
  1. 选择ImageView并添加@string/dummy到contentDescription属性
  2. 在Inspector面板，你可以看到ImageView的其他属性。修改scaleType为centerCrop。
  3. 接着，我们选择TextView，使用该面板修改text值为@string/singapore。

二）手动创建Constraints

创建一个约束，你需要在widget的某个控键上点击并按住，然后拖到两一个widget的约束控键内。一旦显示绿色，你就可以松手了最终约束就会被创建。

注意：该部分讲有关手动创建约束的，需要将左上角的自动创建约束按钮关闭


在开始之前，确保ImageView和TextView在layout内。我们的目标是在容器、ImageView以及TextView之间创建约束。

假设我们想要TextView置于ImageView下方。我们可以在TextView的顶部控键与ImageView的底部控键创建一个约束，如图：

移除约束：移除某个约束只需点击指定约束的控键；移除全部约束需要点击如下按钮：


下一步，创建ImageView跟容器顶部的约束

最后，创建ImageView左右两侧的约束

89f057b3a8ea3e0b.png

创建基线约束 - 连接widget的基线控键到另一个的基线


三）熟悉Inspector

在此部分，我们会了解一下Inspector。它在UI编辑器的右侧。附带有已选择widget的各种相关属性，而且还显示了该视图是如何对齐与约束的。

此时,UI构建起如下图：


以下部分描述了不同的元素和他们的使用方法：

Margins - widget的外围上下左右为margins。你可以点击按钮设置不同的值来改变margins。在上边截图中，margins设置为16dp

移除constraint - 在Inspector内点击连接widget与container的线，可以移除约束。当然也可以点击已设置约束的控键来移除。

相对于约束来放置widget - 当在一个widget有至少两个相对的连接，比如说顶部和底部，或者左侧和右侧，然后就可以使用滑动条来调节widget在链接中的位置。你还可以改变屏幕方向来进一步调整方位。

控制widget内部尺寸 - Inspector内部的线让你可以控制widget内部尺寸。


**Fixed** - 可以调整widget的宽度和高度 **AnySize** - 使得widget占据所有可用的控键来满足约束 **AnySize**应用之前
**AnySize**应用之后 **Wrap Content** - 含有text或者drawable的widget扩大到填满整个容器

四）自动创建Constraints

Autoconnect自动创建widgets之间的连接。开始之前

接下来，选中ImageView并且拖到layout的中心，如下图所示：

下一步，下方的动图展示了以下几个步骤


10210fd273ea1a86.png
  1. ImageView对齐顶部并使用Inspector（AnySize）来确保他扩展到两侧
  2. 放置两个button在右下角。使用Inspector面板来修改最右边button的text为@string/upload以及左侧改为@string/discard
  3. 将一个TextView和一个Plain Text放到layout中。
  4. 调整TextView和Plain Text为48dp。并自动创建约束。
  5. 同样的选中上传button放置到右侧。
  6. 最后放置取消button离上传button32dp的位置

五）使用Inference创建Constraints

（译注：待更新）

FAQ: (感谢Little_Mango提供的问题)

  1. 兄弟控件对齐方式只有top left bottom right，无x，y中心点对齐，这样两个View依然无法做到水平方向中点对齐。
    使用chains

  2. 父子控件间宽高约束过于简单，只有wrap_content，fixed，match，即包裹内容，匹配父容器，和绝对数值，无法做到类似子控件的宽度等于父控件的宽度的的1/4的需求。
    使用Guidelines（新版的指南好像没有介绍）

  3. 兄弟、父子之间宽高属性之间无约束，比如A控件宽度等于屏幕宽度的1/4，A控件的高度等于自身的宽度。B控件的宽等于A控件的宽度，B控件的高度等于A控件的高度的1/2.
    a. 参考 2
    b. 使用ratios
    c. 参考 b

  4. 不清楚是否能通过代码动态修改约束，如果不支持这种操作，那么类似容器垂直方向图片张数不一致这种需求也无法动态修改。
    使用 barriers

  5. 这个布局是否有布局的动画支持？如果没有，那么动画如何修改？通过修改控件的height和width是否会和约束冲突？
    动画支持

原文链接：Using ConstraintLayout to design your views

上一篇下一篇

猜你喜欢

热点阅读