ConstraintLayout初探【彩民之家论坛9066777】

2019-09-18 21:56 来源:未知
  1. 每一种View至少有五个约束
  2. 只可以在同贰个样子上创设约束
  3. 各类 constraint handle 只可以创建三个封锁,可是同一个锚点能够用于多少个约束。

To see a variety of layouts you can create with ConstraintLayout, check out the Constraint Layout Examples project on GitHub.

晋级Android studio到2.3本子之后,开采新建Activity或fragment时,xml布局暗中同意布局由RelativeLayout更动为ConstraintLayout了,既然已经引入应用ConstraintLayout,学会怎么行使就相当有供给了。本文的重点是目的是:图像和文字结合,讲讲怎么使用ConstraintLayout。

To convert an existing layout to a constraint layout, follow these steps:

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

基本操作##

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

简书MarkDown帮衬有一点点难点,请跳转到笔者博客查看该篇博客:http://weiyf.cn/2017/03/10/Build a Responsive UI with ConstraintLayout/

对齐##

对齐约束
完毕三个Button左对齐:加多七个Button,一上一下,从Button A增添约束到Button B,如下图操作加多对齐约束:

彩民之家论坛9066777 1

可能使用Align进展对齐:选中所要对齐的控件,点击Align,最后选中对齐的艺术就可以,如下图操作:

彩民之家论坛9066777 2

从Button A增加左对齐约束到Button B后,我们发掘,Button A将要档期的顺序方向上跟随Button B移动。
除此而外这种对齐格局外,Android studio还提供了GuidelineBaseline对齐方式!

设想下边的光景:假设未来有多个Button,一上一下,水平方向都距离距离侧边百分之四十,如下图:

彩民之家论坛9066777 3

服从大家地点所说的,应该那样达成:将七个Button的品位轴数值设置为30就可以。但后新加坡人想同期让那三个按键距离左边三成(原本是伍分一),可能改为距离右边百分之二十。依据原先的做法,只可以一个四个挨着去修改约束,有未有更好的落实况势啊?** Guideline**并发。

Constrain to a guideline

开创贰个档期的顺序或垂直方向的 guideline 并与之建立约束

关于 ConstraintLayout 的切磋就到此处,如若想询问有关 ConstraintLayout 的更详实地使用情势,能够移动Google官方文书档案,这里不一一介绍,总体而言,ConstraintLayout 的右手有早晚难度,刚开始阶段的选取一定会不习贯,对于习于旧贯了直接用XML来创建的分界面包车型大巴开采者来讲这种直白拖拽控件的方法没有丰硕灵活,假设想在实际上项目中选拔还供给经过一段时间的适应和搜索(并且在笔者所用的 4.4 上并不帮助 app:layout_constraintLeft_toRightOf 属性),不过相较于 Relativelayout 能够见到一定的创新,安卓的界面绘制非常是繁体分界面一贯是一件耗费时间来的不轻易的行事,Google准备通过 ConstraintLayout 来更改这一现状,至于实际效果如何,小编将三翻五次观察,何况在后头的实行进程中分享部分经验。

自律布局概述(Constraints overview)

要在ConstraintLayout中定义view的岗位,你无法不为view至少加多三个档期的顺序和垂直的封锁。每一个约束表示到另三个view,父布局,也许不可见的参谋线的连接大概对齐。各个约束定义view沿垂直或水平轴的岗位;因而没衣蛾view必需对每二个轴至少有一个约束,不过普通需求越来越多是很须要的。

To define a view's position in ConstraintLayout, you must add at least one horizontal and one vertical constraint for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view's position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.

当你拖动一个view到布局编辑器中,它会停留在你松手它的地点,就算它没有别的自律。但是,那只是为了更易于编辑;如若当你在设施上运维你的布局时,二个view未有别的约束,则会在职位【0, 0】(左上角)绘制它。

When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

在图1,在布局编辑器上看起来不错,但是在view C上向来不垂直约束。当那些布局在器材上制图的时候,view C与view A的左边缘和侧面缘水平对齐,但它汇合世在荧屏的最上端,因为它并未有垂直约束。

In figure 1, the layout looks good in the editor, but there's no vertical constraint on view C. When this layout draws on a device, view C horizontally aligns with the left and right edges of view A, but appears at the top of the screen because it has no vertical constraint.

彩民之家论坛9066777 4

图1.编辑器突显A下边包车型大巴viewC,但从不垂直约束

彩民之家论坛9066777 5

图2.viewC现行反革命垂直限制在view A下方

纵然非常不足约束,但不会招致编写翻译错误,布局编辑器会将相当不够的约束作为一个不当显示在工具栏中。要翻看错误和任何警告,点击 Show Warnings and Errors

彩民之家论坛9066777 6

。来提携您防止缺乏约束,布局编辑器能够运用Autoconnect和预计约束效能为您活动抬高约束。

Although a missing constraint won't cause a compilation error, the Layout Editor indicates missing constraints as an error in the toolbar. To view the errors and other warnings, click Show Warnings and Errors

彩民之家论坛9066777 7

