【ReactNative屏幕适配之二】Android 屏幕适配

当你搭好开发环境,下定决心开始做Android开发的时候,发现android手机有着各式各样的分辨率,屏幕大小。没错,这是一件蛋疼的事情,但是还好谷歌为我们准备好了一整套适配方案。随着版本的发展适配也越来越精确,UI 适配主要受平台两个因素的影响:屏幕尺寸(屏幕的像素宽度及像素高度)和屏幕密度,针对不同的应用场景采用的适配方案也不一样。

移动端尺寸基础知识

在Android UI开发中 有四个你会经常听到的词汇,分辨率,屏幕密度,px,dp。

分辨率

整个屏幕的像素数目,为了表示方便一般用屏幕的像素宽度(水平像素数目)乘以像素高度表示,形如1280x720,反之分辨率为1280x720的屏幕,像素宽度不一定为1280

****density**:

** 直接翻译的话貌似叫 密度。常见取值 1.5 , 1.0 。和标准dpi的比例(160px/inc)

px

长度单位,以具体像素为单位

dp

长度单位,与具体屏幕密度无关,显示的时候根据具体平台屏幕密度的不同最终转换为相应的像素长度,具体转换规则是: 1dp =(目标屏幕密度/标准密度)*px,标准密度为160dpi,例如,1dp长度在密度为160dpi的平台表示一个像素的长度,而在240dpi的平台则表示1.5个像素的长度。

dp 的引入初步的解决了屏幕适配的问题,所以在Android项目中不要使用px作为单位,尽量使用dp作为单位。
一般设计师会给你一个设计稿,上面一般的标记单位都是px,这个时候你需要把px转成dp。这个时候问题来了,如何转?
首先,你需要了解设计师给你设计稿的分辨率以及所参考的机型,有的设计师会android,iOS各出一套设计方案,如果你碰到这样的设计家,那请你联系我。如果Android有一套设计,那么你需要了解参考机型和分辨率得知屏幕密度,这时候你就可以将px转成dp。
好吧,上面的都是理想的情况,正常来说设计师会丢一个iOS的设计稿给你,这时候怎么办?
假设设计师是按iPhone5s来设计的,我们google下iPhone 5s的分辨率为1136640 尺寸为4英寸,根据初中的数学知识以及上面所介绍的应该可以轻松的算出屏幕密度吧。
因为4英寸是指屏幕对角线的长度,所以我们算出对角线的像素值
√1136
1136 + 640*640 = 1303

所以我们得出每英寸像素 1303/4 = 325,那么屏幕密度为 325/(160) ,大约屏幕密度就是为2。此时你就可以大胆的把px/2就是你所要的dp了。
综上所述,如果设计师会提供针对Android的设计稿,那么你可以建议设计师用一个中等常见的机型的分辨率来设计。如果只提供iOS设计的话,那么iphone5s 是最好的。
再推荐一个神奇的软件 马克鳗 高效的设计稿标注、测量工具。 嗯,以后再也不用求着设计师给标记了。

支持多种屏幕

Android 1.6之后 (API Level 4), Android 开始支持多种屏幕尺寸以及屏幕密度,通过不同的屏幕配置来适应各种设备。可以使用安卓系统的功能来优化您的应用程序的用户界面,为每个屏幕配置,确保应用程序不仅正确展示,而且提供最佳的用户体验。
之前说过屏幕密度的概念,这个是解决屏幕适配的核心。
几种屏幕密度说明
ldpi(low) ~120dpi
mdpi(medium) ~160dpi
hdpi(high) ~240dpi
xhdpi(extra-high) ~320dpi
xxhdpi(extra-extra-high) ~480dpi
xxxhdpi(extra-extra-extra-high) ~640dpi
ldpi是很早以前的产物,现在开发不需要考虑了。
屏幕的尺寸和屏幕密度的组合构成了分裂的Android设备。例如,两个相同的屏幕大小的设备,可能有不同的分辨率和比例。或者两个屏幕密度相同的设备有不同的分辨率。Android系统将这些差异化抽象为应用程序,这样你就可以为各种分辨率和屏幕密度提供用户界面,让系统去调整。屏幕的物理尺寸,分辨率,屏幕密度的组成就是我们所要去适配的。下图说明了不同的大小和密度是如何大致分组。


设计不同的屏幕尺寸用户界面时,会发现每个设计都需要一个最小的f分辨率。因此,每个屏幕大小都有一个由系统定义的关联的最小分辨率。按照这个最小分辨率进行设计,就不必担心会溢出屏幕的情况。
xlargescreens are at least 960dp x 720dp
largescreens are at least 640dp x 480dp
normalscreens are at least 470dp x 320dp
smallscreens are at least 426dp x 320dp

有了以上的理论基础,为了进一步优化UI,适配不同的屏幕尺寸和屏幕密度。通常情况下,我们可以为不同屏幕密度,不同分辨率配置不同的图片资源和布局文件。在运行时,系统会去加载适当的资源,适配不同分辨率和屏幕密度。

如何适配多种屏幕?

1.首先在布局文件中使用dp,sp作为长度与字体大小的单位,在编码过程中有涉及大小的单位,根据屏幕密度算出px。
2.根据不同的屏幕尺寸提供不同的layout文件。
例如,大屏幕上,你可能想调整某些元素的大小和位置,利用额外的屏幕空间,或在较小屏幕上,你可能需要调整大小,以便一切都可以放在屏幕上。
可以利用配置修饰符可以使用提供特定的Layout ---- small, normal, large, and xlarge。例如,一个超大的屏幕布局可以配置成layout-xlarge。
Android 3.2(API级别13)之后,可以使用SW < n > DP配置修饰符定义最小可用宽度的布局资源。例如,如果你的平板布局要求至少为600dp屏幕宽度,你应该将layout放入layout-sw600dp /。
3.为不同屏幕密度提供不同的资源文件
为Drawable文件夹提供配置修饰符。你可以使用特定密度资源ldpi,mdpi,hdpi,xhdpi,xxhdpi,和xxxhdpi。例如,高密度的屏幕位图应该放在drawable hdpi /。
4.使用新的标签
smallestWidth sw[N]dp Examples:sw600dp sw720dp

Available screen width w[N]dp Examples:w720dp w1024dp

Available screen height h[N]dp

5.使用wrap_content, match_parent
在布局文件中通过使用wrap_content, match_parent可以在当前屏幕中提供一个合适的尺寸
6.不要在程序中硬编码尺寸用px作为单位,即使要在代码中设置尺寸也要通过dp->px 转成适合该屏幕密度的值
7.不要使用AbsoluteLayout
8.擅用LinearLayout中使用weight

原文链接: http://www.jianshu.com/p/a311045232e6

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容