Android开发Android开发Android开发经验谈

Android-ConstraintLayout详解(下)

2018-11-03  本文已影响13人  薛之涛

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

别怕,都比较简单。

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是一个标签,用于配置优化级别。它的可选值如下:

10.ConstraintSet。

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

上一篇下一篇

猜你喜欢

热点阅读