Android---屏幕适配的处理技巧

news2025/3/17 1:48:12

在几年前,屏幕适配一直是困扰 Android 开发工程师的一大问题。但是随着近几年各种屏幕适配方案的诞生,以及谷歌各种适配控件的推出,屏幕适配也显得越来越容易。下面,我们就来总结一下关于屏幕适配的那些技巧

ConstraintLayout

很多 Android 工程师不太喜欢使用 ConstraintLayout,感觉 ConstraintLayout 的使用很烦琐,需要设置各种上下左右的约束条件。但是请相信,前期在代码里付出的越多,后期需要解决的 Bug 就越少。

ConstraintLayout 的前身是 PercentLayout(百分比布局)。当年 PercentLayout 被推出时也是火爆一时,但是它只延续了很短的一段时间就被 ConstraintLayout 替代了。ConstraintLayout 的常见属性有以下几个

红框1中属性相当于 RelativeLayot 的 layout_align 相关属性,能够确定各个 View 之间的边对齐特征。红框2中的属性相当于 RelativeLayout 的 layout_to 相关属性,能够确定各个 View 之间的相对位置。通过这几个属性基本能够确定 View 的相对位置,并且还能实现其它 View 容器较难实现的效果。

比如有两个 Button 分别是 Button1 和 Button2,需求是将 Button1 置于屏幕中间,并且始终覆盖 Button2 的左上半角。UI 效果如下所示

上述效果就可以通过以下代码实现

ConstraintLayout 还有几个其它属性,通过它们可以更好的帮我们做出适配。

bias

ConstraintLayout 提供了水平和垂直方向的 bias 属性。这个属性的取值范围是0~1,主要作用是确立 View 在水平方向或者垂直方向的位置百分比。比如以下实例代码

图中 Horizontal_bias 和 Vertical_bias 分别指定 TextView 显示在水平方向上30%的位置和垂直方向上50%的位置。最终显示效果如下

weight

LinearLayout 可以很方便的实现将多个 UI 控件按照某一方向进行排列,并且设置一定的权重规则。ConstraintLayout 也能实现类似的效果。以下代码可以使三个 TextView 同向依次按照相等的权重来排列

显示效果如下

ContraintLayout 还提供了 chain 属性来设置不同的均分策略,具体有以下几种属性值:

spread

spread 将平分剩余空间,让 ConstraintLayout 内部 Views 平分占用剩余空间。spread 也是默认属性,显示效果就如上文中的显示效果。

spread_inside

spread_inside 会将两边的最边缘的两个 View 拉向父组件边缘,然后让剩余的 Views 在剩余的空间内平分间隙布局。代码及显示效果如下

app:layout_constraintHorizontal_chainStyle="spread_ inside"

packed

将所有 Views 集中到一起不分配多余的空间(margin 除外),然后将整个组件显示在可用的剩余位置并居中。代码及效果如下

app:layout_constraintHorizontal_chainStyle="packed"

在 chain 的基础上,还可以再加上 bias 属性使其在某百分比位置上按照权重排列。比如,在上述的 packed chain 属性下,再在 TextView1 中添加如下属性。最终显示效果如下

app:layout_constraintHorizontal_bias=".75"

注意:使用 ConstraintLayout 时,需要特别注意 UI 控件的可见属性。因为 ConstraintLayout 内部控件的 visibility,设置为 GONE 和 INVISIBLE 对其他控件的约束是不一样的。

多 dimens 基于 dp 的适配方案

在 ConstraintLayout 的基础上,我们还可以在 res 文件夹中创建多套 values 文件夹。如下所示

图中,“values-” 后的 sw 指的是 smallest width,也就是最小宽度。Android 系统在运行时会自动识别屏幕可用的最小宽度,然后根据识别的结果去资源文件中查找相对应的资源文件中的属性值。比如,有一个 360dpi 的手机设备,在运行 App 时会自动到 values-sw360dp 文件夹中寻找对应的值。

手写每个 values 文件夹很麻烦,可用借助工具一键生成 values 文件,具体可用参考这篇文章:android屏幕适配,自动生成不同的dimens.xml详解

这种方式有很好的融拓机制。比如,如果一个手机的最小宽度是 350dp,Android 系统如果在 res 中没有找到 values-sw350dp 文件夹,也不会直接使用默认的 values 文件中的值。而是会依次向下查找最接近的最小宽度文件夹。比如上图中离350dp 最近的是 values-sw320dp 中的值。这个值虽然不是百分比精确,但是效果也不会相差太远。

通过上面介绍的 ConstraintLayout 加多 dimens 适配方案,基本能够将 UI 布局适配到所有的机型。在此基础上再针对个别 UI 控件进行适配就基本完美了。

