美文网首页
了解约束布局ConstraintLayout,眼睛会了,脑子会了

了解约束布局ConstraintLayout,眼睛会了,脑子会了

作者: Guxxxd | 来源:发表于2019-08-14 14:37 被阅读0次

    一.目录

    没有目录,想到哪写到哪,凑合看吧

    二.正文

    2.1 ConstraintLayout 怎么读

    read over and over again

    2.2 ConstraintLayout 怎么用

    2.2.1 了解一些该知道的

    1.ConstraintLayout是一个ViewGroup,可以在Api 9以上的Android系统使用。
    2.英语牛*的去官网了解一下吧>>>>>>ConstraintLayout官网介绍
    3.关于View的上下左右

    2.2.2 属性之我的哪里想挨着你的哪里(相对定位)
    layout_constraintLeft_toLeftOf(我的左边想挨着你的左边)
    layout_constraintStart_toStartOf(同上)
    
    layout_constraintLeft_toRightOf(我的左边想挨着你的右边)
    layout_constraintStart_toEndOf(同上)
    
    layout_constraintRight_toLeftOf
    layout_constraintEnd_toStartOf
    
    layout_constraintRight_toRightOf
    layout_constraintEnd_toEndOf
    
    layout_constraintTop_toTopOf
    layout_constraintTop_toBottomOf
    layout_constraintBottom_toTopOf
    layout_constraintBottom_toBottomOf
    
    layout_constraintBaseline_toBaselineOf
    

    举两个例子得了,概括一下就是把当前控件的上下和左右约束到另外一个控件的上下和左右。

    1.解释一下layout_constraintBaseline_toBaselineOf这个属性,基于文字的基线对齐,使用这个属性首先你使用的控件是有文字的(比如:Button,TextView,and so on),上图先。

    其实如果你看过自定义view关于文字的绘制,那关于Baseline一定不会陌生了,看图。


    引用自启舰大神博客中的图片

    题外话,对自定义View有兴趣的,可以学习一下>>>>>启舰:Android自定义控件三部曲文章索引

    2.2.3 属性之我在你的哪个方位(角度定位)

    根据角度和距离确定位置,看图说话


    角度定位--官方 角度定位--山寨
    2.2.4 属性之偏移
    1.外边距(Margin)
    android:layout_marginStart
    android:layout_marginLeft
    
    android:layout_marginEnd
    android:layout_marginRight
    
    android:layout_marginTop
    android:layout_marginBottom
    

    在ConstraintLayout中的控件使用Margin时必须先约束后才会生效,没有约束前设置么得用,看图。

    没有约束设置Margin 约束之后设置Margin
    2. 外边距(goneMargin)

    字面理解,gone了之后才有Margin,先看属性,再看图

    layout_goneMarginStart
    layout_goneMarginEnd
    layout_goneMarginLeft
    layout_goneMarginTop
    layout_goneMarginRight
    layout_goneMarginBottom
    

    设置了并没有看见偏移,那是因为你约束的左边控件没有gone


    把左边控件设置为gone,看效果。



    效果来了,很满意,其他都一样,自己玩吧。

    3. 按照百分比偏移

    ConstraintLayout中提供了两个偏移属性

    layout_constraintHorizontal_bias    水平偏移(取值:0~1.0)
    layout_constraintVertical_bias      垂直偏移(取值:0~1.0)
    

    当一个控件被约束了左边和右边之后(垂直一毛一样),默认会处在被约束的区间的中间,此时就是相当于layout_constraintHorizontal_bias这个属性被设置为0.5,看图。

    没有设置layout_constraintHorizontal_bias属性
    设置为0.5
    发现两种情况一样,我们可以大胆的猜想,当被约束了上下或者左右之后, layout_constraintHorizontal_biaslayout_constraintVertical_bias两个属性默认是0.5,一看源码,还真是,em。。。。

    总结:

    layout_constraintHorizontal_bias 
           取值[ 0,0.5 ),靠左,越小越左
           取值 0.5,被约束的区间正中间
           取值(0.5,1.0],靠右,越大越右
    
     layout_constraintVertical_bias
           取值[ 0,0.5 ),靠上,越小越上
           取值 0.5,被约束的区间正中间
           取值(0.5,1.0],靠下,越大越下
    
    2.2.5 关于控件的尺寸
    1. 使用固定的宽高
    2. 使用wrap_content,当控件的宽高被设置为wrap_content,可以设置最大、最小的属性来控制。
    android:minWidth -- set the minimum width for the layout
    android:minHeight -- set the minimum height for the layout
    android:maxWidth --  set the maximum width for the layout
    android:maxHeight -- set the maximum height for the layout
    

    官方还说了,当ConstraintLayout的版本为1.1以下时,使用这些属性的时候加上这两句:

    app:layout_constrainedWidth=”true|false”
    app:layout_constrainedHeight=”true|false”
    

    3.官方还说,咱尽量不要用match_parent了,写成0dp(MATCH_CONSTRAINT),然后用约束的方式让其达到效果。


    宽度MATCH 高度MATCH

    4.宽高比
    又是一个新鲜东西,当控件的宽和高其中至少有一个设置为0dp时,可以通过layout_constraintDimensionRatio这个属性设置宽高比来设置控件尺寸。

    默认是宽:高

    直接写比值时,默认是 宽:高,也可以指定是 宽:高 还是 高:宽,写法

    app:layout_constraintDimensionRatio="W,2:1"    宽:高
    app:layout_constraintDimensionRatio="H,2:1"    高:宽
    
    2.2.6 链(Chains)

    两个及以上控件按着如下方式约束,就成为一条链(纵向同理)


    官方截图
    代码实现

    一条链的第一个控件是这条链的链头

    官方截图
    我们可以在链头中设置 layout_constraintHorizontal_chainStyle来改变整条链的样式。
    layout_constraintHorizontal_chainStyle 有三种样式(都是在链头设置)
    1.spread  等比例展开(默认)
    2.spread_inside   等比例展开,但两头贴近parent
    3.packed    链的元素打包在一起,默认居中,可以通过layout_constraintHorizontal_bias属性设置偏移
    
    官方截图

    当一条链中的一个或者多个控件设置0dp(MATCH_CONSTRAINT)时,可以使用 layout_constraintHorizontal_weight(layout_constraintVertical_weight为纵向)创建一个权重链,如图。

    到这里,ContraintLayout的一些基本操作已经结束了,还有一些被官方称为Virtual Helper objects的东西,这些可以更好的帮助开发者提高开发效率。

    2.3 Virtual Helper objects

    官方截图

    大致意思就是,这些东西都挺好用的,以前有什么,现在又添加了一些什么,你看一看学一学,能更好的帮助你布局。

    2.3.1 Optimizer (in 1.1)

    在ConstraintLayout 1.1版本中公开了约束优化器,你可以通过app:layout_optimizationLevel这个属性来进行优化,有这些可供选择:

    none : no optimizations are applied(无优化)
    standard : Default. Optimize direct and barrier constraints only(默认,仅优化直接约束和屏障约束)
    direct : optimize direct constraints(优化直接约束)
    barrier : optimize barrier constraints(屏障约束)
    chain : optimize chain constraints (experimental)(优化链约束,还在实验中)
    dimensions : optimize dimensions measures (experimental),reducing the number of measures of match constraints elements(优化尺寸测量(实验),减少匹配约束元素的测量数量)
    
    2.3.2 Guideline

    简单解释就是辅助线,但是不会显示在界面上,主要属性:

    android:orientation="vertical | horizontal"
    app:layout_constraintGuide_begin   距离顶部或者左侧(主要看orientation设置的方向)多少距离画一条辅助线
    app:layout_constraintGuide_end    距离底部或者右侧(主要看orientation设置的方向)多少距离画一条辅助线
    app:layout_constraintGuide_percent   按百分比在屏幕上画一条辅助线
    

    一个小例子:一个按钮的宽度为屏幕的一半。


    2.3.3 Barrier(屏障)

    A,B,C三个控件,A,B的宽度都不固定,C控件要始终保持在A,B的右侧,这个时候就可以使用Barrier,介绍下属性先:

    app:constraint_referenced_ids  参考的控件id,可多个,中间用`,`隔开
    app:barrierDirection 屏障位于参考控件的位置,right、end、left、start、top、bottom
    
    2.3.4 Group

    把多个控件设置为一个组,可以用于集体显示和隐藏,看图。


    把左右两边的控件设置为一组,一起隐藏。


    2.3.5 Placeholder(占位符)

    占个位置,可以通过app:content这个属性把其他控件移动到这个位置上。

    到此,全部结束,关于ConstraintLayout的文章很多,写这篇文章也是巩固自己的所学所看所理解的,与大佬们共勉,如有侵权,联系立删。

    参考文献:

    相关文章

      网友评论

          本文标题:了解约束布局ConstraintLayout,眼睛会了,脑子会了

          本文链接:https://www.haomeiwen.com/subject/cnsbjctx.html