约束布局从可视化到代码

本文链接： https://blog.csdn.net/qq_42171948/article/details/88318215

其实本来应该是从代码到可视化的才对，但是自从初学的时候知道可以直接拖拉，一直就没再手打过代码了。结果实习的时候boss告诉我要先熟悉好代码然后再可视化。好了我就重新复习了一下，开始了码布局的生活~

好了进入正题：概念啥的就不说了，主要是给自己做个记录。

为啥用ConstraintLayout

首先，为什么要用约束布局？其他布局的话在做复杂布局的时候，会嵌套多层，能想象到有多丑了吧，嗯，很丑。而且很影响app的性能。性能这一点在谷歌官方的一篇文章里面有详细写到解析ConstraintLayout的性能优势.

将相同属性放入style

有的时候会出现这种情况，比如说几个textview的字体颜色，字体大小都是一样的，在这种情况下如果我们将相关的代码在每一个控件都写一遍的话，会显得很影响效率。这个时候，我们可以将相同的属性从XML中抽取出来，写进style中，xml中只需引入style="@style/xx"即可。
有一个小点要注意：跟其他控件ID相关的，和parent相关的，都不可以抽出来。要不然无效。layout_width和layout_height也可以抽取出来。

EditText下划线长度

po一个例子：怎么显示这样的效果？
edittext那儿怎么弄？
用edittext?没错就是edittext！那edittext下面的横线呢？你以为会像图片里面的那样长度？那你就和我一样太天真了，长度会随着字的长度而改变，就像你用word编辑的时候下面的下划线一样。那怎么办？很简单，利用属性android:background="@null"去掉edittext自带的下划线。自己在它下面加个view，长度颜色你自己定义~记得要放在hint上面。

大坑

有一个坑了我很久的错误，在写recyclerview的item的布局的时候，整体布局弄成了match_parent,结果显示的时候死活只显示一行。后来才知道是被全占满了~嗯嗯。自己踩过的坑要记得。

includefontpadding

很神奇的，我也是这两天才知道的，textview的content和边之间居然还有不知道多大的距离，字体越大，这个距离也会越大，真是神奇了bo~那么这样子的话即使你码了top_to_top或者bottom_to_bottom，也很难在显示的时候实现对齐效果。所以，对待textview的时候，默认给他加includefontpadding=“false”。如果还是不行，那么只能将最小字号的字和需要对齐的对齐，其他text再和这个对齐。

负margin?

约束布局中，负的margin没有用

layout_goneMarginRight…

先po俩图：

可以很明显地看到未绑定和已绑定的textview位置是不同的，绑定后除了变换了文字描述外，位置也下移了一些。那么如何实现这样的效果呢？

<View
        android:id="@+id/view_bind_account_background"
        android:layout_width="0dp"
        android:layout_height="82dp"
        android:layout_marginTop="10dp"
        android:background="@color/user_white_fff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_pay_method_label" />
        
    <ImageView
        android:id="@+id/iv_alipay_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="24dp"
        android:src="@mipmap/icon_zfb1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view_bind_account_background" />

    <TextView
        android:id="@+id/tv_bind_alipay_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginBottom="10dp"
        android:text="@string/user_please_bind_alipay"
        android:textAppearance="@style/user_TextAppearance.1a1a1a_14"
        app:layout_constraintBottom_toTopOf="@+id/tv_alipay_account"
        app:layout_constraintStart_toEndOf="@+id/iv_alipay_icon"
        app:layout_constraintTop_toTopOf="@+id/iv_alipay_icon"
        app:layout_goneMarginBottom="5dp" />

    <ImageView
        android:id="@+id/iv_go"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="28dp"
        android:src="@mipmap/turn_right_grey"
        app:layout_constraintBottom_toBottomOf="@id/iv_alipay_icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/iv_alipay_icon" />

    <TextView
        android:id="@+id/tv_alipay_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:text="张曼玉（dankjlcfnakj）"
        android:textColor="@color/common_grey_b3b3b3"
        android:textSize="11sp"
        app:layout_constraintBottom_toBottomOf="@id/iv_alipay_icon"
        app:layout_constraintStart_toEndOf="@id/iv_alipay_icon" />

