Android-ConstraintLayout详解(下)

我们接着上一篇说一说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。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

标签

p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,

23030
来自专栏云计算教程系列

使用JavaScript和D3.js实现数据可视化

D3.js是一个JavaScript库。它的全称是Data-Driven Documents(数据驱动文档),并且它被称为一个互动和动态的数据可视化库网络。20...

74430
来自专栏岑志军的专栏

ReactNative-综合案例(01)

16030
来自专栏Sorrower的专栏

界面无小事(九): 做个好看的伸缩头部

17520
来自专栏王磊的博客

vscode使用汇总——常用插件、常用配置、常用快捷键

一、代码提示快捷键设置:(keybindings.json) [ { "key": "ctrl+j", "command...

51570
来自专栏coding for love

CSS进阶06-相对定位Relative Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

7920
来自专栏python学习指南

Python爬虫(二十四)_selenium案例:执行javascript脚本

本章叫介绍如何使用selenium在浏览器中使用js脚本,更多内容请参考:Python学习指南 隐藏百度图片 #-*- coding:utf-8 -*- ...

235100
来自专栏进步博客

iOS编程101:如何创建圆形头像和圆角图片

IOS7的一个变化是相对于方形图像,更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像,如联系人和电话应用。这篇短文中,我们将探讨CALayer类,...

13920
来自专栏猛牛哥的博客

快手( AAuto Quicker ) v6.5.06更新记录

14330
来自专栏余生开发

markdown基本语法

markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

11640

扫码关注云+社区

领取腾讯云代金券