UI 控件适配

在 Android App 中 文本+图片内容占据了一个 App 显示 UI 的绝大部分,虽然会夹杂 RecyclerView、ViewPager、ScrollView 等嵌套视图,但是最终在嵌套视图内部包含的还是 文本内容 + 图片内容。因此这两者的适配是我们重点关注的对象。

文本 TextView

对于 TextView 的宽高,建议尽量使用 wrap_content 自适应。因为一旦使用具体指进行限定,我们无法保证它在某些手机上不被 cut 掉。

一个血淋淋的例子:在搜索界面有一个“清空”按钮,宽度设置为 24dp,字体大小设置为 16sp。几乎在所有手机上显示都没有问题,但是当 Nokia 安卓手机面世之后,突然“清空”按钮被 cut 掉了一半,只显示“清”。原因就是 24sp 在 Nokia 手机上计算出的宽度不足以展示2个16sp 大小的文字。

对于 TextView 还有一种情况要注意,我们要习惯使用一个极长字符串来测试在某些极端情况下 TextView 的显示情况。因为需求文档上给到的大多都是一个比较常规的文本内容,但是我们从后端获取的文本字符串有时是用户自定义的,有可能是一个比较长的文本字符串。调试时期可以使用 tools:text 属性来调试,tools 属性只是在预览界面有效。比如以下配置

上图中的 TextView 在 AS 的预览界面会显示这是一段超长的文本内容,但是当安装到手机上时显示的是文本内容。

图片 ImageView

对于 ImageView 不建议统一使用 wrap_content。因为有时我们的图片是从服务器上下载到本地显示的,图片的宽高不一定是完全相同的,这样会造成图片的显示大小不一致。这种情况下一般

\bullet 一般是将 ImageView 的宽高设置为某一固定 dp 值。

\bullet 另外一种做法是在 Java 代码中动态设置 ImageView 的大小,一个比较常见的使用场景就是 RecyclerView Item 分屏显示。

需求是 RecyclerView 中每一个 item 大小为屏幕的 1/3,可以考虑在代码中动态设置 item view 的大小。如下所示

实际上,这种对 ImageView 的做法同样也适用于对其它控件的显示

总结

本次主要介绍了几个 Android 屏幕适配的技巧,主要包含:

\bullet 使用 ConstraintLayout 能够完美实现布局内部控件之间的约束条件,并且能够代替 LinearLayout 和 RelativeLayout 等布局;

\bullet 在 ConstraintLayout 基础上,再加上多 dimens 适配方案基本就能实现所有的屏幕适配;

\bullet 对于特殊 UI 控件的适配再做针对性适配,主要介绍了 TextView 和 ImageView d 几个适配技巧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1197052.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】二叉树经典例题---<你真的掌握二叉树了吗?>(第一弹)

一、已知一颗二叉树如下图,试求: (1)该二叉树前序、中序和后序遍历的结果。 (2)该二叉树是否为满二叉树?是否为完全二叉树? (3)将它转换成对应的树或森林。 (4)这颗二叉树的深度为多少? (5)试对该二叉树进行前序线索化。 (6)试对…

向量的点积和外积

参考:https://www.cnblogs.com/gxcdream/p/7597865.html 一、向量的内积(点乘) 定义: 两个向量a与b的内积为 ab |a||b|cos∠(a, b),特别地,0a a0 0;若a,b是非零向量,…

Shopee收款账户怎么设置?shopee收款方式选哪种

Shopee作为一家领先的电子商务平台,为卖家提供了多种收款方式。无论是在线支付、虚拟账户余额还是线下支付,卖家可以根据自己的需求和交易情况来进行选择。然而,在选择收款方式时,安全性、便捷性和市场适应性是需要考虑虾皮Shopee…

【Git】Git的GUI图形化工具ssh协议IDEA集成Git

一、GIT的GUI图形化工具 1、介绍 Git自带的GUI工具,主界面中各个按钮的意思基本与界面文字一致,与git的命令差别不大。在了解自己所做的操作情况下,各个功能点开看下就知道是怎么操作的。即使不了解,只要不做push操作,…

【数据结构】顺序表 | 详细讲解

在计算机中主要有两种基本的存储结构用于存放线性表:顺序存储结构和链式存储结构。本篇文章介绍采用顺序存储的结构实现线性表的存储。 顺序存储定义 线性表的顺序存储结构,指的是一段地址连续的存储单元依次存储链性表的数据元素。 线性表的&#xf…

Activiti BPMN visualizer Using Of Idear

Launch 安装插件 创建文件 可视化创建按钮 设置条件,是在线上设置的

【C++破局】C++内存管理之new与deleted剖析