. To help you avoid missing constraints, the Layout Editor can automatically add constraints for you with the Autoconnect and infer constraints features.

Guideline###

添加Guideline,如图:

彩民之家论坛9066777 8

Guideline有二种,一种是笔直方向的,一种是程度方向的,以往观测一下Guideline,如下图:

彩民之家论坛9066777 9

当选guideline,展现一条虚线,顶上部分可以观察一个向左的箭头,下方有多个数字(假使是80),
意味着:距离父布局左侧80dp;点击最上部箭头,开掘箭头向右了,下方有一个数字(假使是300),表示:距离父布局侧面300dp;再一次点击最上端箭头,开采箭头产生了%标识,下方有三个比重数字(假设是十分之四),表示在父布局水平方向十分之六的岗位。大家能够拖动guideline退换数值。

guideline的作用
轻松易行来讲就是支援控件鲜明地点的帮忙线!
那什么兑现地点提到的法力吗?先增添一个垂直guideline,再增添四个Button,分别设置按键右边到guideline的约束,如下图:

彩民之家论坛9066777 10

如此这般,拖动guideline,五个Button都会趁着移动了。

前段时间大家落实了不一样控件以guideline为标准,随guideline移动而活动。那怎么落到实处一个控件随另二个控件移动而运动呢,** Baseline**登场啦!

Order position

和另外View之间的约束

调整view边距(Adjust the view margins)

要确认保障全数view均匀分布,请单击工具栏中的边距

彩民之家论坛9066777 11

,为抬高到布局的种种view选拔私下认可边距。你对默许边距所做的其余改换仅适用于你以往加上的view。

To ensure that all your views are evenly spaced, click Margin in the toolbar to select the default margin for each view that you add to the layout. Any change you make to the default margin applies only to the views you add from then on.

你能够通过单击代表种种约束的线上的数字(在图第10中学,标记<span class="callout">4</span>突显底部边距设置为28dp),在 属性 窗口中决定每种view的边距。

You can control the margin for each view in the Properties window by clicking the number on the line that represents each constraint (in figure 10, callout 4 shows the bottom margin is set to 28dp).

彩民之家论坛9066777 12

图12.工具栏的边距按钮

该工具提供的兼具边距暗中认可是8dp,以帮扶你的view符合Material Design的8dp方形网格建议。

All margins offered by the tool are factors of 8dp to help your views align to Material Design's 8dp square grid recommendations.

分界面调换###

若是布局不是ConstraintLayout,能够透过下图操作进行调换:

彩民之家论坛9066777 13

假如调换前的分界面是嵌套的,你能够选拔一层一层转变,也能够接纳在根目录转变。使用的时候,发掘这几个转变职能实际不是很有力,无法有限帮忙转换后分界面保持一致。

Alignment

三个View之间的对齐

ConstraintLayout可在包容Android Studio2.3(API level 9)及越来越高版本的API库中利用。本页提供了再Android Sutdio2.3或更加高版本中采取ConstraintLayout构建布局的指南。假若你想打听有关布局编辑器本人的更加多音信,请参阅Android Studio指南应用布局编辑器塑造UI。

引入ConstraintLayout##

为了选拔ConstraintLayout,要求在app/build.gradle文件中增多相应重视:

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

从前ConstraintLayout注重库版本号都包罗beta字眼,现在曾经推出正规版本1.0.1。当然使用AS新建activity时,AS会自行抬高那行依赖的。

在View的边界上会出现七个圆形,用鼠标选中后拖动到你想与之创设约束的界线上,松手鼠标后约束就机关形成了。创制约束的时候,要留心以下准绳:

加多封锁(Add a constraint)

经过将view从布局编辑器选项板中拖动到编辑器中伊始。当您加多贰个view到ConstraintLayout,它会显示多个边框,各类角上皆有方形调度大小的手柄,每边都有圆形的牢笼手柄。

Start by dragging a view from the Palette window into the editor. When you add a view in a ConstraintLayout, it displays a bounding box with square resizing handles on each corner and circular constraint handles on each side.

单击view选中它,然后单击并按住中间一个封锁句柄,并将该线拖动到可用的定位点(另三个view的边缘,布局的边缘恐怕参谋线)。当您释放的时候,就可以树立约束,使用暗中同意的边距来分隔七个view。

Click the view to select it. Then click-and-hold one of the constraint handles and drag the line to an available anchor point (the edge of another view, the edge of the layout, or a guideline). When you release, the constraint is made, with a default margin separating the two views.

创办约束时,请记住以下准则:

  • 每三个view必须至少有三个约束:二个品位和一个笔直约束。
  • 只好在分享的同一平面的约束句柄和锚点之间创立约束。因而,view的垂直平面(侧边和侧边)能够仅被封锁到另贰个垂直平面;何况基线只好约束别的基线。
  • 各样约束句柄只好用于二个羁绊,但你能够创设八个约束(从差别的view)到同八个定位点。

When creating constraints, remember the following rules:

  • Every view must have at least two constraints: one horizontal and one vertical.
  • You can create constraints only between a constraint handle and an anchor point that share the same plane. So a vertical plane (the left and right sides) of a view can be constrained only to another vertical plane; and baselines can constrain only to other baselines.
  • Each constraint handle can be used for just one constraint, but you can create multiple constraints (from different views) to the same anchor point.

