Android ConstraintLayout百分比布局-适配终结者（基本适配所有机型）_星载的博客

看了上面的效果，接下来就进入正题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>

测试效果请点击源码地址：源码地址

感兴趣的朋友可以查看： ConstraintLayout使用详解

对于Android开发者来讲，适配始终是个大问题，在小米手机上面是一个样，在oppo上面是一个样，真是让人恼火。现在讲一下笔者最近遇到的问题，公司项目需求，一颗树，树有很有枝桠，枝桠上面要挂红包，这需求是真坑爹，精度要求特别高，这肯定不能使用DP适配了，最开始想自己根据屏幕分辨率来做适配，设计图是750*1334的，我自己等比缩放在1080上面和720上面，这工作量有点大啊，一个人无法完成的赶...

[DEPRECATED in support lib v26] you should now use Const ra int Layout widget https://developer. android .com/t ra ining/ const ra int - layout /index.html Android Percent Support Lib Sample :triangular_ruler::triangular_ruler::triangular_ruler: I made a sample of the new percent support lib ra ry. You can check official docs reference here and here. This lib ra ry provide percentage based layout s, horizontal and vertical at the same time. simple result complex result How to use : just add percent support li

一个复杂的布局或自定义View如何在添加到其他不同大小的ViewGroup中按比例去缩放自己的布局内容呢？我尝试使用 Const ra int Layout 解决了这个问题。 1. 简单的布局大家先看一个简单的布局，由上下两个view组成，都是16:9的比例。左边是设置 android : layout _width="match_parent"的情况，右边是将 layout _width设为了200dp，模拟缩小到宽为200dp的View。大家可以发现的是他们实现等比缩小了。实现原理也很简单，就是通过 Const ra int L

2. Const ra int Layout 没有嵌套布局不能使用match_parent 约束布局 Const ra int Layout 是一个ViewGroup，可以在Api9以上的 Android 系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件 2.为什么要用 Const ra int Layout 在开发...

文章目录一、简述二、google推荐的 百分比 布局的使用方式三、实现3.1 创建属性文件3.2 解析3.3 计算并设置 百分比 布局四、使用五、完整代码六、注意 百分比 布局适配，就是以父容器的尺寸作为基准，在view的加载过程中，根据当前父容器实际尺寸换算出目标尺寸，再作用在view上。 百分比 布局，实际是对容器的一种扩展，即对宽高 百分比 的设置。二、google推荐的 百分比 布局的使用方式首先要引入：implementation ‘com. android .support:percent:28.0.0’ 然后将布局引用为： android .support.percent.PercentRel

百分比 布局让其中的控件在指定高度，宽度，margin时使用屏幕宽高的 百分比 ，不使用dp,px。这样一套布局可以适应多个屏幕，方便适配。如：　　app: layout _heightPercent="30%" 它们分别为图1. 2.7''_240*320:ldpi　图2. 4.0''_480*800:hdpi　图3. 5.5''_144...

Android Const ra int Layout 是谷歌推出替代Precent Layout 的组件。支持相对布局、线性布局、帧布局，笔者看来更像是F ra me Layout 、Linear Layout 、Relative Layout 三者的结合体，并且比这三者更强大的是实现了 百分比 布局，大家都知道安卓碎片严重，使用 百分比 适配，那么将彻底解决适配问题。本文将教会你如何使用此控件。一、当作Relative...

Android 阵容屏幕众多，尺寸、大小、DPI各种参数不一致，如何一键适配所有屏幕？以下提供一种解决方案。以 Const ra int Layout 为例，继承约束布局下面来写一个自定义 百分比 布局。在attrs文件中定义我们的属性： <declare-styleable name=" Const ra int Percent Layout "> <attr name=" const ra int WidthPercent" format="float" /> <?xml version="1.0" encoding="utf-8"?> < android x. const ra int layout .widget. Const ra int Layout xmlns: android ="http://schemas. android .com/apk/res/ android " xmlns:app="http://schemas. android .com/apk/res-auto"

前言：有一个还在上大学的小学弟问博主有没有啥屏幕适配简单的方法，把鸿洋大神的帖子发给他，他说看不懂，鉴于其学 Android 的时间很短，所以自己出一篇比较容易的简单方法的帖子（ 百分比 适配）。博主准备的例子是csdn的启动页：效果图如下现在用AS新建一个项目，都会默认用到一个布局 – Const ra int Layout ，而博主主要给大家介绍一下下图红框内的部分的前两种（类似于ps的参考线）首先要会对位置进行设置–以前有写过一个博客—— Android 约束布局 Const ra int Layout 点击Add