可以看到，tv_alipay_account是和iv_alipay_icon底部对齐的，那么当他消失了之后，tv_bind_alipay_account需要往下移，其实也是根据iv_alipay_icon的底部往下移动。那么就可以通过在tv_bind_alipay_account增加一个属性app:layout_goneMarginBottom="5dp"来达到下移的目的。这个的意思是，当tv_alipay_account消失后，距离其底部约束控件的距离。当然也有app:layout_goneMarginRight等其他方向上的属性。

layout_constraintDimensionRatio

在使用imageview的时候，很多时候我们不知道图片的尺寸，但是可以确定的是，应该得要符合设计稿的比例。所以可以将不确定的那边设为0dp,根据另外一边的长度和layout_constraintDimensionRatio来确定另外那一边。layout_constraintDimensionRatio不管在什么情况下，都是宽高比。那如果两边都是0dp呢，见下图
code:
在这里插入图片描述
preview:

scaleType

scaleType这个属性也是在写imageview的时候遇到的，之前的imagebutton也有这个属性。
这个属性有几个值，一直想好好对比一下。
有下面这几个：
fitXY – 不管原图大小和比例，将其拉伸或压缩以至填满imageview大小
fitStart – 把原图按照比例放大缩小到ImageView的高度，显示在ImageView的start（前部/上部）。
fitEnd – 把原图按照比例放大缩小到ImageView的高度，显示在ImageView的end（后部/下部/尾部）。
fitCenter – 把原图按照比例放大缩小到ImageView的高度，显示在ImageView的center（中部）。
matrix – 不改变原图的大小，从ImageView的左上角开始绘制，超出部分做剪切处理。

图片比imageview大

center --保持原图带下比例，将其显示在imageview中部
宽高都设置为wrap_content的情况是这样
在这里插入图片描述
centerInside --不知道怎么说，看图

centerCrop–不知道怎么说，看图

TextView

其实布局的话也不是随便写的，也要考虑的适配问题和以后的修改扩充问题。比如说这个
在这里插入图片描述
是一个taveview没错是吧，嘿我就这么写了

好像是没什么问题，但如果有一天字很长呢？像这样
状态1
状态2
很明显，应该要考虑到这个问题。我们这里将字的最大长度和行数进行设置，超出的部分用省略号表示，textview有这两个属性来搭配实现这个效果。

maxlines和ellipsize。maxlines设置文字最多可显示多少行，ellipsize设置省略号在哪个方向，当显示的内容超过既定的大小之后会显示省略号。记得！！！要给textview一个具体的宽度！！！贴个图
在这里插入图片描述

bias偏移比例

layout_constraintHorizontal_bias //控件的水平偏移比例
layout_constraintVertical_bias //控件的垂直偏移比例
如果在布局文件中没有明确的写出偏移比例，那么系统默认偏移比例值为：0.5 。
将一个水平垂直方向都居中的控件设置一下偏移比例会如何？
我们在新创建工程的时候，默认的布局文件都会有一个垂直居中的textview，他的默认已经是0.5bias了。那么如果设layout_constraintHorizontal_bias=0.4 layout_constraintVertical_bias=0.6呢？

看图，没错，控件会在水平方向向右偏移40%的比例，垂直方向向下偏移60%的比例。注意是以左上角为原点。

在这里插入图片描述

layout_constraintBaseline_toBaselineOf

一般用于对齐文字。有的时候空间的padding不一致，但是你又想要他里面的文字content对齐，用bottom_to_bottom没用吧？那么这个时候就得要layout_constraintBaseline_toBaselineOf登场了。轻轻松松对齐文字！

FrameLayout应用

记录一下这个实现，当时自己实现得不好，今天看了人家的代码，学习了
在这里插入图片描述

跟约束布局相关的知识点还有很多，先记录到这里吧，以后再进行补充。