要刨除约束,选中view然后点击约束句柄。恐怕通过挑选view,然后单击 免除约束

彩民之家论坛9066777 14

来删除全部约束。

To remove a constraint, select the view and then click the constraint handle. Or remove all the constraints by selecting the view and then clicking Clear Constraints

彩民之家论坛9066777 15

一经爱view上增加了相反的自律,约束线会产生像弹簧一样扭曲来表示相反的力,就疑似录制2。当view大小设置为“Fixed”或“Wrap Content”时,效果最引人注目,在这种情景下view在封锁之间居中。倘使您想让view增加其尺寸以满意约束,切换大小为“match constraints”;只怕一旦要封存当前高低,但活动view以使其不居中,调节约束偏差。

If you add opposing constraints on a view, the constraint lines become squiggly like a spring to indicate the opposing forces, as shown in video 2. The effect is most visible when the view size is set to "fixed" or "wrap content," in which case the view is centered between the constraints. If you instead want the view to stretch its size to meet the constraints, switch the size to "match constraints"; or if you want to keep the current size but move the view so that it is not centered, adjust the constraint bias.

您能够利用约束来落实不相同门类的布局作为,如一下各章节所述。

You can use constraints to achieve different types of layout behavior, as described in the following sections.

<video loop autoplay src=";
录像1.view的侧边被束缚到父布局的右侧

<video loop autoplay src=";
录制2.增添三个与现成约束相反的自律

机动抬高约束##

增多机动约束的不二等秘书诀有二种:五个是Autoconnect

彩民之家论坛9066777 16

另一个是Infer Constraints

彩民之家论坛9066777 17

1.Autoconnect默许是关闭的,开启后,增加控件时,Android studio会检查实验顾客的意图,自动为控件增多约束。比方,拖动二个Button到预览图水平居中的地方,AS检查实验出恐怕是希望居中,就能够显得一条虚线,那时放手Button,就可以自动为Button加多封锁,如下图所示:

彩民之家论坛9066777 18

专心唯有AS检查评定出客户意图后(即预览图中冒出虚线),才会活动抬高约束,不然也不会有约束。
2.Infer ConstraintsAutoconnect功效相似,但比继承者更加强劲。Autoconnect是自行为正在操作的控件增多约束,而infer Constraints则是电动为全部布局内的控件增加约束。适用于较复杂的分界面,为那样的界面一键生成约束!
亟待专一的是:通过那二种方法自行抬高的羁绊不鲜明符合须要,那时候手动修改就行了。

想要明确View的岗位,必需给View至少增多五个约束,水平和垂直方向上各一个,这一个约束能够是相对于周边的View的,也足以是相持于父布局的,未有增进约束的要命样子上的坐标值为0(就算在编辑器中拖到固定地方,实际程序运维显示依旧是坐标为0)。

基线对齐(Baseline alignment)

将view的文本基线与另多少个view的文本基线对齐。

Align the text baseline of a view to the text baseline of another view.

在图8,B的第一行与A中的文本对齐。

In figure 8, the first line of B is aligned with the text in A.

要创制基线约束,请选用要限制的文书view,然后单击呈现在view下方的基线按键

彩民之家论坛9066777 19

。然后点击本文基线并将该线拖动到另外四个基线。

To create a baseline constraint, select the text view you want to constrain and then click the baseline button

彩民之家论坛9066777 20

that appears below the view. Then click the text baseline and drag the line to another baseline.

彩民之家论坛9066777 21

基线对齐约束

为自定义的控件增多约束###

Design分界面运营拖动的控件都以系统预设的控件,对于自定义的控件怎么办吧?
找不到能够直接将自定义控件拖进面板的操作,能够先对多少个基础控件(如Button)进行约束,然后再改动xml代码,将自定义控件替换该Button。对于自定义的品质也要求手动编写xml代码。

一时能体会明白的就这个,如有谬误请提议,开采缺漏再补偿,Thx.

当选View后用鼠标单击 constraint handle 可能通过开关移除全数约束。

调整view大小(Adjust the view size)

你能够运用拐角手柄来调度view大小,但这么会硬编码大小,因而view不会调度为分化的剧情或显示屏尺寸大小。要采用分歧的大大小小调解方式,请单击view并开发编辑器左侧的 属性

彩民之家论坛9066777 22

窗口。

You can use the corner handles to resize a view, but this hard codes the size so the view will not resize for different content or screen sizes. To select a different sizing mode, click a view and open the Properties

彩民之家论坛9066777 23

window on the right side of the editor.

在性质窗口顶端左近是view检查器,他回顾三个布局属性的控件,如图10所示(那仅适用于自律布局中的view)。

Near the top of the Properties window is the view inspector, which includes controls for several layout properties, as shown in figure 10 (this is available only for views in a constraint layout).

