当前位置:网站首页>如何让一套代码完美适配各种屏幕?
如何让一套代码完美适配各种屏幕?
2022-07-25 14:10:00 【天涯海风】
UI适配
常见的适配方式
1 xml布局控件适配
- 避免写死View的宽高,尽量使用warp_content和match_parent;
- 父布局为LinearLayout,选择使用android:layout_weight属性,为布局中的每个子View设置权重;
- 父布局为RelativeLayout,可以选择使用layout_centerInParent等属性,设置子View的相对位置;
- 谷歌官方在之前版本中提供了一个百分比布局方式:support:percent,它支持RelativeLayout和FrameLayout的百分比布局,但是目前官方已经不再维护,而将他取而代之的是新晋布局:ConstraintLayout,ConstraintLayout强大之处不仅在于它能够进行百分比布局,还可以进行相对定位、角度定位、尺寸约束、宽高比、Chainl链布局等,在不同设备间都能处理的游刃有余。
2 图片适配
.9图
.9.png图片本质上还是png图片,相对于普通png图来说,.9图可以让图片在指定的位置拉伸和在指定的位置显示内容且不会失真;
3依据产品设计适配
所谓产品设计适配,指的是产品流程在不同设备上有不同的展示方式,例如手机与Pad的区别,在手机设备上,一般来说具体Item列表是一个页面,点击每个Item会跳转至新的详情页;
而在宽度>高度的Pad上,为了防止页面空白浪费,一般会要求屏幕左侧为Item列表,右侧即详情页,item与详情页会同时出现在用户的视觉内,如下图
关于这种类型的设计,其实郭霖《第一行代码》给出了一个方案,我在这里抛砖引玉一下,给出基本思路。
这种情况下,适配的核心在于利用android动态加载布局的机制,使得程序能够根据分辨率或者屏幕大小在运行时动态加载不同的布局,而动态加载就需要使用到限定符。
限定符
所谓限定符,指的是给res目录中的子目录加上“-限定符”,可以给不同设备提供不同的资源以及布局,如下图,layout添加-large,-small。

layout-small:指的是提供给小屏幕设备的资源;
layout-large:指的是提供给大屏幕设备的资源;
layout/layout-normal:指的是提供给中等屏幕设备的资源,也就是默认状态;
layout-xlarge:值得是提供给超大屏幕设备的资源;
在上面所提出的情景下,Pad即指的大屏幕,手机一般可看作为中等屏幕设备,为了在大屏幕下显示双页模式,我们可以在layout-large和layout目录下新建同一个name的布局xml,在layout-large下的xml针对Pad做双页处理,即左半边View+右半边View样式,layout目录下xml还是做普通处理。
在最后项目运行时,会根据不同设备来加载不同目录下的xml资源,即Pad会加载layout-large目录下的xml,普通手机设备会加载layout目录下的xml资源。
从而实现一套代码在不同设备上产品逻辑。
限定符可以大范围的区分设备,但是你还是不知道-large代表是多大的设备,-small代表的是多小的设备,如果需要清楚的区分各个屏幕的大小,那就需要用到最小宽度限定符。
最小宽度限定符(Smallest-width Qualifier),简称SW
最小宽度限定符指的是,对屏幕的宽度设立一个最小的值(dp),当当前设备屏幕宽度大于这个值就加载一个布局:
例如在res下新建一个layout-sw720dp的文件夹,当屏幕宽度大于720dp时,项目就会加载layout-sw720dp/***.xml 资源文件。
4限定符适配
前面提到了限定符的概念,也解决了一部分的设计适配问题,但是还有一些限定符的概念没有涉及到,该目录下将会提到不同的限定符的概念,可以结合2.1.3一起食用。
分辨率限定符
在Android项目中,会把放置图片资源的文件夹分为drawable-hdpi、xhdpi xxhdpi xxxhdpi等,这些指的就是分辨率限定符。
Andriod系统会根据手机屏幕的大小及屏幕密度去选择不同文件夹下的图片资源,以此来实现在不同大小不同屏幕分辨率下适配的问题。
这里提一点AS对图片资源的匹配规则:
举个例子,当当前的设备密度为xhdpi,此时代码中ImageView需要去引用drawable中的图片,那么根据匹配规则,系统首先会在drawable-xhdpi文件夹中去搜索,如果需要的图片存在,那么直接显示;如果不存在,那么系统将会开始从更高dpi中搜索,例如drawable-xxhdpi,drawable-xxxhdpi,如果在高dpi中搜索不到需要的图片,那么就会去drawable-nodpi中搜索,有则显示,无则继续向低dpi,如drawable-hdpi,drawable-mdpi,drawable-ldpi等文件夹一级一级搜索.
当在比当前设备密度低的文件夹中搜到图片,那么在ImageView(宽高在wrap_content状态下)中显示的图片将会被放大.图片放大也就意味着所占内存也开始增多.这也就是为什么分辨率不高的图片随意放置在drawable中也会出现OOM,而在高密度文件夹中搜到图片,图片在该设备上将会被缩小,内存也就相应减少。
在理想的状态下,不同dpi的文件下应该放置相应dpi的图片资源,以对不同的设备进行适配。
尺寸限定符和最小宽度限定符(前文提到)
屏幕方向限定符
屏幕方向限定符即“-land”、“-port”,分别代表横排和竖屏。
手机会存在横竖屏切换的场景,当设备横屏时,会主动加载layout-land/目录下的资源文件,当设备为竖屏时,则加载layout-port目录下的资源文件。
原文链接 文章摘录,技术交流,涉及版权,立刻删除
边栏推荐
- Three ways of redis cluster
- ~5 new solution of CCF 2021-12-2 sequence query
- Two Sum
- wangeditor 富文本编辑器
- Mysql表的操作
- bond0脚本
- Data analysis interview records 1-5
- Okaleido生态核心权益OKA,尽在聚变Mining模式
- Xintang nuc980 set DHCP or static IP
- [directory blasting tool] information collection stage: robots.txt, Yujian, dirsearch, dirb, gobuster
猜你喜欢

~5 new solution of CCF 2021-12-2 sequence query

NUC980 设置SSH Xshell连接

数字孪生 - 认知篇

Emergency science | put away this summer safety guide and let children spend the summer vacation safely!

Common problems in the use of wireless vibrating wire acquisition instrument

Internal error of LabVIEW

Word set paste to retain only text

OKA通证权益解析,参与Okaleido生态建设的不二之选

Tm1638 LED digital display module Arduino drive code

Esp32 connects to Alibaba cloud mqtt IOT platform
随机推荐
应急科普|收好这份暑期安全指南,让孩子安全过暑假!
Introducing mlops interpretation (I)
Brush questions - Luogu -p1085 unhappy Jinjin
~4.1 sword finger offer 05. replace spaces
Matplotlib data visualization three minutes entry, half an hour enchanted?
Sqli labs installation environment: ubuntu18 php7
Arduino code of key state machine for realizing single, double click, long press and other functions with esp32 timed interrupt
Brush questions - Luogu -p1152 happy jump
Workplace "digital people" don't eat or sleep 007 work system, can you "roll" them?
[force buckle] 645. Wrong set
手把手教学Yolov7的搭建及实践
R语言如何将大型Excel文件转为dta格式详解
Data analysis interview records 1-5
~5 new solution of CCF 2021-12-2 sequence query
sqli-labs Basic Challenges Less1-10
From Anaconda to tensorflow to jupyter, step on the pit and fill it all the way
Pytest.mark.parameterize and mock use
CDA level1 double disk summary
Wangeditor rich text editor
Application engineering safety monitoring of wireless vibrating wire acquisition instrument
