Android ConstraintLayout百分比布局-适配终结者（基本适配所有机型） - 好文

对于Android开发者来讲，适配始终是个大问题，在小米手机上面是一个样，在oppo上面是一个样，真是让人恼火。

现在讲一下笔者最近遇到的问题，公司项目需求，一颗树，树有很有枝桠，枝桠上面要挂红包，这需求是真坑爹，精度要求特别高，这肯定不能使用DP适配了，最开始想自己根据屏幕分辨率来做适配，设计图是750*1334的，我自己等比缩放在1080上面和720上面，这工作量有点大啊，一个人无法完成的赶脚。在网上找资料时看到鸿洋大神的AutoLayout，感觉非常厉害，和我的想法完全一样啊。使用过后，虽然在有些机型上面偏差了一点，红包挂歪了，效果还是可以接受的。

一加5 1080*1920

魅族note5 1080*1920，明显偏差，不过不严重，可以接受

再看全面屏mix2s 1080*2160、p20都是一样的，偏差太严重了，完全不能接受

看了上面的效果，接下来就进入正题ConstraintLayout适配了。

还是先看下效果

模拟器pixel_2_xl_api_27

魅族note 5

再看下全面屏

哎呀我去，这效果，红包挂的位置完全一到致，太感动了，如此完美，果然谷歌大力推广此控件不无道理啊，赶紧学习起来。

接下来看下我是如何布局的呢

外层依然引用

android.support.constraint.ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".MainActivity"> ... ... ...
</android.support.constraint.ConstraintLayout>
树是张图片只需要铺满全屏
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
当然也可以使用百分比固定位置即可，在铺满全屏的前提下，额外加入
<ImageView android:id="@+id/treeIv" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="centerInside"
android:src="@mipmap/ic_tree_6" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintVertical_bias="0.6" />
温馨注意：1为100%，这里可填小数。横向0表示，屏幕最左边，1表示最右边，对应了屏幕坐标轴，学过计算机基础的都知道。

树有了，那么该结红包了，这里的红包就不对于parent了，而应该对应树，可以理解为树上面长红包，而不是在其他地方
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="centerInside"
android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.525" />
这个红包在屏幕中间偏右一点。

以上就是本文的百分比布局。

全部布局xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".MainActivity"> <ImageView android:layout_width="0dp"
android:layout_height="0dp" android:scaleType="centerCrop"
android:src="@mipmap/ic_tree_bg_daytime"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" /> <ImageView
android:id="@+id/treeIv" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="centerInside"
android:src="@mipmap/ic_tree_6" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintVertical_bias="0.6" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.525" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.35"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.44" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.55"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.30" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.83"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.33" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.49" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.26"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.15" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.1" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.76"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.14" /> <ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="centerInside" android:src="@mipmap/ic_red_packet_9"
app:layout_constraintBottom_toBottomOf="@id/treeIv"
app:layout_constraintEnd_toEndOf="@id/treeIv"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="@id/treeIv"
app:layout_constraintTop_toTopOf="@id/treeIv"
app:layout_constraintVertical_bias="0.26" />
</android.support.constraint.ConstraintLayout>
测试效果请点击源码地址：源码地址 <https://github.com/SpringSmell/AdaptiveSample>

感兴趣的朋友可以查看：ConstraintLayout使用详解
<https://blog.csdn.net/Fy993912_chris/article/details/81909010>

热门工具换一换