您可以由此单击图10成功注<span class="callout">3</span>所示的符号来改造总计中度和幅度的方法。这一个标记表示尺寸情势如下:

  • 彩民之家论坛9066777 24

    Wrap Content: view依照必要进行扩大以契合其内容。

  • 彩民之家论坛9066777 25

    Match Constraints: 该view依照供给扩大以满意其在思量边际之后的自律的定义。然则,假若给定尺寸独有贰个束缚,则view将扩张以适合其内容。在中度或宽度上选拔此方式也同意你设置尺寸比例。

  • 彩民之家论坛9066777 26

    Fixed: 您能够在上面包车型大巴文本框中内定特定的尺寸,也得以在编辑器中调节view大小。

You can change the way the height and width are calculated by clicking the symbols indicated with callout <span class="callout">3</span> in figure 10. These symbols represent the size mode as follows:

  • 彩民之家论坛9066777 27

    Wrap Content: The view expands as needed to fit its contents.

  • 彩民之家论坛9066777 28

    Match Constraints: The view expands as needed to meet the definition of its constraints after accounting for margins. However, if the given dimension has only one constraint, then the view expands to fit its contents. Using this mode on either the height or width also allows you to set a size ratio.

  • 彩民之家论坛9066777 29

    Fixed: You specify a specific dimension in the text box below or by resizing the view in the editor.

要在那几个设置之间切换,请单击视图检查器中的符号。

To toggle between these settings, click the symbol in the view inspector.

只顾:对于ConstraintLayout中其他view,不应使用match_parent。而是选用“match constraints”(0dp)。

Note: You should not use match_parent for any view in a ConstraintLayout. Instead use "match constraints" (0dp)

彩民之家论坛9066777 30

“属性”窗口包涵<span class="callout">1</span>大小比例,<span class="callout">2</span>删除约束,<span class="callout">3</span>高度/宽度形式,<span class="callout">4</span>边距和<span class="callout">5</span>约束偏差的控件。

控件的size##

地点提到了Button的layout_widthlayout_height,和思想布局形似,有二种:固定值
wrap_contentmatch_parent,如下图所示:

彩民之家论坛9066777 31

1.<<< 图案表示 wrap_content;
2.|-----| 图案表示 固定值
3.波浪线画画表示 match_parent,这里的match_parent和在RelativeLayout下的match_parent不同,RelativeLayout下的match_parent是用于填充满当前控件的父布局,而这里的match_parent是用于填充满当前控件的束缚准绳。假若将layout_width设置为match_parent,那么在档期的顺序方向上,不可能再移动控件,也正是上面说的水准轴移动不再生效,预览图中,控件充满约束准绳。

layout_widthlayout_height设置为match_parent时,右上角会出现一个小三角,如下图:

彩民之家论坛9066777 32

这几个小三角的意义是:切换驰骋比约束,简来说之便是设置宽高的比重!如下图:

彩民之家论坛9066777 33

一经通过小三角设置驰骋比约束后,再通过手动退换宽高数值,那后面一个将覆盖前边三个。

有了主题的刺探后,我们来看看一些复杂点的风貌。

Baseline alignment

多个TextView之间文字的对齐

调动约束偏差(Adjust the constraint bias)

当向view的两边增加约束时(而且一样尺寸的view的大小为“Fixed”或“Wrap Content”),暗中同意景况下,view就要四个约束之间居中,偏差为一半。你能够通过拖动“属性”窗口中的偏移滑块或拖动view来调解偏移,如录制5所示。

When you add a constraint to both sides of a view (and the view size for the same dimension is either "fixed" or "wrap content"), the view becomes centered between the two constraints with a bias of 50% by default. You can adjust the bias by dragging the bias slider in the Properties window or by dragging the view, as shown in video 5.

<video loop autoplay src=";
录制5.调度约束偏差

Baseline###

添加Baseline
选中Button,点击下方的

彩民之家论坛9066777 34

,就为view添加了baseline,如下图:

彩民之家论坛9066777 35

为两个Button添加Baseline约束

拖入四个Button,选中Button A,增多Baseline后,拖拽到Button B就可以,如下图:

彩民之家论坛9066777 36

各种控件的baseline唯有一个,从Button A拖拽到Button B,B会自动生成baseline,今后多少个button已经制造baseline约束了。我们发掘,Button A只可以水平方向上拖动,垂直方向上十分小概拖动;Button B能够水平拖动,也能够垂直拖动,况兼在笔直方向上运动时,Button A也会随之移动。由A到B加多了baseline,意味着A在笔直方向上的职责只可以由B来决定了,那正是Baseline的对齐效用。

晋升到AS2.3之后用AS新建project时Activity的暗许布局变成了ConstraintLayout,Google在拓展ConstraintLayout的力度上实在比异常的大,从前2.2Preview刚出去的时候ConstraintLayout作为一个新特征被生产,那时候有个别钻探了弹指间,以为限制或然广大的,拖控件的主意在其实项目中选取起来时也不曾看起来那么方便人民群众,就从不太关爱,但此番AS2.3将ConstraintLayout作为了暗中认可布局,表明ConstraintLayout确实有让谷歌(Google)认同的独到之处,就决定花点时间认真探讨一下,本文是依照谷歌(Google)官方对于ConstraintLayout的表达文书档案而写成。

