ConstraintLayout完全解析2

调整约束偏差

向视图的两侧添加约束(并且同一维度的视图大小为“固定”或“换行内容”)时,视图将在两个约束之间居中,默认偏差为50%。您可以通过拖动“ 属性”窗口中的偏移滑块或拖动视图来调整偏差,如视频5所示。

如果您希望视图扩展其大小以满足约束,请将大小切换为“匹配约束”

test2.gif

视频5,调整约束偏差

调整视图大小

您可以使用角手柄来调整视图大小,但是这个硬编码大小,因此视图不会针对不同的内容或屏幕大小调整大小。要选择不同的大小调整模式,请单击视图并打开 编辑器右侧的“ 属性” [站外图片上传中...(image-d6c7c0-1534406093290)]窗口。

在“ 属性”窗口的顶部附近是视图检查器,其中包含多个布局属性的控件,如图11所示(这仅适用于约束布局中的视图)。

您可以通过单击图11中标注为3的符号来更改高度和宽度的计算方式。这些符号表示大小模式,如下所示(单击符号可在这些设置之间切换):

  • layout-width-fixed.png
    固定长度:您可以在下面的文本框中指定特定尺寸,也可以在编辑器中调整视图大小。

  • layout-width-wrap.png
    包裹内容:视图的扩展量只能满足其内容的需要。

  • layout-width-match.png
    匹配约束:视图尽可能地扩展以满足每一侧的约束(在考虑视图的边距之后)。但是,您可以使用以下属性和值修改该行为(仅当您将视图宽度设置为匹配约束时,这些属性才会生效):

    • layout_constraintWidth_default

      • spread:尽可能扩展视图以满足每一方的约束。这是默认行为。
      • wrap:仅根据需要扩展视图以适应其内容,但仍允许视图小于约束所需的视图。因此,使用Wrap Content(上图)之间的区别在于,将宽度设置为Wrap Content会强制宽度始终与内容宽度完全匹配; 而使用Match Constraintslayout_constraintWidth_default设置为wrap也允许视图小于内容宽度。
    • layout_constraintWidth_min

      这需要dp视图的最小宽度的维度。

    • layout_constraintWidth_max

      这需要dp视图的最大宽度的维度。

    但是,如果给定维度只有一个约束,则视图会展开以适合其内容。在高度或宽度上使用此模式还允许您 设置尺寸比率

注意:您不能match_parent 用于任何视图ConstraintLayout。而是使用“匹配约束”(0dp)。

layout-editor-properties-callouts_2x.png

图11.属性窗口包括用于控制 1分尺寸比,2删除约束, 3高度/宽度模式中, 4页边距和 5约束偏差。

将大小设置为比率

如果至少有一个视图尺寸设置为“匹配约束”(0dp),则可以将视图大小设置为16:9之比。要启用比率,请单击“ 切换纵横比约束”(图11中的标注1),然后 在显示的输入中输入宽度:高度比。

如果宽度和高度都设置为匹配约束,则可以单击“切换纵横比约束”以选择基于另一个维度的比率。视图检查器通过用实线连接相应的边缘来指示哪个被设置为比率。

例如,如果将两侧都设置为“匹配约束”,请单击“切换纵横比约束”两次以将宽度设置为高度的比率。现在整个尺寸由视图的高度(可以以任何方式定义)决定,如图12所示。

layout-editor-ratio-properties_2x.png

图12.视图设置为16:9宽高比,宽度基于高度比。

调整视图边距

要确保所有视图均匀分布,请单击工具栏中的“ 边距 [站外图片上传中...(image-1da1d5-1534406093290)] ”以选择添加到布局的每个视图的默认边距。您对默认保证金所做的任何更改仅适用于您从此处添加的视图。

您可以通过单击代表每个约束的行上的数字来控制“ 属性”窗口中每个视图的边距(在图11中,标注4显示底部边距设置为24dp)。

layout-editor-margin-callout_2x.png

图13.工具栏的Margin按钮。

