使用ConstraintLayout实现自定义缩放布局（百分比布局）

最新推荐文章于 2025-04-08 08:11:19 发布
最新推荐文章于 2025-04-08 08:11:19 发布
阅读量3.9k 收藏 10
点赞数 7
分类专栏： Android Java 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41011723/article/details/120791206
版权

一个复杂的布局或自定义View如何在添加到其他不同大小的ViewGroup中按比例去缩放自己的布局内容呢？我尝试使用ConstraintLayout解决了这个问题。

1. 简单的布局

大家先看一个简单的布局，由上下两个view组成，都是16:9的比例。在这里插入图片描述

左边是设置android:layout_width="match_parent"的情况，右边是将layout_width设为了200dp，模拟缩小到宽为200dp的View。大家可以发现的是他们实现等比缩小了。实现原理也很简单，就是通过ConstraintLayout将View按照比例去控制大小就好。
核心代码就是下面几行，设置width、height为0dp，app:layout_constraintDimensionRatio设置比例

  <ImageView
  		...
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="16:9"
        ...
 />

完整代码：

<?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="wrap_content"
    tools:context=".ScaleLayout">


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f5f5f5"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f0eaff"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView1"
        tools:srcCompat="@tools:sample/avatars" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

2. 稍微复杂点的布局

刚刚很简单的就做到了两个ImageView随viewgroup进行缩放，但需要满足其中一个条件不知道大家发现没有，width或者height需要有一个layout_width="0dp"，那如果我们的子view不需要match_parent呢？比如需要在布局中间位置加一个40*40大小的头像，总不能也设置成layout_width="0dp"吧。这时候就需要guideline的帮助了。先给大家看下效果。
在这里插入图片描述

可以看到底下的的布局照常保持16:9，头像部分也按比例进行了缩小。核心思想就是用guideline去限制View的大小，可以将guideline理解成想parent的边一样，那只要用三条guideline，把View的top、right、left各自约束到guideline就行了，记得guideline的约束要用百分比哦。

<?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="wrap_content"
    tools:context=".ScaleLayout">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout_img"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="16:9"
        android:background="#f5f5f5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


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

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.7" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.2" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="@+id/guideline1"
            app:layout_constraintTop_toTopOf="@+id/guideline3"
            tools:srcCompat="@tools:sample/avatars" />
    </androidx.constraintlayout.widget.ConstraintLayout>


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f0eaff"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/layout_img" />

</androidx.constraintlayout.widget.ConstraintLayout>

如果大家有更好的方法，欢迎指教。

