Android ConstraintLayout 使用与适配（适配篇）

本文主要是介绍Android ConstraintLayout 使用与适配（适配篇），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用方法见：ConstraintLayout 使用篇

如需了解 Android 适配原因与几种适配方式见：Android 屏幕适配总结

当下官方主推的框架 ConstraintLayout，Android 亲儿子中的太子。先说优点吧

1.开发快：直接拖拖拽拽

2.布局嵌套少(想想以前写个页面一堆 LinearLayout 嵌套十分恶心)

3.执行效率高，比传统布局要运行快很多

4.可以用来适配(可 TM 无法适配字体)

在此主要讨论适配方法，既然使用 ConstraintLayout 适配，那就不要出现 dp 值，dp 值哪能用来适配？？？不明白的看：Android 屏幕适配总结

适配案例1

先上设计图

上手一看，这不是上下的链式布局吗？但是不能这么搞，链式中单个元素的边距并不好调整，老老实实的一个一个添加吧。

View1

1.偏移量

View1 的上、下、左、右四个边全部约束在父布局。

宽是满屏，没有边距，因此宽使用 0dp (即：match_constraint 就可以，因为设置了左、右约束在父布局，设置为 0dp (match constraint) 即为父布局填充) ，或直接使用 match_parent。上边距是 30px，此处上下边约束在了父布局因此可以设置偏移量，而此处的偏移量是多少呢?公式是：

上偏移量 = 上边距 / (上边距+下边距)

同理

左偏移量 = 左边距 / (左边距+右边距)

因此 View1 的上偏移量 = 30 / (30 + 588) = 0.0485436893203883

2.比例设置

现在再说 View1 的高怎么设置，高是 22 px，此处肯定不能使用 22 dp。

还好 ConstraintLayout 提供了比例设置，比例设置是允许控件以宽或高为基准，设置高为宽的一个比例值，或设置宽为高的一个比例值。要使用比例设置需要将宽或高设置为 0dp (match_constraint)

例如 View1 的宽度值是父布局填充(360px)，要设置高为宽的一定比例，需要先将高设置为 MATCH_CONSTRAINT（0dp）。高在设计图中是 22px。那么以宽为基准，设置高为宽的一个比例值，就是 360 / 22 = 16.36363636363636 此值在 app:layout_constraintDimensionRatio 属性中设置。View1 的布局代码如下：

    <Viewandroid:id="@+id/view1"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="16.36363636363636"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.0485436893203883" />

View 2

View2 的左边、右边、下边还是约束在父布局，上边也可以约束在父布局，但是不推荐这么做，原因是如果屏幕过小，View2 有可能与 View1 重叠，因此应该将它约束在 View1 的下边。

3.尺寸百分比

View2 的宽是 300px，高是40px，这两个数值都无法做为比例的基准值，因为宽 300px 即不是设计图的满屏宽，高 40px 也不是设计图的满屏高。这个时候可以使用尺寸百分比属性：

layout_constraintWidth_percent (指定宽度为父尺寸宽的百分比，值为 0 和 1 之间的数值)

layout_constraintHeight_percent (指定高度为父尺寸高的百分比，值为 0 和 1 之间的数值)

使用这个属性的时候还需要设置另外两个属性

1.宽或高还是需要设置为 0dp (match_constraint)，宽或高哪个需要使用百分比就设置哪个。

2.设置 app:layout_constraintWidth_default="percent" 或 app:layout_constraintHeight_default="percent" (我测试不加这个属性也能使用，不过是官方建议的，还是加上好点)

父布局的宽就是设计图尺寸的宽 360px，View2 的宽是 300px，因此 layout_constraintWidth_percent 计算方式为：

300px / 360px = 0.833333333333333

宽度值设置完成，高度还是按宽的比例设置属性 layout_constraintDimensionRatio = 300px / 40px = 7.5

宽高设置完成，再说上边距的偏移量，还是老样子上偏移量 = 上边距(60px) / (上边距(60px)+下边距(488px)) = 0.1094890510948905

最后 View2 的布局代码如下

    <Viewandroid:id="@+id/view2"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="7.5"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/view1"app:layout_constraintVertical_bias="0.1094890510948905"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.8333333333333333" />