用三个链调控线性组(Control linear groups with a chain)

链是用双向地方约束相互链接的一组view。比如,图13示出了八个view,它们都具有相互的自律,进而开创水平链。

A chain is a group of views that are linked to each other with bi-directional position constraints. For example, figure 13 shows two views that both have a constraint to each other, thus creating a horizontal chain.

链允许您使用以下样式水平或垂直分发一组view(如图14所示):

  • <span class="callout">1</span> Spread: view均匀布满(在虚构边距之后)。那是暗许值。
  • <span class="callout">2</span> Spread inside: 首个和末了三个view被增大到链的各样端部上的牢笼,何况别的的是均匀布满的。
  • <span class="callout">3</span> Weighted: 当链被设置为 SpreadSpread inside 时,您能够通过将一个或三个view设置为“match constraints”(0dp)来填充剩余空间。默许意况下,空间均匀布满在设置为“match constraints”的各种view之间,然则你能够选择layout_constraintHorizo​​ntal_weightlayout_constraintVertical_weight天性为各样view分配三个最首要权重。假若您熟稔layout_weight在一个linear layout,它们的劳作方法是均等的。因此,具备最高权重值的view获得最大的空间量;具有一样重量的view获得一致的空间量。
  • <span class="callout">4</span> Packed: view被打包在一同(在设想边距之后)。然后,您能够由此改换链的头view偏差来调动总体链的偏差(左/右或上/下)。

A chain allows you to distribute a group of views horizontally or vertically with the following styles (as shown in figure 14):

  • <span class="callout">1</span> Spread: The views are evenly distributed (after margins are accounted for). This is the default.
  • <span class="callout">2</span> Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed.
  • <span class="callout">3</span> Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to "match constraints" (0dp). By default, the space is evenly distributed between each view that's set to "match constraints," but you can assign a weight of importance to each view using the layout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you're familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.
  • <span class="callout">4</span> Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain's bias (left/right or up/down) by changing the chain's head view bias.

彩民之家论坛9066777 37

图13.多个唯有三个view的链

彩民之家论坛9066777 38

图14.各样链式的例证

链的“底部”view(水平链中最侧面的view和垂直链中最顶端的view)在XML中定义为链的体制。然而,您能够通过甄选链中的别样view,然后单击view下方显示的链开关

彩民之家论坛9066777 39

,在 spreadspread insidepacked 之间切换。

The chain's "head" view (the left-most view in a horizontal chain and the top-most view in a vertical chain) defines the chain's style in XML. However, you can toggle between spread, spread inside, and packed by selecting any view in the chain and then clicking the chain button

彩民之家论坛9066777 40

that appears below the view.

要快快创制view链,全选它们,右键单击个中一个view,然后选拔 Center HorizontallyCenter Vertically,来分别成立水平或垂直链(参见录像4)。

To create a chain of views quickly, select them all, right-click one of the views, and then select either Center Horizontally or Center Vertically, to create either a horizontal or vertical chain, respectively (see video 4).

行使链时要思考的别样几件事:

  • view能够是水平和垂直链的一局地,使得构建灵活的网格布局变得轻便。
  • 独有链的每一端都被封锁到同一轴上的另三个对象,链手艺健康办事,如图13所示。
  • 纵然链的自由化是垂直或水平的,无论使用哪叁个二个侧向都不会使该方向上的视图对齐。因而,请保管包罗别的约束,以落实链中种种view的不易地方,比如对齐约束。

A few other things to consider when using chains:

  • A view can be a part of both a horizontal and a vertical chain, making it easy to build flexible grid layouts.
  • A chain works properly only if each end of the chain is constrained to another object on the same axis, as shown in figure 13.
  • Although the orientation of a chain is either vertical or horizontal, using one does not align the views in that direction. So be sure you include other constraints to achieve the proper position for each view in the chain, such as alignment constraints.

<video loop autoplay src=";
摄像4.从操作菜单成立链

创建ConstraintLayout##

新建ConstraintLayout布局文件后,张开如图所示:

彩民之家论坛9066777 41

固然ConstraintLayout和RelativeLayout等都以ViewGroup的子类,但RelativeLayout,FrameLayout等是坐落widget包下的,ConstraintLayout则是在Support包下的。点击界面左下角的“Design”和“Text”能够切换呈现视图,“Design”视图是可视化视图,提供拖拽等效用完毕分界面布局;“Text”视图是通过编写制定xml代码完成分界面布局。

彩民之家论坛9066777 42

对于价值观布局,大多数开拓者都是由此编写制定xml代码来具体布局的,显得“Design”那几个可视化学工业具卓殊的鸡肋。但对此ConstraintLayout来讲,却很吻合采用那么些可视化学工业具来达成布局,后天将选用“Design”视图来阐明ConstraintLayout的采取。先来察看“Design”视图,

彩民之家论坛9066777 43

左侧区域是预设的控件集合,最上部区域是操作栏位,右边区域则是预览效率。

  1. Open your layout in Android Studio and click the Design tab at the bottom of the editor window.
  2. In the Component Tree window, right-click the layout and click Convert layout to ConstraintLayout.

