ConstraintLayout常见问题总结

1. 两个控件之间怎么对齐

对齐在日常的开发中是常见的操作，在传统布局中 google 也给我们提供了 xxGravity 属性来进行控件之间的对齐操作，但是在日常的开发中，这种常规操作很多都需要嵌套一层父布局来实现，尤其是最外层布局不是 RV 的布局情况下这种情况尤为严重。
在介绍 constraintLayout 布局居中之前，我们先看一下 RV 布局中两个控件是怎么对齐的

代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <TextView
        android:id="@+id/text"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="TEST" />
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignBottom="@id/text"
        android:layout_alignTop="@id/text"
        android:layout_centerHorizontal="true"
        android:src="https://juejin.cn/post/@mipmap/ic_launcher" />
</RelativeLayout>
复制代码

图片居中于左边的 textView；
那么，在 contraintLayout 中怎么居中呢？其实与 RV 一致
上下居中靠
app:layout_constraintTop_toTopOf
app:layout_constraintBottom_toBottomOf
左右居中靠
app:layout_constraintLeft_toLeftOf
app:layout_constraintRight_toRightOf
在我们上述代码中，

android:layout_alignBottom="@id/text"
android:layout_alignTop="@id/text"
        将被
app:layout_constraintTop_toTopOf="@id/text"
app:layout_constraintBottom_toBottomOf="@id/text"
        替代
   
   .....................................
 
 android:layout_centerHorizontal="true"
 		将被
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent" 
  		替代  
复制代码

2. android:ellipsize=”end” 失效的问题

在布局中，我们标题如果过长的情况下我们就会设置这个属性，起到在末尾显示… 的功效。在传统布局中我们会这么写：

<TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:textColor="#ff000000"
        android:textSize="16dp"
        tools:text="飞利浦干湿两a~须a abc def飞利浦干湿两a~须a abc def飞利浦干湿两a~须a abc de" />
复制代码

但是这段代码在 constraintLayout 中会失效，变成如下效果：

constraintLayout 中代码如下：

<TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="#ff000000"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="飞利浦干湿两a~须a abc def飞利浦干湿两a~须a abc def飞利浦干湿两a~须a abc de" />
复制代码

不仅 android:ellipsize=“end”失效，好像 app:layout_constraintLeft_toRightOf=”@id/sku_img” 也失效了。
仔细观察的话，文字都没显示全。

解决这个问题其实也很简单，将 android:layout_width=”wrap_content” 改为 0dp 即可。

如果在使用 android:layout_width=”wrap_content” 的同时，使用 app:layout_constrainedWidth=”true” 属性也可以达到一样的效果。

以上内容参考：blog.csdn.net/wzlyd1/arti…

3.include 标签不起作用

在约束布局 ConstraintLayout 中引入了一个布局，然后给引入布局添加了底部约束，让它距离底部 8dp，但是引入布局仍然出现在顶部。并报错如下：

问题分析：

报错原文：Layout parameter layout_marginBottom ignored unless both layout_width and layout_height are also specified on tag

看来在约束布局中引入新的控件或者布局时，若不重新指定一下控件或者布局的宽高，那么给它添加的约束便会失效。

解决办法：

给 include 标签中添加上 layout_width 和 layout_height 属性即可。

<include
    android:id="@+id/include"
    layout="@layout/function"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
 
复制代码