其他的 View 基本都是这个套路，不在重复说明，整体布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".AutoActivity"><Viewandroid:id="@+id/view1"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="16.36363636363636"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.0485436893203883" /><Viewandroid:id="@+id/view2"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="7.5"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/view1"app:layout_constraintVertical_bias="0.1094890510948905"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.8333333333333333" /><Viewandroid:id="@+id/view3"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="4.0625"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/view2"app:layout_constraintVertical_bias="0.0424528301886792"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.7222222222222222" /><Viewandroid:id="@+id/view4"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="1.666666666666667"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.1153846153846154"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/view3"app:layout_constraintVertical_bias="0.1040462427745665"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.2777777777777778" /><Viewandroid:id="@+id/view5"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintDimensionRatio="1.395348837209302"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.3272727272727273"app:layout_constraintStart_toEndOf="@+id/view4"app:layout_constraintTop_toTopOf="@+id/view4"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.3333333333333333" /><Viewandroid:id="@+id/view6"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/black"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="2.947368421052632"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.375"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/view5"app:layout_constraintVertical_bias="0.9735449735449735"app:layout_constraintWidth_default="percent"app:layout_constraintWidth_percent="0.7777777777777778" />
</androidx.constraintlayout.widget.ConstraintLayout>

代码完成还是要用实事来验证一下，结果如下

此处用两种特殊屏幕验证，在1080X1920 dpi160 的屏幕下完全没问题。在 720X1200 dpi320 的屏幕下也基本一致，但是此屏幕下使用 dp+修改 density 值的方式是有问题的，在上篇 Android 屏幕适配总结使用 dp + 修改 density 适配的弊端中有过案例

适配案例2

案例1中只有图片没有文字，使用 ConstraintLoayout 没问题，但是 ConstraintLoayout 无法解决字体适配。如下面常规登录的设计图

此布局各 View 的 偏移量、比例设置同案例1中的使用方式原理相同，不再重复讲述，有一点提一下，此布局的两边都有一个 16px 的边距，这个地方虽然不能使用 dp 设置边距，但是可以使用 Guideline (辅助线)，来实现边距的效果。

例如可以在左边添加一条竖向的辅助线，所有的 View 都约束在它的右边，而 16px 的边距在占设计图 360px 的比例值为：0.044444444444444，因此这条辅助线的布局代码如下

    <androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.0444444444444444" />

其他View的设置方式上面都有说过，因此直接贴上布局的整体代码。

此设计图的整体代码如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".AutoActivity"><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.0444444444444444" /><ImageViewandroid:id="@+id/imageView1"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/colorPrimary"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="1:1"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHeight_percent="0.03125"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.0225806451612903"app:srcCompat="@android:drawable/ic_menu_close_clear_cancel" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="登录XX客户端"android:textColor="@color/colorPrimary"android:textSize="24sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintHeight_percent="0.046875"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/imageView1"app:layout_constraintVertical_bias="0.0463917525773196" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="手机号"android:textColor="@color/colorPrimary"android:textSize="18sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@id/guideline2"app:layout_constraintHorizontal_bias="0.2857142857142857"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/textView"app:layout_constraintVertical_bias="0.0828625235404896" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.2388888888888889" /><EditTextandroid:id="@+id/editText1"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@null"android:hint="请输入手机号"android:singleLine="true"android:textColor="#C2C1C1"android:textColorHint="@color/colorPrimary"android:textSize="18sp"app:layout_constraintBottom_toBottomOf="@+id/textView2"app:layout_constraintEnd_toStartOf="@+id/guideline3"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline2"app:layout_constraintTop_toTopOf="@+id/textView2" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="获取验证码"android:textColor="@color/colorPrimary"android:textSize="14sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="@+id/editText1"app:layout_constraintEnd_toStartOf="@+id/guideline4"app:layout_constraintHorizontal_bias="0.6"app:layout_constraintStart_toEndOf="@id/guideline3"app:layout_constraintTop_toTopOf="@+id/editText1" /><Viewandroid:id="@+id/view2"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/colorPrimary"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/guideline4"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.0015625"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/textView2"app:layout_constraintVertical_bias="0.00625" /><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="验证码"android:textColor="@color/colorPrimary"android:textSize="18sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@id/guideline2"app:layout_constraintHorizontal_bias="0.2857142857142857"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/view2"app:layout_constraintVertical_bias="0.0896860986547085"app:layout_constraintWidth_percent="0.1555555555555556" /><EditTextandroid:id="@+id/editText2"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@null"android:hint="请输入验证码"android:singleLine="true"android:textColor="#C2C1C1"android:textColorHint="@color/colorPrimary"android:textSize="18sp"app:layout_constraintBottom_toBottomOf="@+id/textView4"app:layout_constraintEnd_toStartOf="@+id/guideline3"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline2"app:layout_constraintTop_toTopOf="@+id/textView4" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.7166666666666667" /><Viewandroid:id="@+id/view"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/colorPrimary"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/guideline4"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.0015625"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@id/textView4"app:layout_constraintVertical_bias="0.0072815533980583" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.955555" /></androidx.constraintlayout.widget.ConstraintLayout>