该工具提供的所有边距均为8dp因子,可帮助您的视图与Material Design的8dp方形网格建议保持一致 。

用链控制线性组

链是一组视图,它们通过双向位置约束相互链接。链中的视图可以垂直或水平分布。

链可以通过以下方式之一进行样式设置:

  1. 点差:视图均匀分布(在计算保证金后)。这是默认值。

  2. 内部传播:第一个和最后一个视图附加在链的每一端的约束上,其余视图均匀分布。

  3. 加权:当链被设置为扩散扩散到内部时,您可以通过将一个或多个视图设置为“匹配约束”(0dp)来填充剩余空间。默认情况下,空间均匀分布在每个设置为“匹配约束”的视图之间,但您可以使用layout_constraintHorizontal_weightlayout_constraintVertical_weight 属性为每个视图指定重要性权重 。如果你熟悉layout_weight线性布局,这种工作方式相同。因此,具有最高权重值的视图获得最大的空间; 具有相同权重的视图获得相同的空间量。

  4. 打包:视图打包在一起(在计算保证金后)。然后,您可以通过更改链的头部视图偏差来调整整个链的偏

    constraint-chain_2x.png

    图14.具有两个视图的水平链

constraint-chain-styles_2x.png

图15.每种链式的示例

链的“头部”视图(水平链中的最左侧视图和垂直链中的最顶部视图)以XML格式定义链的样式。但是,您可以通过选择链中的任何视图,然后单击 视图下方显示的链按钮 ,在展开展开打包之间切换[站外图片上传中...(image-939907-1534406093290)]。

要快速创建的视图的链,其全部选中,右键单击一个视图,然后选择水平居中垂直居中,创建水平或垂直产业链,分别。有关更多信息,请参阅以下视频:

test3.gif

视频4.从操作菜单创建链

使用链时需要考虑的其他一些事项:

  • 视图可以是水平链和垂直链的一部分,从而可以轻松构建灵活的网格布局。
  • 只有当链的每一端被约束到同一轴上的另一个对象时,链才能正常工作,如图14所示。
  • 虽然链的方向是垂直的或水平的,但使用一个方向不会使视图在该方向上对齐。因此,请确保包含其他约束以实现链中每个视图的正确位置,例如对齐约束

自动创建约束

您可以将每个视图移动到所需的位置,而不是在将每个视图放置到布局中时向每个视图添加约束,然后单击“ 推断约束”

img
以自动创建约束。

Infer Constraints扫描布局以确定所有视图的最有效约束集。它尽最大努力将视图限制在当前位置,同时允许灵活性。您可能需要进行一些调整,以确保布局响应您想要的不同屏幕尺寸和方向。

Autoconnect是一个单独的功能,可以打开或关闭。打开时,它会在您将每个视图添加到布局时自动为每个视图创建两个或多个约束,但仅在适当时将视图约束到父布局。Autoconnect不会为布局中的其他视图创建约束。

默认情况下禁用自动连接。您可以通过单击

img
布局编辑器”工具栏中的“启用自动连接”来启用它。

关键帧动画

在a中ConstraintLayout,您可以使用ConstraintSetTransitionManager对元素的大小和位置进行动画处理 。

注意:可在Android 4.0支持库(API级别14)或更高版本中找到。 TransitionManager

A ConstraintSet是一个轻量级对象,表示a中所有子元素的约束,边距和填充ConstraintLayout。将a ConstraintSet应用于显示时ConstraintLayout,布局会更新其所有子项的约束。

要使用ConstraintSets构建动画,请指定两个布局文件,这些文件充当动画的开始和结束关键帧。然后,您可以ConstraintSet从第二个关键帧文件加载a 并将其应用于显示的文件ConstraintLayout

重要说明:ConstraintSet动画仅为子元素的大小和位置设置动画。它们不会为其他属性(例如颜色)设置动画。

下面的代码示例显示了如何动画将单个按钮移动到屏幕底部。

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) { 
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition();]
    constraintLayout.apply(constraintSet)
}
// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation as well as final colors and text sizes

<?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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions

<?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">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容