​作者主页 📚lovewold少个r博客主页 ⚠️本文重点:c内存管理部分知识点梳理 👉【C-C入门系列专栏】:博客文章专栏传送门 😄每日一言:花有重开日,人无再少年! 目录 C/C的内存分配机…

Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

前言 持续学习总结输出中,Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model 概念:指令(Directives)是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。 vue 中的指令按照不…

Java Web——HTTP协议

目录 1. HTTP协议概述 1.1. HTTP数据传输格式 1.2. HTTP协议特点 2. HTTP 1.0和HTTP 1.1 3. HTTP请求协议 3.1. GET方式请求协议 3.2. POST方式请求协议 3.3. GET请求和POST请求的区别 4. HTTP相应协议 4.1. 响应状态码 如果两个国家进行会晤需要遵守一定的礼节。所以…

WMS配送中心主要业务流程

业务流程图 入库 波次出库 按门店和门店所属送货路线确定出库波次 入库 出库 移库、封仓 门店欠货能要点 1. 日常补货:分拣仓位商品小于当前商品在该位置的补货下限的时候;生成对此进行补货任务;补货完成后确认任务,系统变更库存…

win10使用mingw安装OpenCV4.8

1. cmake安装 下载链接如下https://github.com/Kitware/CMake/releases/download/v3.27.7/cmake-3.27.7-windows-x86_64.zip 解压后放到指定目录后,添加bin目录到环境变量即可。 2. mingw安装 下载链接如下(下图的x86_64-posix-sjlj): Download x86_…

DevChat:提升编程效率的AI编程助手

一、前言 1、当前开发的痛点😖 在软件开发过程中,开发者经常需要编写复杂的代码,如数据结构、算法、网络通信等,这些都需要耗费大量的时间和精力。同时,不同的编程语言和框架也会给开发者带来许多不便,例如…

Hadoop入门——数据分析基本步骤

文章目录 1.概述2.分析步骤2.1第一步 明确分析目的和思路2.2第二步 数据收集2.3第三步 数据处理2.4第四步 数据分析2.5第五步 数据展现2.6第六步 报告撰写 3.总结 1.概述 2.分析步骤 2.1第一步 明确分析目的和思路 2.2第二步 数据收集 2.3第三步 数据处理 2.4第四步 数据分析 …

C语言每日一题(28) 反转链表

牛客网 BM1 反转链表 题目描述 描述 给定一个单链表的头结点pHead(该头节点是有值的,比如在下图,它的val是1),长度为n,反转该链表后,返回新链表的表头。 数据范围: 0≤n≤1000 要求:空间复…

数据分析实战 | SVM算法——病例自动诊断分析

目录 一、数据分析及对象 二、目的及分析任务 三、方法及工具 四、数据读入 五、数据理解 六、数据准备 七、模型训练 八、模型应用及评价 一、数据分析及对象 CSV文件——“bc_data.csv” 数据集链接:https://download.csdn.net/download/m0_70452407/88…

【C++】智能指针(一)

这篇文章介绍下C的智能指针,当然,可能没有你想的那么智能。 为什么需要智能指针1 void remodel(string& str) {string* ps new string(str);str *ps;return; }这里不讨论这个函数有没有意义,在这段代码中,很明显&#xff…

arduino 简易智能花盆

编辑器:arduino IDE 主板:arduino uno 传感器: 0.96寸的OLED屏(四脚) 声音模块 土壤温湿度模块 DS18B20温度模块(这里用到防水的) 光敏电阻模块(买成三脚的了只能显示高低&#x…

state 和 props 有什么区别?

一、state 一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是 state,一般在 constructor 中初始化 当需要修改里面的值的状态需要通过调用 setState 来改变,从而达到更新组件内部数据的作用,并且重新调用组件 r…

Linux操作系统下对c语言程序的编译和执行过程gcc,编译链接过程

目录 1.gcc,g,gdb安装 2.gcc分布编译链接 3.编译链接过程 4.执行 4.1 如何执行 4.2 两步执行与一步执行 4.3 多文件的编译执行 1.gcc,g,gdb安装 命令行写gcc,g,gdb根据提示安装:sudo apt install gcc/g/gdb 2.gcc分布编译链接 (1)预编译: gcc -E main.c -o main.i (2)…

视频剪辑技巧:探索画中画视频剪辑,如何制作引人入胜的视觉效果

在视频制作领域,画中画视频剪辑是一种备受瞩目的技术,它可以将多个视频画面叠加在一起,形成一种独特的视觉效果。这种剪辑技巧可以让观众同时看到两个或多个视频片段,创造出一种引人入胜的视觉体验。在开始画中画视频剪辑之前&…