深入理解Android布局：ConstraintLayout和RecyclerView的使用
虎哥LoveDroid
04-21 1525
在本文中，我们详细介绍了ConstraintLayout和RecyclerView在Android布局中的使用方法和优点。ConstraintLayout是一个强大的布局管理器，提供了灵活的约束关系和性能优化特性，使得布局可以适应不同的屏幕尺寸和设备方向，并且可以在复杂布局中提供高效的嵌套和层叠关系。RecyclerView是一个用于显示大量数据列表和网格布局的高性能控件，提供了ViewHolder的复用机制和局部刷新等特性，可以有效地优化布局性能和提供流畅的用户体验。
Android从零开始实现可以双指缩放，自由移动，双击放大的自定义ImageView
不辣大叔的博客
03-29 3889
Android从零开始实现可以双指缩放，自由移动，双击放大的自定义ImageView 之前一直都是用别人的轮子，总感觉心里不踏实，所以自己也尝试这造一些别人造过的轮子，提升自己，也可以在平时开发中工作中更熟练的使用。 这一次从零开始，撸一个可单指移动，双击放大，双指缩放，双指移动的ImageView 这篇博文较长，如果向直接看完整代码，请直接拉到最后。 我们先来看看效果吧 第一步：继承Image...
Android ConstraintLayout布局使用详解
热门推荐
华至的博客
08-21 5万+
Android ConstraintLayout是谷歌推出替代PrecentLayout的组件。支持相对布局、线性布局、帧布局，笔者看来更像是FrameLayout 、LinearLayout、RelativeLayout三者的结合体，并且比这三者更强大的是实现了百分比布局，大家都知道安卓碎片严重，使用百分比适配，那么将彻底解决适配问题。 本文将教会你如何使用此控件。 一、当作Relative...
Android开发 - 掌握ConstraintLayout（十）按比例设置视图大小
weixin_33755557的博客
12-04 831
有时候在布局界面的时候，UI要求某个View或者某张图片按比例显示，以适应不同的屏幕分辨率。 通常我们时通过自定义View或者引入第三方的库来解决。现在我们既然已经使用了ConstraintLayout，它本身就支持这样的按比例设置View大小的功能。 下面我们来介绍如何使用： 首先我们在布局中添加一个View： 此时，没有添加任何约束，显示的比例就是原始图片的比例。 添加水平方向的约束：...
（九）安卓开发中的约束布局（ConstraintLayout）使用详解
最新发布
cuijiying的博客
04-08 1071
ConstraintLayout是安卓开发中一种强大而灵活的布局方式，通过约束关系定义视图位置和尺寸，能够有效减少嵌套、提升性能，并支持复杂界面的快速构建。
ConstraintLayout 水平比例布局 1：1：2
Imeng的专栏
06-21 2万+
ConstraintLayout 水平比例布局 1：1：2
Android屏幕适配终极方案之ConstraintLayout约束布局以及ConstraintLayout百分比布局应用
0
08-08 6073
注意：1.官方的模板默认使用 ConstraintLayout。 2.ConstraintLayout没有嵌套布局不能使用match_parent 1.介绍 约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件 2.为什么要用ConstraintLayout 在开发...
Compose 中的 ConstraintLayout(约束布局) 比例拉伸
简单记录工作和学习
09-14 1381
在 Compose 中，布局和界面的构建方式与传统的 XML 布局系统有很大的不同。Compose 是一种声明式的 UI 编程模型，使用 Kotlin 语言编写。
高仿支付宝布局
08-27
可以使用百分比布局（PercentRelativeLayout, PercentFrameLayout）或者FlexboxLayout来实现响应式设计，确保界面在各种屏幕尺寸上都能正常显示。 综上所述，创建一个高仿支付宝布局需要对Android UI有深入的理解，...
Android 门票布局效果
07-30
可以利用Android的约束布局（ConstraintLayout）或百分比布局（PercentLayout）来实现自适应屏幕尺寸的效果。同时，考虑在不同分辨率和方向下的显示，确保门票布局在横屏和竖屏下都能保持良好的视觉效果。 最后，...
安卓UI布局相关-ndroid屏幕适配方案.rar
07-29
1. 使用相对布局（RelativeLayout）或约束布局（ConstraintLayout）：这两种布局允许元素相对位置调整，能更好地适应不同屏幕尺寸。 2. dp（density-independent pixels）单位：使用dp代替px作为尺寸单位，自动根据...
Android代码-基于百分比的水平或垂直布局
08-08
[DEPRECATED in support lib v26] you should now use ConstraintLayout widget https://developer.android.com/training/constraint-layout/index.html Android Percent Support Lib Sample :triangular_ruler::triangular_ruler::triangular_ruler: I made a sample of the new percent support library. You can check official docs reference here and here. This library provide percentage based layouts, horizontal and vertical at the same time. simple result complex result How to use : just add percent support li
ConstraintLayout 水平比例布局 1:1:1
旧时光っ
11-30 3068
<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_pa..
Android ConstraintLayout百分比布局-适配终结者（基本适配所有机型）
华至的博客
08-21 1万+
对于Android开发者来讲，适配始终是个大问题，在小米手机上面是一个样，在oppo上面是一个样，真是让人恼火。 现在讲一下笔者最近遇到的问题，公司项目需求，一颗树，树有很有枝桠，枝桠上面要挂红包，这需求是真坑爹，精度要求特别高，这肯定不能使用DP适配了，最开始想自己根据屏幕分辨率来做适配，设计图是750*1334的，我自己等比缩放在1080上面和720上面，这工作量有点大啊，一个人无法完成的赶...
无处安放的AndroidTips：ConstraintLayout的比例布局
weixin_34082695的博客
01-21 306
ConstraintLayout的尺寸 dimensions 有时候，我们需要创建一些固定方向比的 View 组件，最常使用固定横纵比的就是当 ImageView 用于展示一些固定横纵比的图片的时候。举些例子，书面封面（尺寸横纵比多种多样），电影海报（一般是 4:6 ），电影剧照（一般是 1.85:1 或 2.39:1 ），电视剧（一般是...
【Android 屏幕适配】屏幕适配通用解决方案 ⑥ ( 约束布局 ConstraintLayout 百分比布局方案 | 将设计稿尺寸自动转为约束布局百分比标签属性 | 将输出结果设置到组件标签中 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-19 1525
一、将设计稿尺寸自动转为约束布局百分比标签属性、 二、将输出结果设置到组件标签中
Android ConstraintLayout按比例缩放View
Zhang Phil
04-14 1万+
Android ConstraintLayout按比例缩放View关键点有两个，第一，使用Android ConstraintLayout的layout_constraintDimensionRatio属性，设置宽高比缩放比例，宽:高。第二，恒定宽和高，另外一个方向就会按照比例缩放。 <android.support.constraint.ConstraintLayout xmlns:and
ConstraintLayout利用百分比属性来解决一些简单的适配问题（四）
wzlyd1的专栏
11-07 2万+
接着上一篇文章讲 ConstraintLayout属性之Group，GuideLine（三） 先前的几篇文章只是讲了一下ConstraintLayout的基本属性，都很简单，感觉没有眼前一亮的感觉，接下来要讲的东西也很简单，但是会很实用，尤其是在屏幕适配方面，如果运用的灵活，简直美滋滋。 在平时写布局的时候我们通常都是以dp为单位的，这也是google推崇的一种方式，但是dp并不能完全适配所有的手...
android怎么把相对布局根据屏幕大小把textView等比例缩放
03-13
### Android 中实现 TextView 根据屏幕大小等比例缩放 为了实现在不同屏幕尺寸上保持一致视觉效果的 `TextView`，可以采用多种方式来确保文字能够按照屏幕的比例进行缩放。 #### 使用 Auto-Sizing 文本视图 从 API 级别 26 开始，Android 提供了内置的支持用于自动调整 `TextView` 的字体大小。通过设置属性 `android:autoSizeTextType="uniform"` 可以让文本框内的字符均匀放大或缩小至适合容器的空间范围[^3]。 ```xml <TextView android:id="@+id/myAutoSizeTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:autoSizeTextType="uniform"/> ``` #### 自定义 PercentTextView 类 对于更复杂的场景或者较低版本系统的兼容需求，则可以通过创建一个继承自 `AppCompatTextView` 或者原生 `TextView` 的类——比如命名为 `PercentTextView` 来处理这个问题。在这个新组件里重写测量逻辑以便于根据父级 ViewGroup 宽度动态计算并应用合适的字体大小[^4]。 ```java public class PercentTextView extends AppCompatTextView { private float mScreenWidth; private Context mContext; public PercentTextView(Context context) { super(context); init(); } public PercentTextView(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init(){ this.mContext = getContext(); WindowManager wm = (WindowManager)mContext.getSystemService(Context.WINDOW_SERVICE); DisplayMetrics dm = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(dm); mScreenWidth = dm.widthPixels; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ // 计算新的字体大小... setTextSize(TypedValue.COMPLEX_UNIT_PX, calculateNewFontSize()); super.onMeasure(widthMeasureSpec, heightMeasureSpec); } private float calculateNewFontSize(){ // 基础字体大小 * 当前宽度 / 设计稿中的标准宽度 return BASE_TEXT_SIZE * getMeasuredWidth() / STANDARD_WIDTH; } } ``` #### 利用 ConstraintLayout 和 Guidelines 进行布局控制 另外一种策略是在 XML 文件中利用 `ConstraintLayout` 结合 guideline 控制子元素的位置与尺寸关系。Guideline 能够依据百分比定位，从而间接影响到它所关联的对象的实际表现形式[^5]。 ```xml <androidx.constraintlayout.widget.ConstraintLayout ...> <!-- 创建一条垂直方向上的指导线 --> <androidx.constraintlayout.widget.Guideline android:id="@+id/guideline_vertical_center" android:orientation="vertical" app:layout_constraintGuide_percent=".5"/> <TextView ... app:layout_constraintStart_toStartOf="@id/guideline_vertical_center" /> </androidx.constraintlayout.widget.ConstraintLayout> ``` 以上三种方案都可以有效地帮助开发者解决因设备分辨率差异而导致的文字显示不协调问题。具体选择哪种取决于项目的需求以及目标平台最低支持程度等因素考虑。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值