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

最新推荐文章于 2024-04-30 12:31:21 发布
最新推荐文章于 2024-04-30 12:31:21 发布
阅读量1.7w 收藏 34
点赞数 8
分类专栏： Kotlin 实用工具 Android片段 基础组件 文章标签： 适配 百分比布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fy993912_chris/article/details/81907177
版权

对于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>

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

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

星载
关注
  • 8
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
android 百分比布局，屏幕适配
08-21
总的来说，百分比布局是Android开发中实现屏幕适配的一种有效方法，通过它，开发者可以创建出对各种屏幕尺寸具有良好适应性的用户界面，提高应用的用户体验。然而，实际开发中还需要结合其他方法，根据具体需求选择...
ConstraintLayout-使用
e10010e的专栏
08-14 1344
ConstraintLayout
Android屏幕适配终极方案之ConstraintLayout约束布局以及ConstraintLayout百分比布局应用
0
08-08 5682
注意：1.官方的模板默认使用 ConstraintLayout。 2.ConstraintLayout没有嵌套布局不能使用match_parent 1.介绍 约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件 2.为什么要用ConstraintLayout 在开发...
Android 约束布局（ConstraintLayout）详解
最新发布
2301_82101470的博客
04-30 894
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司20年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
使用ConstraintLayout实现自定义缩放布局（百分比布局）
qq_41011723的博客
10-15 3636
一个复杂的布局或自定义View如何在添加到其他不同大小的ViewGroup中按比例去缩放自己的布局内容呢？我尝试使用ConstraintLayout解决了这个问题。 1. 简单的布局 大家先看一个简单的布局，由上下两个view组成，都是16:9的比例。 左边是设置android:layout_width="match_parent"的情况，右边是将layout_width设为了200dp，模拟缩小到宽为200dp的View。大家可以发现的是他们实现等比缩小了。实现原理也很简单，就是通过ConstraintL
ConstraintLayout 用法全解析
yzwfeng的专栏
04-13 2269
本文是基于constraint-layout:1.1.2 一、前言 在以前，android是使用布局如LinearLayout 、RelativeLayout等来构建页面，但这些布局使用起来很麻烦，并且经常需要一层一层嵌套，写一个简单的页面就需要费很大的劲。所以在16年I/O大会上，google发布了全新的布局-ConstraintLayout，其他布局和ConstraintLayout比起来，根本就没有存在的必要了... ConstraintLayout具有以下优势： 较高的性能优势。 布.
Android ConstraintLayout布局使用详解
热门推荐
华至的博客
08-21 5万+
Android ConstraintLayout是谷歌推出替代PrecentLayout的组件。支持相对布局、线性布局、帧布局，笔者看来更像是FrameLayout 、LinearLayout、RelativeLayout三者的结合体，并且比这三者更强大的是实现了百分比布局，大家都知道安卓碎片严重，使用百分比适配，那么将彻底解决适配问题。 本文将教会你如何使用此控件。 一、当作Relative...
Android ConstraintLayout
hhbgk的专栏
03-02 398
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello world" android:textSize="@dimen/text_24sp" app:layout_constraintEnd_toEndOf="parent" app:layout_co...
Android-androidUI适配屏幕适配
08-13
5. **使用约束布局（ConstraintLayout）**：Android Studio提供的约束布局可以灵活地进行响应式设计，适应不同屏幕尺寸。 6. **使用布局权重（layout_weight）**：在LinearLayout中，分配权重可以使得子视图按照...
Android-解决Android适配问题
08-13
综上所述，解决Android适配问题需要综合运用屏幕尺寸和密度适配、布局设计、代码优化、API兼容性以及充分的测试。通过这些方法，开发者可以确保应用在各种Android设备上都能展现出一致且优质的用户体验。
Android-ConstraintLayout示例
08-12
【Android-ConstraintLayout示例】 在Android应用开发中，布局管理是至关重要的，因为它决定了UI元素的排列方式和相互关系。2016年Google I/O大会上，Google引入了一个全新的布局容器——`ConstraintLayout`，这是...
Android百分比适配包
07-25
1. **百分比布局(PercentLayout)**: Android SDK中的`PercentRelativeLayout`和`PercentFrameLayout`是专为实现百分比适配设计的布局组件。这两个布局允许开发者以百分比的方式定义子视图的宽度和高度，而不是固定...
ConstraintLayout基础详解(中)
听海的博客
05-02 1230
ConstraintLayout基础详解(中)
ConstraintLayout利用百分比属性来解决一些简单的适配问题（四）
wzlyd1的专栏
11-07 2万+
接着上一篇文章讲 ConstraintLayout属性之Group，GuideLine（三） 先前的几篇文章只是讲了一下ConstraintLayout的基本属性，都很简单，感觉没有眼前一亮的感觉，接下来要讲的东西也很简单，但是会很实用，尤其是在屏幕适配方面，如果运用的灵活，简直美滋滋。 在平时写布局的时候我们通常都是以dp为单位的，这也是google推崇的一种方式，但是dp并不能完全适配所有的手...
Android屏幕适配（使用ConstraintLayout）
2401_84003809的博客
04-04 645
【Android开发核心知识点笔记】【Android思维脑图（技能树）】【Android核心高级技术PDF文档，BAT大厂面试真题解析】【Android高级架构视频学习资源】《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！T大厂面试真题解析】**[外链图片转存中…(img-BqHbc95g-1712219445201)]【Android高级架构视频学习资源】《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取。
Android Studio：ConstraintLayout的常用属性详解
star_nwe的博客
06-18 2809
约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout
ConstraintLayout（约束布局）使用详解
一个IT人的技术成长历程。创造未来的行为就发生在今天，没有明天的目标，今天的行动就是重复昨天的事情。
10-01 6096
ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，在 2016 年 Google I/O 中面世，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件。从 Android Studio 2.3起，创建layout文件就已经是默认ConstraintLayout了，但是尽管Google如此大力推这项技术，但在当时很少有人使用，近些年逐渐被大家拿起来，啊真香！（此处无图胜有图）。
Android性能优化之布局优化（使用约束布局）
ming15920的博客
09-20 3175
1、概述 约束布局ConstraintLayout是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。 官方参考文档 2、作用 为什么要用ConstraintLayout? 在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多。 ConstraintLayout使用起来比RelativeLayout更灵活，性能更出色。 Constra.
android约束布局ConstraintLayout
hijunmeng的专栏
07-06 1835
https://www.jianshu.com/p/28bc3619fc82
android ConstraintLayout用法
09-23
ConstraintLayout是一种灵活的布局容器，用于在Android应用程序中创建复杂的用户界面。它允许您定义视图之间的关系，以便可以根据不同设备的屏幕大小和方向动态调整布局。 以下是使用ConstraintLayout的一些常见用法： 1. 嵌套约束：您可以将一个视图嵌套在另一个视图内，并使用约束条件将它们连接在一起。例如，您可以将一个按钮放在一个容器视图内，并将其约束到容器视图的边缘或其他视图上。 2. 边缘约束：您可以使用边缘约束将视图的边缘与父视图或其他视图的边缘对齐。例如，您可以将一个按钮的顶部边缘与父容器的顶部对齐。 3. 水平和垂直约束：您可以使用水平和垂直约束将视图的边缘与其他视图的边缘对齐。例如，您可以将一个按钮的左边缘与另一个按钮的右边缘对齐。 4. 链接约束：您可以创建链式约束，将多个视图连接在一起。例如，您可以将多个按钮连接成一个水平链，以便它们在屏幕上等距分布。 5. 百分比约束：您可以使用百分比约束将视图的边缘与父视图的边缘或其他视图的边缘相对应。例如，您可以将一个按钮的顶部边缘设置为父容器高度的50％。 这些只是ConstraintLayout的一些用法示例，它还具有许多其他功能和属性。您可以在开发文档中详细了解ConstraintLayout的更多用法。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值