ConstraintLayout的富有机能都足以从布局编辑器的可视化学工业具中央市直机关接获取,因为布局API和布局编辑器是专为互相创设的。因而,你能够通过更易于的拖放来代替编辑XML使用ConstraintLayout营造你的布局。

增加控件###

若是想增加二个Button,只需从左侧的Palette区域拖拽到预览区域就足以了。拖拽完结后,会在布局中自动生成相应的xml代码。“Design”工具是经过自动生成代码来贯彻布局的,本质上可能通过xml完毕布局。两个是并行沟通的,其中一个生出更改,另二个会相应改造。下图,增多三个Button:

彩民之家论坛9066777 44

透过拖拽,未来曾经加多了两个Button。能够在“Text”视图中见到,自动生成了xml代码。即使增添了Button,但由于还未曾给这一个Button增添约束,所以在“Text”视图下,能够见到Android Studio报错了:从不为view增添封锁,但照样允许运维。由于未有约束,Button并不知道自个儿所处的职分,实际运作效果和预览效果是不等同的,Button会产出在左上角。假如拖拽Button后,开采Button已经有约束,那么一定是开发了AutoConnect按键,这么些下文再详说。

Parent position

和父布局之间的牢笼

要查看使用ConstraintLayout制造的各样布局,请查看GitHub上的封锁布局示例项目

翻开控件属性###

入选对应的控件,点击左侧的“Properties”,张开属性面板,如下图

彩民之家论坛9066777 45

暗中认可呈现较为常用的性质,倘诺急需出示越多属性,滚动到底层,点击View all properties查看全部的习性。不明确这里是还是不是包括了具备的属性值,假若找不到,那只可以通过xml编写了囖。至于修改控件属性,直接在该面板上更动就可以。
下边入眼关怀属性面板上的** Inspector**视图,如下图:

彩民之家论坛9066777 46

先说说相比直白的地点:
1.ID栏:这里填写的id正是标志view的ID;
2.layout_widthlayout_height:描述控件大小的,能够直接填写数值决定大小,也得以采取wrap_contentmatch_parent(那四个采取,下边细说),还足以向来拖动来支配控件的深浅,如下图:

彩民之家论坛9066777 47

新增加二个Button,给上下左右增加上约束,此时,Button默许居中展示,选中该Button,查看它的inspector,如下图所示:

彩民之家论坛9066777 48

观看灰黄框内的两条轴,一条是垂直展现的,一条是水平显得,这两条轴是用于明确Button地点的。今后Button是居中呈现,相应地能够见到这两条轴上标记的数值都以50,即使拖动Button,能够阅览相应的数值会发生变化。举个例子,水平向右拖动Button,水平轴上的数值会跟着变大(值的范围在0-100时期);按住水平轴上的数字进行拖动,能在等级次序方向上转移Button的岗位。
今天将水平轴移到到最右侧,数值为100,观看预览图:

彩民之家论坛9066777 49

固然已经移动到最左边了,但发掘Button离最侧边照旧有距离。那是因为生产约束时,系统暗许设置了8dp的间距(margin),如浅黄框所示。能够点击侧边革命框内的数字修改间距。观看预览图,开采每一种约束上都有直线波浪线。其中直线代表的是距离(margin),波浪线则特别是上面提到的档期的顺序轴或垂直轴,在此间拖动,用于转移Button的比重地点。
每便增加约束都活动抬高四个间距的话,也是挺烦,点击下图的深褐框地方能够那样把它干掉:

彩民之家论坛9066777 50

ConstraintLayout使用平面视图档期的顺序结构创制大而复杂的布局,它和RelativeLayout很像,皆以透过规定和同级View以及父布局之间的涉嫌来明确自身的职位和大小,可是ConstraintLayout比RelativeLayout越来越灵敏,并且能够经过AS的布局编辑器来进行编辑。

将ConstraintLayout增加到您的品类(Add ConstraintLayout to your project)

要在你的项目中应用ConstraintLayout,操作如下:

To use ConstraintLayout in your project, proceed as follows:

  1. 确认你持有新型版本的Constraint Layout库。
  2. 点击 Tools > Android > SDK Manager
  3. 点击 SDK Tools 选项卡。
  4. 展开 Support Repository 然后检查 ConstraintLayout For AndroidSolver for ConstraintLayout。选中 Show Package Details 并记下你要下载的本子。(下边步骤需求)。
  5. 点击OK。
  6. 将该库作为依据关系加多到模块机的build.gradle文件中:
dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.0.1'
}

你下载的库版本可能会更高,因此请确保此处指定的值与你第3步中的版本相匹配。
  1. 在工具栏也许联合公告中,点击 Sync Project with Gradle Files

当今你曾经筹算好实用ConstraintLayout来创设布局了。

  1. Ensure you have the latest Constraint Layout library:
1. Click Tools > Android > SDK Manager.
2. Click the SDK Tools tab.
3. Expand Support Repository and then check ConstraintLayout for Android and Solver for ConstraintLayout. Check Show Package Details and take note of the version you're downloading (you'll need this below).
4. Click OK.
5. Add the library as a dependency in your module-level build.gradle file:
`dependencies {`
    `compile 'com.android.support.constraint:constraint-layout:1.0.1'`
