当前位置:网站首页>如何让一套代码完美适配各种屏幕?
如何让一套代码完美适配各种屏幕?
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目录下的资源文件。
原文链接 文章摘录,技术交流,涉及版权,立刻删除
边栏推荐
- Experiment the Arduino code of NTP network timing alarm clock with esp32+tm1638
- Amd epyc 9664 flagship specification exposure: 96 core 192 threads 480MB cache 3.8ghz frequency
- [force buckle] 645. Wrong set
- Apple failed to synchronize on its mobile terminal, so it exited the login. As a result, it could not log in again
- PHP website design ideas
- [learning record] plt.show() solution to flash back
- From Anaconda to tensorflow to jupyter, step on the pit and fill it all the way
- Wangeditor rich text editor
- 力扣(LeetCode)205. 同构字符串(2022.07.24)
- 数字孪生 - 认知篇
猜你喜欢

Day1:三种语言暴刷牛客130题

Leetcode202 --- Happy number
![Depth estimation self-monitoring model monodepth2 paper summary and source code analysis [theoretical part]](/img/22/17250eabf067b5b1b9b71e6e0ff14e.png)
Depth estimation self-monitoring model monodepth2 paper summary and source code analysis [theoretical part]

Gartner 2022 top technology trend: Super automation

What problems should SEOER pay attention to when baidu searches and attacks pirated websites?
![[force deduction] 1030. Arrange matrix cells in distance order](/img/6d/5301be3439cdb35500cbb4ae4a2534.png)
[force deduction] 1030. Arrange matrix cells in distance order

Data analysis business core

DVWA practice - brute force cracking

依迅总经理孙峰:公司已完成股改,准备IPO

手把手教你申请SSL证书
随机推荐
Deep understanding of pytorch distributed parallel processing tool DDP -- starting from bugs in engineering practice
Lesson of C function without brackets
RuntimeError: CUDA out of memory(已解决)[通俗易懂]
[directory blasting tool] information collection stage: robots.txt, Yujian, dirsearch, dirb, gobuster
Brush questions - Luogu -p1152 happy jump
新唐NUC980设置DHCP或者静态IP
Package management apt, dpkg
Mongodb源码部署以及配置
einsum(): operands do not broadcast with remapped shapes [original->remapped]: [1, 144, 20, 17]->[1,
2271. 毯子覆盖的最多白色砖块数 ●●
Brush questions - Luogu -p1150 Peter's smoke
Matplotlib data visualization three minutes entry, half an hour enchanted?
Numpy basic package for data analysis
Mongodb source code deployment and configuration
Apple failed to synchronize on its mobile terminal, and logged out. As a result, it could not log in again
NAT/NAPT地址转换(内外网通信)技术详解【华为eNSP】
Depth estimation self-monitoring model monodepth2 paper summary and source code analysis [theoretical part]
einsum(): operands do not broadcast with remapped shapes [original->remapped]: [1, 144, 20, 17]->[1,
What problems should SEOER pay attention to when baidu searches and attacks pirated websites?
Leetcode 205. isomorphic string (2022.07.24)
