网站生成手机站,怎么利用网站做cpa推广,动物自己做的网站,wordpress极简免费主题目录 前言
一、ConstraintLayout基本介绍
二、ConstraintLayout使用步骤
1、引入库
2、基本使用#xff0c;实现按钮居中。相对于父布局的约束。
3、A Button 居中展示#xff0c;B Button展示在A Button正下方#xff08;距离A 46dp#xff09;。相对于兄弟控件的约束…目录 前言
一、ConstraintLayout基本介绍
二、ConstraintLayout使用步骤
1、引入库
2、基本使用实现按钮居中。相对于父布局的约束。
3、A Button 居中展示B Button展示在A Button正下方距离A 46dp。相对于兄弟控件的约束。
4、好用的Guideline
5、角度定位
6、链
7、不可见性行为
8、百分比
9、宽度比
10、基线baseline
11、偏移
总结 前言 目前Android的默认布局早已改成ConstraintLayout但是很多小伙伴还是使用过去的相对布局觉得老的布局用起来熟悉新布局使用复杂从而失去了探索新大陆的机会今天就让我们一起揭开ConstraintLayout的面纱掌握Android新布局的使用方法。
一、ConstraintLayout基本介绍 传统的布局容易在版本迭代过程中造成页面层级过多的问题俄罗斯套娃一是对页面渲染有影响二是不利于开发者的后期维护。RelativeLayout能够在一定层度上减少页面层级但是其不够灵活不支持百分比而ConstraintLayout功能则类似于加强版的相对布局可以轻松的完成其他布局不好实现的一些布局效果因此我们要学习它的使用方法。
二、ConstraintLayout使用步骤 1、引入库 早期创建项目需要手动引入现在官方已经自动引入。
implementation androidx.constraintlayout:constraintlayout:2.0.4
2、基本使用实现按钮居中。相对于父布局的约束。 创建一个layout布局后根布局为android.support.constraint.ConstraintLayout。添加一个Button后为Button增加水平和垂直约束条件约束对象为父布局
layout_constraintBottom_toBottomOf 底部约束
layout_constraintTop_toTopOf 顶部约束
layout_constraintStart_toStartOf 左边约束
layout_constraintEnd_toEndOf 右边约束由此Button的上下左右都以父布局为约束即可实现Button的居中展示。代码如下
?xml version1.0 encodingutf-8?
android.support.constraint.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentButtonandroid:idid/button3android:layout_width200dpandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent //android.support.constraint.ConstraintLayout
3、A Button 居中展示B Button展示在A Button正下方距离A 46dp。相对于兄弟控件的约束。 A Button居中后垂直方向为B Button添加约束layout_constraintTop_toBottomOf约束对象为A Button水平方向约束条件参考A Button使之居中即可。
?xml version1.0 encodingutf-8?
android.support.constraint.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentButtonandroid:idid/buttonAandroid:layout_width200dpandroid:layout_heightwrap_contentandroid:textA Buttonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent /Buttonandroid:idid/buttonBandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginTop46dpandroid:textB Buttonapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toBottomOfid/buttonA //android.support.constraint.ConstraintLayout
效果图如下 如果B Button的宽度和A Button的宽度一致如何实现呢当然我们可以在上边代码的基础上将B的宽度写成200dp就可以实现但是如果将来 A宽度修改了那么B的宽度我们也需要修改一下。有没有简单的方式能让B的宽度同A的宽度呢当A宽度变化后B宽度也随之变化。 我们调整一下B Button的宽度使用ConstraintLayout的MATCH_CONSTRAINT属性所谓MATCH_CONSTRAINT其实是将宽度或者高度设置成0dp来表示的然后将B的约束条件由父布局调整为A Button这样B的左边和A的左边对齐B的右边和A的右边对齐宽度因为是MATCH_CONSTRAINT的0dp之后B的宽度将同A的宽度一样。代码如下 Buttonandroid:idid/buttonBandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_marginTop46dpandroid:textB Buttonapp:layout_constraintEnd_toEndOfid/buttonAapp:layout_constraintStart_toStartOfid/buttonAapp:layout_constraintTop_toBottomOfid/buttonA /
效果图如下 如果想实现A Button居中展示B Button位于A Button下方并且占有A下的所有空间如何实现呢我们稍作调整将B Button的左右约束对象改为父布局增加B的底部约束layout_constraintBottom_toBottomOf约束对象同样为父布局并且将B的高度修改成MATCH_CONSTRAINT模式0dp这样B就会占满A下方剩余的整个空间。代码如下
?xml version1.0 encodingutf-8?
android.support.constraint.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentButtonandroid:idid/button1android:layout_width200dpandroid:layout_heightwrap_contentandroid:textA Buttonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent /Buttonandroid:idid/button2android:layout_width0dpandroid:layout_height0dpandroid:layout_marginTop46dpandroid:textB Buttonapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toBottomOfid/button1app:layout_constraintBottom_toBottomOfparent//android.support.constraint.ConstraintLayout
效果图如下 可以看出当我们将高度或者宽度设置为0dp时那大小将依赖于约束条件而定。
4、好用的Guideline 如果我们想让两个按钮一起水平居中的如何实现呢一种方式是我们可以用原来的RelativeLayout里边放置两个Button,然后我们让RelativeLayout居中达到目的。但是有了 ConstraintLayout显示不用再套一层。我们可以直接使用ConstraintLayout的guideline,即添加一条准线可以把他当成一个特殊的控件使用因为它最终不会显示在设备屏幕上仅供开发者设计使用。实现步骤如下先添加一条垂直的guideline默认是采用的数值模式可以设置距离父布局左边多少dp点击上面的小三角可以切换到百分比模式左右拖动到50%即可水平居中。再添加两个Button让左边Button的右边约束到guideline右边Button的左边约束到guideline即可让两个Button共同水平居中。 ?xml version1.0 encodingutf-8?
android.support.constraint.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid.support.constraint.Guidelineandroid:idid/guideline12android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:orientationverticalapp:layout_constraintGuide_percent0.5 /Buttonandroid:idid/button6android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toStartOfid/guideline12app:layout_constraintTop_toTopOfparent /Buttonandroid:idid/button7android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toEndOfid/guideline12app:layout_constraintTop_toTopOfparent /
/android.support.constraint.ConstraintLayout 可以看到Guideline有两条重要的设置通过android:orientationvertical设置方向通过app:layout_constraintGuide_percent0.5设置位置这里0.5即为50%。如果是数值模式的这里的设置由app:layout_constraintGuide_begin52dp 来控制。
5、角度定位 如果我们想让一行文字显示在另一行文字的右上方如何实现呢ConstraintLayout中提供了一种好用的角度定位。app:layout_constraintCircle定义约束在哪一个控件上
app:layout_constraintCircleAngle控制位于约束对象的某一角度
app:layout_constraintCircleRadius控制距离约束对象的圆心的距离。 TextViewandroid:idid/button1android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text基础文本app:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent /TextViewandroid:idid/button9android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text角度文本app:layout_constraintCircleid/button1app:layout_constraintCircleAngle45app:layout_constraintCircleRadius50dptools:ignoreMissingConstraints / 效果图如下 6、链 当横向或纵向有超过一个控件约束在一起就可以组成一条链。有不同样式的链通过链头中的app:layout_constraintHorizontal_chainStyle控制采取哪种样示spread_inside,packed,spread。
?xml version1.0 encodingutf-8?
android.support.constraint.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentButtonandroid:idid/button10android:layout_widthwrap_contentandroid:layout_heightwrap_contentapp:layout_constraintHorizontal_chainStylespreadandroid:textButtonapp:layout_constraintEnd_toStartOfid/button11app:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent /Buttonandroid:idid/button11android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toEndOfid/button10app:layout_constraintEnd_toStartOfid/button12app:layout_constraintTop_toTopOfparent /Buttonandroid:idid/button12android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toEndOfid/button11app:layout_constraintTop_toTopOfparent /
/android.support.constraint.ConstraintLayout
不同样式的链效果图 另外我们也可以按照权重来设置链的显示效果。类似于LinearLayout中的weight。将链方向上的大小设置为0dp通过app:layout_constraintHorizontal_weight设置权重。示例代码如下
?xml version1.0 encodingutf-8?
android.support.constraint.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentButtonandroid:idid/button10android:layout_width0dpandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintEnd_toStartOfid/button11app:layout_constraintHorizontal_weight1app:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent /Buttonandroid:idid/button11android:layout_width0dpandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintHorizontal_weight2app:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toEndOfid/button10app:layout_constraintEnd_toStartOfid/button12app:layout_constraintTop_toTopOfparent /Buttonandroid:idid/button12android:layout_width0dpandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintHorizontal_weight1app:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toEndOfid/button11app:layout_constraintTop_toTopOfparent /
/android.support.constraint.ConstraintLayout
中间的Button权重设置为2两侧的按钮权重设置为1效果图如下 7、不可见性行为 水平方向放置两个Button如下图所示A Button紧贴父布局左边 B Button约束在A的右侧B距离A100dp这个只需要加margin即可很容易实现代码如下 Buttonandroid:idid/button13android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textButtonapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent/Buttonandroid:idid/button14android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginStart100dpandroid:textButtonapp:layout_constraintBottom_toBottomOfid/button13app:layout_constraintStart_toEndOfid/button13app:layout_constraintTop_toTopOfid/button13 /
效果图 假如A Button设置了不可见gone那么此时效果如下B Button距离左边起始位置100dp。 如果A不可见我们希望B距离左边真实位置150dpA可见时贴紧A如何实现呢
显然layout_marginStart不能实现要利用不可见行为可以达到目的。我们修改B中的代码由
layout_marginStart改成 app:layout_goneMarginStart即可代码如下 Buttonandroid:idid/button13android:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textA Buttonandroid:visibilitygoneapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent/Buttonandroid:idid/button14android:layout_widthwrap_contentandroid:layout_heightwrap_contentapp:layout_goneMarginStart150dpandroid:textB Buttonapp:layout_constraintBottom_toBottomOfid/button13app:layout_constraintStart_toEndOfid/button13app:layout_constraintTop_toTopOfid/button13 /
效果图如下 8、百分比 实现一个横向的百分比视图A Button占50%B Button占30%。app:layout_constraintWidth_defaultpercent将横向设置为百分比布局app:layout_constraintWidth_percent设置占用的大小0~1表示百分比。 Buttonandroid:idid/button13android:layout_width0dpandroid:layout_heightwrap_contentandroid:textA Buttonapp:layout_constraintWidth_defaultpercentapp:layout_constraintWidth_percent0.5app:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toStartOfid/button14app:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent/Buttonandroid:idid/button14android:layout_width0dpandroid:layout_heightwrap_contentandroid:textB Buttonapp:layout_constraintWidth_defaultpercentapp:layout_constraintWidth_percent0.3app:layout_constraintBottom_toBottomOfid/button13app:layout_constraintStart_toEndOfid/button13app:layout_constraintTop_toTopOfid/button13 / 效果图如下 9、宽度比 例如只给了宽度是100dp,高度是0dp,想让高度是宽度的2倍那可以设置app:layout_constraintDimensionRatio1:2即可实现。 Buttonandroid:idid/button13android:layout_width100dpandroid:layout_height0dpapp:layout_constraintDimensionRatio1:2android:textA Buttonapp:layout_constraintStart_toStartOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintTop_toTopOfparent/ 效果如如下 10、基线baseline 水平方向上有两个TextView,代码如下 TextViewandroid:idid/textView1android:layout_widthwrap_contentandroid:layout_height160dpandroid:backgroundcolor/light_blueandroid:gravitycenterandroid:texttextview1android:textColorcolor/blackandroid:textStyleboldapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparenttools:ignoreHardcodedText /TextViewandroid:idid/textView2android:layout_width140dpandroid:layout_height100dpandroid:backgroundcolor/grayandroid:gravitycenterandroid:textStyleboldandroid:texttextview2app:layout_constraintBottom_toBottomOfid/textView1app:layout_constraintStart_toEndOfid/textView1tools:ignoreHardcodedText / 效果图如下 现在想让两个Textview的文本对齐就可以使用基线。修改textview2的代码添加app:layout_constraintBaseline_toBaselineOfid/textView1。 效果图如下 11、偏移 垂直偏移 属性 ( app:layout_constraintVertical_bias )
水平偏移 属性 ( app:layout_constraintHorizontal_bias)
以水平方向为例当水平方向左右设置了约束后可以设置偏移量如0.9表示左侧的边距/左右边距和0.9。示例代码如下 TextViewandroid:idid/textView2android:layout_width140dpandroid:layout_height100dpandroid:layout_marginTop16dpandroid:backgroundcolor/grayandroid:gravitycenterandroid:texttextview2android:textStyleboldapp:layout_constraintStart_toStartOfparentapp:layout_constraintEnd_toEndOfparentapp:layout_constraintTop_toTopOfparentapp:layout_constraintHorizontal_bias0.9/ 效果图如下 总结 本文仅仅简单介绍了ConstraintLayout一些常用设置的的使用而ConstraintLayout还有更多的属性可供我们使用大家一起学习吧