`}`
The library version you download may be higher, so be sure the value you specify here matches the version from step 3.
6. In the toolbar or sync notification, click Sync Project with Gradle Files.

Now you're ready to build your layout with ConstraintLayout

删除约束###

去除控件的束缚有各样主意:
1.剔除全数布局的封锁,如下图:

彩民之家论坛9066777 51

2.删减某一控件的有所约束:选中该控件,右键,选择“Clear all Constraints”;大概,选中该控件,点击左下角的X标记;当然倘若您全部控件都剔除了,与之辅车相依的羁绊也同期被删去了。如下图:

彩民之家论坛9066777 52

3.剔除有个别控件的某部约束:选中该控件后,会在控件的光景左右显示小圆圈,把鼠标移到小圆圈上,若无约束,小圆圈是士林蓝的;假若已经存在约束(各个小圆圈有且独有一个束缚),小圆圈是冰雪蓝的,点击变红的小圆圈就会去除相应的羁绊了;恐怕从小红圈重新拖拽叁个新约束,也会交替掉旧约束。如下图:

彩民之家论坛9066777 53

将大小设置为比率(Set size as a ratio)

假设至少有二个view尺寸设置为“match constraints”(0dp),则能够将view大小设置为比例,比如16:9。要启用比率,请单击“切换长宽比约束”(图第10中学的编号<span class="callout">1</span>),然后在产出的输入框中输入 width:height 比例。

You can set the view size to a ratio such as 16:9 if at least one of the view dimensions is set to "match constraints" (0dp). To enable the ratio, click Toggle Aspect Ratio Constraint (callout 1 in figure 10), and then enter the width:height ratio in the input that appears.

假使上升的幅度和惊人都设置为match constraints,你能够单击 切换长度宽度比约束 来选取哪个尺寸基于另一个比率。视图检查器通过用实线链接相应的边来提醒设置为比率。

If both the width and height are set to match constraints, you can click Toggle Aspect Ratio Constraint to select which dimension is based on a ratio of the other. The view inspector indicates which is set as a ratio by connecting the corresponding edges with a solid line.

比如,倘使您将两个安装为“match constraints”,点击 切换长度宽度比约束 三回来将小幅设置为中度的比值。未来漫天尺寸由view的惊人(其得以以任何方法定义)来支配,如图11所示。

For example, if you set both sides to "match constraints", click Toggle Aspect Ratio Constraint twice to set the width be a ratio of the height. Now the entire size is dictated by the height of the view (which can be defined in any way) as shown in figure 11

彩民之家论坛9066777 54

图11.view安装为16:9,宽度基于中度的比值

增进封锁###

选中Button,能在上下左右走访七个空心小圆圈,把鼠标移动到小圆圈上,小圆圈会产生浅米灰。那多个小圆圈就是用来给Button加多封锁的,实际上全体控件view都有如此的4个小圆圈。今后给Button侧面和左边各拉长七个羁绊,如下图所示:

彩民之家论坛9066777 55

只需选中型Mini圆圈然后拖动鼠标到父布局边框就可以成功增添约束。上图中,侧面的预览图叫“Design”,右侧深紫的视图叫“Blueprint”,增添约束的操作在随便一个视图上都能够做到。
地点的束缚是控件到父布局的羁绊,控件和控件间的羁绊也是近乎。未来再增添二个Button,这么些Button在上二个Button的花花世界,间距86dp(随便给的),如下图:

彩民之家论坛9066777 56

对齐(Alignment)

将view的边缘与另贰个view的同一边缘对齐。

Align the edge of a view to the same edge of another view.

在图6,B的左侧与A的侧面对齐。借使您要对齐view的主导,请在两边分头创制约束。

In figure 6, the left side of B is aligned to the left side of A. If you want to align the view centers, create a constraint on both sides.

您能够由此从约束想内拖动view来偏移对齐。例如,图7示出了装有24dp偏移量对齐的B。偏移由约束view的边距定义。

You can offset the alignment by dragging the view inward from the constraint. For example, figure 7 shows B with a 24dp offset alignment. The offset is defined by the constrained view's margin.

你还足以选拔具备要对齐的view,然后单击工具栏中的 对齐

彩民之家论坛9066777 57

来挑选对齐形式。

You can also select all the views you want to align, and then click Align

彩民之家论坛9066777 58

in the toolbar to select the alignment type.

ConstraintLayout允许你选择平面view档期的顺序结构去创立一个大而复杂的布局(未有嵌套的view groups)。它相仿于RelativeLayout,其中具备的view都以基于兄弟views和父布局之间的关联来布局的,不过它比RelativeLayout更加灵活,而且更便于与Android Studio的布局编辑器一齐行使。

创建新的布局(Create a new layout)

要运营新的束缚布局文件,请依据下列步骤操作:

  1. Porject 窗口右击模块文件夹然后采取 File > New > XML > Layout XML
  2. 为这一个布局文件输入三个名字和在** Root Tag** 输入"android.support.constraint.ConstraintLayout"。
  3. 点击 Finish

