Android-ConstraintLayout详解(下)

作者: 薛之涛 | 来源:发表于2018-11-03 21:18 被阅读13次

    我们接着上一篇说一说ConstraintLayout的其他属性,如果没看过上一篇:Android-ConstraintLayout详解
    先罗列一下此次的会议内容,我们此次介绍的属性如下:

    • Margin
    • Baseline,end和start属性
    • 圆型布局
    • 尺寸限制
    • 百分比尺寸(Percent Dimensions)和 宽高比(Ratio)
    • 组(Group)
    • Placeholder
    • Barrier
    • layout_optimizationLevel
    • ConstraintSet (约束集,实现动画效果)

    别怕,都比较简单。

    1.Margin属性

    正常使用,比如我们让登陆和注册按钮中间有20dp的间距,同正常使用ReleativeLayout的margin没有区别:

    image.png
    怎么报红呢?不是说marginStart和marginLeft没有区别吗?我们看一下提示
    image.png

    原来是因为我们工程支持的最低sdk版本是14,而marginStart出现在sdk最低17,所以,我们根据提示增加一个marginLeft吧,这个属性一直都有。

    有一个问题,我的注册按钮和登陆按钮建立了约束,那如果我的登陆按钮隐藏,就会造成注册按钮向左移动,那我想让注册按钮原地不动,怎么办?我们试试下面的属性

    goneMarginLeft
    goneMarginBottom
    goneMarginRight
    goneMarginTop
    

    效果如下:


    image.png

    注意:这里我去掉了之前的

    app:layout_constraintStart_toEndOf="@+id/btn_login"属性
    注:去掉app:layout_constraintStart_toEndOf属性layout_editor_absoluteX="189dp"就会显示
    

    别问我问什么知道在登陆按钮gone后,注册按钮距左边是189dp。原因就是:你没看到tools:layout_editor_absoluteX="189dp"这个属性吗?这个属性是系统帮我们生成的X轴的绝对坐标。

    2.Baseline,end和start属性

    关于end和start属性我之前说过区别,Baseline(基线)可能没有提到,官方有一张图可以很好的表达出来,如下:


    image.png

    比如我们让注册按钮的基线和登陆按钮添加约束( app:layout_constraintBaseline_toBaselineOf)

    image.png

    有没有看到效果图中登陆和注册按钮字体的下方有一个白线关联了约束

    3. 圆型布局

    主要靠这几个属性:

     app:layout_constraintCircle   引用控件的id
    app:layout_constraintCircleAngle   据引用id的角度,从0度到360度
    app:layout_constraintCircleRadius  半径(据引用id圆心的距离,可变)
    

    效果图如下:


    image.png

    4.尺寸限制(Dimensions )

    尺寸设置之前也有提到就是常用的:

    常用:
    maxHeight
    maxWidth
    minWidth
    minHeight
    
    不常用:
    layout_constraintHeight_max
    layout_constraintHeight_min
    layout_constraintWidth_max
    layout_constraintWidth_min
    
    注:这些属性可以给普通控件设置也可以给ConstraintLayout设置。
    

    常用的没啥好说的,我们了解一下不常用的:

    image.png
    设置0dp实际上是MATCH_CONSTRAINT,那我们设置layout_constraintHeight_max 和 layout_constraintWidth_max 看一下效果:
    image.png

    注意:设置layout_constraintHeight_max生效的前提是layout_width和layout_height设置为0dp

    5. 百分比尺寸(Percent Dimensions)和 宽高比(Ratio)

    关于这个宽高比,我上一篇文章说过,就是app:layout_constraintDimensionRatio="16:6"这个属性,这里设置宽高比为16:6
    那我们看一看百分比:

    image.png
    主要是这段代码:
            app:layout_constraintHeight_default="percent"
            app:layout_constraintHeight_percent="0.1"
            app:layout_constraintWidth_default="percent"
            app:layout_constraintWidth_percent="0.5"
    

    6. 组(Group)

    image.png
    主要是这个属性:
    app:constraint_referenced_ids

    7. Placeholder

    placeholder这个词在英文中的意思是占位符,顾名思义,它就是用来占位的。我们直接代码,我的目的是在布局底部的左右两边各放一个Imageview,第一部先创建一个placeholder的文件夹,和平时创建一样,内容如下:

    image.png
    在某个布局文件引用如下:
    image.png

    明白了吧,placeholder就是先设置控件的一些属性,最后关联对应的控件,也可以代码绑定,以我们的demo为例
    ··

      Placeholder placeholderOne;
        ImageView imageViewOne;
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_login);
            placeholderOne=findViewById(R.id.placeholderone);
            imageViewOne=findViewById(R.id.placeholder_ivone);
            placeholderOne.setContentId(imageViewOne.getId());
    
        }
    

    8.Barrier(屏障)

    上代码:


    image.png

    通过图和效果可以很清楚知道代码的意思,另外barrier的属性barrierDirection 指定方向,constraint_referenced_ids引用的控件 id(多个id以逗号隔开)

    9.layout_optimizationLevel

    layout_optimizationLevel是一个标签,用于配置优化级别。它的可选值如下:

    • barriers:找出xml中的屏障,并用简单的约束取代它们
    • direct:优化那些直接连接到固定元素的元素,例如屏幕边缘或引导线,并继续优化直接连接到它们的任何元素。
    • standard:这是包含 barriers 和 direct 的默认优化级别。
    • dimensions:通过计算维度来优化布局传递。
    • chains:计算出如何布置固定尺寸的元素链。
      使用方法如下:
      image.png

    10.ConstraintSet。

    这个还没有运用,以后更新。

    相关文章

      网友评论

      • 莫语莫雨:代码颜色调成这样,你眼睛不花吗
        薛之涛:@clbDream 我这篇文章已经用了,这么不明显吗?
        莫语莫雨:@薛之涛 你可以使用简书自带的markdown编辑
        薛之涛:可能已经花了,感觉还挺好:smiley:

      本文标题:Android-ConstraintLayout详解(下)

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