ConstraintLayout 约束布局

  约束布局ConstraintLayout

  这种布局方式出现已经有一段时间了,刚出现的时候一直以为这种布局只是针对拖拽使用的布局,最近在新项目里看到了这种布局,又重新学习了这种布局,才发现以前真的是图样图森破啊,这种新的布局方式真的太好用了!

1.引入

使用之前需要添加这种布局的依赖

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

2.使用

2.1基本布局方式:

  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf

举个栗子:

layout_constraintLeft_toLeftOf="parent"  //大概意思就是这个控件的左边跟父控件的左边对齐layout_constraintRight_toLeftOf="xxx"  //该控件的右边跟xxx的左边对齐

就像这里栗子说的一样,用这些约束方式就可以约束一个控件的具体位置

这里大家发现这种布局方式跟RelativeLayout是很相似的

2.2 圆形定位

1layout_constraintCircle :引用另一个小部件ID 2layout_constraintCircleRadius :到其他小部件中心的距离 3layout_constraintCircleAngle :小部件应该在哪个角度(度数,从0360

2.3 width设置为0的用法:

当设置width为0 的时候可以使该控件填充剩余空间,

那么我们想使用LL的权重特性该怎么办呢?ConstraintLayout同样也是支持的

layout_constraintHorizontal_weight="1"

约束布局里也提供了权重的方法约束宽度,在使用上一定要注意使用权重的控件一定要约束完整,注意:相互约束的控件有Visible差异并不影响约束的完整,使用权重的控件width一定要设置为0

1<Button 2 android:id="@+id/btn_01" 3 android:layout_width="0dp" 4 android:layout_height="wrap_content" 5 android:text="01" 6 app:layout_constraintHorizontal_weight="1" 7 app:layout_constraintLeft_toLeftOf="parent" 8 app:layout_constraintRight_toLeftOf="@id/btn_02" 9 app:layout_constraintTop_toBottomOf="@id/textView" /> 10 11 <Button 12 android:id="@+id/btn_02" 13 android:layout_width="0dp" 14 android:layout_height="wrap_content" 15 android:text="02" 16 android:visibility="gone" 17 app:layout_constraintHorizontal_weight="1" 18 app:layout_constraintLeft_toRightOf="@id/btn_01" 19 app:layout_constraintRight_toLeftOf="@id/btn_03" 20 app:layout_constraintTop_toBottomOf="@id/textView" /> 21 22 <Button 23 android:id="@+id/btn_03" 24 android:layout_width="0dp" 25 android:layout_height="wrap_content" 26 android:text="03" 27 app:layout_constraintHorizontal_weight="1" 28 app:layout_constraintLeft_toRightOf="@id/btn_02" 29 app:layout_constraintRight_toRightOf="parent" 30 app:layout_constraintTop_toBottomOf="@id/textView" />

这里发现这种布局方式跟LinearLayout是有相似的地方

这里就是这种布局方式的优势所在了

2.4 DimensionRatio比例属性

1app:layout_constraintDimensionRatio="W,16:9" 2app:layout_constraintDimensionRatio="H,16:9"

这个功能就很牛逼了,过去我们想要指定控件的宽高比例只能在代码中指定宽高,在约束布局中直接使用“尺寸比例”的参数可以直接设置比例

2.5 bias偏移属性

1app:layout_constraintHorizontal_bias="0.9" 2app:layout_constraintVertical_bias="0.9" 3 4<TextView 5 android:id="@+id/textView2" 6 android:layout_width="100dp" 7 android:layout_height="100dp" 8 android:background="@color/theme" 9 app:layout_constraintBottom_toBottomOf="parent" 10 app:layout_constraintHorizontal_bias="0.9" 11 app:layout_constraintLeft_toLeftOf="parent" 12 app:layout_constraintRight_toRightOf="parent" 13 app:layout_constraintTop_toTopOf="parent" 14 app:layout_constraintVertical_bias="0.9" />

这个属性在合理约束的时候可以使控件实现偏移,中间为0.5,取值范围为[0,1]

2.6 比例布局

1app:layout_constraintHeight_percent="0.2" 2app:layout_constraintWidth_percent="0.8"

在宽高设置为0的时候可以使用这两个属性直接设置控件的百分比

2.7 总结:

//基本定位
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

//圆形定位
layout_constraintCircle :引用另一个小部件ID
layout_constraintCircleRadius :到其他小部件中心的距离
layout_constraintCircleAngle :小部件应该在哪个角度(度数,从0到360)

layout_constraintBaseline_toBaselineOf

# 与left,right类似
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

# margin不需要解释
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

#当2个view有相对位置的依赖关系,当其中一个view设置1位gone时,这个比较有意思,比方说假设A设置为gone,后,B需要距离父布局的左侧200dp,
怎么办?这时候,goneMargin属性就派上用场啦,只要设置B的layout_goneMarginLeft=200dp即可。这样,A不为gone的时候,
B距离A 为android:layout_marginLeft ,A为gone时,B距离父布局左侧layout_goneMarginLeft200dp。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

layout_constraintHorizontal_bias
layout_constraintVertical_bias

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

layout_constraintVertical_weight

app:layout_constraintHeight_percent
app:layout_constraintWidth_percent

android:minWidth 设置布局的最小宽度
android:minHeight 设置布局的最小高度
android:maxWidth 设置布局的最大宽度
android:maxHeight 设置布局的最大高度

可以看出ConstraintLayout 是很全面的一种布局,集合了相对布局,线性布局的特点,同时能使用偏移和百分比的特性,所以省去了嵌套的麻烦,是布局达到了扁平化,省下了很多资源

by Jungle轶

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

CSS布局方式-静态布局

原文链接:什么是静态布局?静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用px单位来实现静态布局。优点它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图1:1

Android输入法遮挡了输入框,使用android:fitsSystemWindows="true"后界面顶部出现白条

问题1、页面布局文件:<LinearLayoutxmlns:android"http://schemas.android.com/apk/res/android"android:id"@id/layoutorderdetail"android:layoutwidth"matchparent"android:layoutheigh

Spinner使用

1.在xml文件设立布局文件<Spinner    android:layout\_width"wrap\_content"    android:layout\_height"wrap\_content"    android:layout\_below"@id/b1"    andro