现在将此布局运行在 1080X1920 dpi160 的屏幕上结果如下

哎呀我去，怎这个鸟样，前边说过，ConstraintLayout 无法解决字体适配，怎么办？到这有一种辛辛苦苦几十年，一招回到解放前的感觉。我也是查了很多字体适配的资料，最后觉得，还是最小宽度限定符靠谱。因此在 ConstraintLayout 基础上使用最小宽度限定符适配字体。

最小宽度限定符的原理我在 Android 屏幕适配总结中有说过，在此不再重复讲解，只附上修改后的代码

1.限定符文件

2.修改后的布局代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".AutoActivity"><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.0444444444444444" /><ImageViewandroid:id="@+id/imageView1"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/colorPrimary"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintDimensionRatio="1:1"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHeight_percent="0.03125"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.0225806451612903"app:srcCompat="@android:drawable/ic_menu_close_clear_cancel" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="登录XX客户端"android:textColor="@color/colorPrimary"android:textSize="@dimen/sp24"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintHeight_percent="0.046875"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/imageView1"app:layout_constraintVertical_bias="0.0463917525773196" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="手机号"android:textColor="@color/colorPrimary"android:textSize="@dimen/sp18"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@id/guideline2"app:layout_constraintHorizontal_bias="0.2857142857142857"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/textView"app:layout_constraintVertical_bias="0.0828625235404896" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.2388888888888889" /><EditTextandroid:id="@+id/editText1"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@null"android:hint="请输入手机号"android:singleLine="true"android:textColor="#C2C1C1"android:textColorHint="@color/colorPrimary"android:textSize="@dimen/sp18"app:layout_constraintBottom_toBottomOf="@+id/textView2"app:layout_constraintEnd_toStartOf="@+id/guideline3"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline2"app:layout_constraintTop_toTopOf="@+id/textView2" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="获取验证码"android:textColor="@color/colorPrimary"android:textSize="@dimen/sp14"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="@+id/editText1"app:layout_constraintEnd_toStartOf="@+id/guideline4"app:layout_constraintHorizontal_bias="0.6"app:layout_constraintStart_toEndOf="@id/guideline3"app:layout_constraintTop_toTopOf="@+id/editText1" /><Viewandroid:id="@+id/view2"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/colorPrimary"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/guideline4"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.0015625"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/textView2"app:layout_constraintVertical_bias="0.00625" /><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="验证码"android:textColor="@color/colorPrimary"android:textSize="@dimen/sp18"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@id/guideline2"app:layout_constraintHorizontal_bias="0.2857142857142857"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@+id/view2"app:layout_constraintVertical_bias="0.0896860986547085"app:layout_constraintWidth_percent="0.1555555555555556" /><EditTextandroid:id="@+id/editText2"android:layout_width="0dp"android:layout_height="wrap_content"android:background="@null"android:hint="请输入验证码"android:singleLine="true"android:textColor="#C2C1C1"android:textColorHint="@color/colorPrimary"android:textSize="@dimen/sp18"app:layout_constraintBottom_toBottomOf="@+id/textView4"app:layout_constraintEnd_toStartOf="@+id/guideline3"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline2"app:layout_constraintTop_toTopOf="@+id/textView4" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.7166666666666667" /><Viewandroid:id="@+id/view"android:layout_width="0dp"android:layout_height="0dp"android:background="@color/colorPrimary"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/guideline4"app:layout_constraintHeight_default="percent"app:layout_constraintHeight_percent="0.0015625"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="@+id/guideline1"app:layout_constraintTop_toBottomOf="@id/textView4"app:layout_constraintVertical_bias="0.0072815533980583" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.955555" />
</androidx.constraintlayout.widget.ConstraintLayout>

最后根据 ScreenMatch 的源码，我自己写也写了一个适用于 sp 的限定符插件，源码就不上传了，只是拿 ScreenMatch 的改了改，如果感兴趣的可以看此文：Android 自动创建最小宽度限定符文件插件 AutoDimens

这篇关于Android ConstraintLayout 使用与适配（适配篇）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！