To start a new constraint layout file, follow these steps:

  1. In the Project window, click the module folder and then select File > New > XML > Layout XML.
  2. Enter a name for the layout file and enter "android.support.constraint.ConstraintLayout" for the Root Tag.
  3. Click Finish

All the power of ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.

<video poster="" controls preload="none" src=";
</video>

转换布局(Convert a layout)

要将长存布局转变为束缚布局,请根据下列步骤操作:

  1. 在Android Sutdio展开你的布局然后点击在编辑器窗口底部的 Design 选项卡。
  2. Component Tree 窗口,右击布局然后点击 Convert layout to ConstraintLayout

To convert an existing layout to a constraint layout, follow these steps:

  1. Open your layout in Android Studio and click the Design tab at the bottom of the editor window.
  2. In the Component Tree window, right-click the layout and click Convert layout to ConstraintLayout.

彩民之家论坛9066777 59

图3.将布局调换为ConstraintLayout的菜单

法规地点(Order position)

概念多少个view的垂直或水平出现的法规。

Define the order of appearance for two views, either vertically or horizontally.

在图5,B被封锁为总是在A的侧面,况且C被束缚在A的底下。然则,这个约束并不表示对齐,所以B如故能够上下移动。

In figure 5, B is constrained to always be to the right of A, and C is constrained below A. However, these constraints do not imply alignment, so B can still move up and down.

彩民之家论坛9066777 60

图5.水平和垂直约束

参照他事他说加以考察线约束(Constrain to a guideline)

您能够加上可以约束view的垂直只怕水平的参照他事他说加以考察线,并且该参谋线对于利用客户来说是不可知的。你能够依据相对于布局边缘的dp单位依然百分之百在布局中固定参照他事他说加以考察线。

You can add a vertical or horizontal guideline to which you can constrain views, and the guideline will be invisible to app users. You can position the guideline within the layout based on either dp units or percent, relative to the layout's edge.

要创设参照他事他说加以考察线,请单击工具栏中的 参考线

彩民之家论坛9066777 61

,然后单击 加上垂直参照他事他说加以考察线 或者 累加等级次序参谋线

To create a guideline, click Guidelines

彩民之家论坛9066777 62

in the toolbar, and then click either Add Vertical Guideline or Add Horizontal Guideline.

拖动虚线来再次定位它,并单击参照他事他说加以考察线边缘处的圆形来切换度量格局。

Drag the dotted line to reposition it and click the circle at the edge of the guideline to toggle the measurement mode.

彩民之家论坛9066777 63

view的参照他事他说加以考察线约束

父布局地方(Parent position)

将view的边限制到布局的呼应边。

Constrain the side of a view to the corresponding edge of the layout.

在图4,view的侧边连接到父布局的左侧缘。你能够定义从边缘到边缘的离开。

In figure 4, the left side of the view is connected to the left edge of the parent layout. You can define the distance from the edge with margin.

彩民之家论坛9066777 64

图4.对父布局的水准约束

ConstraintLayout is available in an API library that's compatible with Android 2.3 (API level 9) and higher. This page provides a guide to building a layout with ConstraintLayout in Android Studio 2.3 or higher. If you'd like more information about the Layout Editor itself, see the Android Studio guide to Build a UI with Layout Editor.

机关创设约束(Automatically create constraints)

当你将它们放置在布局中时,不会向各类view增添约束,您能够将各种view移动到所需的职位,然后单击 Infer Constraints

彩民之家论坛9066777 65

以自行创立约束。

Instead of adding constraints to every view as you place them in the layout, you can move each view into the positions you desire, and then click Infer Constraints

彩民之家论坛9066777 66

to automatically create constraints.

Infer Constraints扫描布局以分明全数view的最有效的封锁群集。它尽最大大力将view限制在近来任务,同期同意看人下菜。你可能需求进行局地调节,以担保布局响应该为你在分歧的荧屏尺寸和可行性想要的意义。

Infer Constraints scans the layout to determine the most effective set of constraints for all views. It makes a best effort to constrain the views to their current positions while allowing flexibility. You might need to make some adjustments to be sure the layout responds as you intend for different screen sizes and orientations.

电动连接是一个单独的功能,能够张开或关闭。张开时,它会在你将各类view加多到布局时自动为其创设四个或四个约束,但独有在妥当时才将view约束到父布局。Autoconnect不会对布局中的其他views创制约束。

Autoconnect is a separate feature that is either on or off. When turned on, it automatically creates two or more constraints for each view as you add them to the layout, but only when appropriate to constrain the view to the parent layout. Autoconnect does not create constraints to other views in the layout.

暗许景况下禁止使用Autoconnect。您能够因此在布局编辑器工具栏中单击 Autoconnect

彩民之家论坛9066777 67

来启用它。

Autoconnect is disabled by default. You can enable it by clicking Turn on Autoconnect

彩民之家论坛9066777 68

in the Layout Editor toolbar.

版权声明:本文由彩民之家高手论坛发布于编程技术,转载请注明出处:ConstraintLayout初探【彩民之家论坛9066777】