前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android-ConstraintLayout详解(下)

Android-ConstraintLayout详解(下)

作者头像
android_薛之涛
发布2018-12-06 10:02:32
2K0
发布2018-12-06 10:02:32
举报
文章被收录于专栏:Android-薛之涛Android-薛之涛

我们接着上一篇说一说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吧,这个属性一直都有。

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

代码语言:javascript
复制
goneMarginLeft
goneMarginBottom
goneMarginRight
goneMarginTop

效果如下:

image.png

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

代码语言:javascript
复制
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. 圆型布局

主要靠这几个属性:

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

效果图如下:

image.png

4.尺寸限制(Dimensions )

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

代码语言:javascript
复制
常用:
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

主要是这段代码:

代码语言:javascript
复制
        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为例 ··

代码语言:javascript
复制
  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。

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.Margin属性
  • 2.Baseline,end和start属性
  • 3. 圆型布局
  • 4.尺寸限制(Dimensions )
  • 5. 百分比尺寸(Percent Dimensions)和 宽高比(Ratio)
  • 6. 组(Group)
  • 7. Placeholder
  • 8.Barrier(屏障)
  • 9.layout_optimizationLevel
  • 10.ConstraintSet。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档