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

當(dāng)你搭好開發(fā)環(huán)境,下定決心開始做Android開發(fā)的時(shí)候使兔,發(fā)現(xiàn)android手機(jī)有著各式各樣的分辨率建钥,屏幕大小。沒錯(cuò)虐沥,這是一件蛋疼的事情熊经,但是還好谷歌為我們準(zhǔn)備好了一整套適配方案。隨著版本的發(fā)展適配也越來越精確欲险,UI 適配主要受平臺(tái)兩個(gè)因素的影響:屏幕尺寸(屏幕的像素寬度及像素高度)和屏幕密度镐依,針對(duì)不同的應(yīng)用場(chǎng)景采用的適配方案也不一樣。

移動(dòng)端尺寸基礎(chǔ)知識(shí)

在Android UI開發(fā)中 有四個(gè)你會(huì)經(jīng)常聽到的詞匯盯荤,分辨率馋吗,屏幕密度焕盟,px秋秤,dp。

分辨率

整個(gè)屏幕的像素?cái)?shù)目脚翘,為了表示方便一般用屏幕的像素寬度(水平像素?cái)?shù)目)乘以像素高度表示灼卢,形如1280x720,反之分辨率為1280x720的屏幕来农,像素寬度不一定為1280

****density**:

** 直接翻譯的話貌似叫 密度鞋真。常見取值 1.5 , 1.0 沃于。和標(biāo)準(zhǔn)dpi的比例(160px/inc)

px

長(zhǎng)度單位涩咖,以具體像素為單位

dp

長(zhǎng)度單位,與具體屏幕密度無關(guān)繁莹,顯示的時(shí)候根據(jù)具體平臺(tái)屏幕密度的不同最終轉(zhuǎn)換為相應(yīng)的像素長(zhǎng)度檩互,具體轉(zhuǎn)換規(guī)則是: 1dp =(目標(biāo)屏幕密度/標(biāo)準(zhǔn)密度)*px,標(biāo)準(zhǔn)密度為160dpi,例如咨演,1dp長(zhǎng)度在密度為160dpi的平臺(tái)表示一個(gè)像素的長(zhǎng)度闸昨,而在240dpi的平臺(tái)則表示1.5個(gè)像素的長(zhǎng)度。

dp 的引入初步的解決了屏幕適配的問題,所以在Android項(xiàng)目中不要使用px作為單位饵较,盡量使用dp作為單位拍嵌。
一般設(shè)計(jì)師會(huì)給你一個(gè)設(shè)計(jì)稿,上面一般的標(biāo)記單位都是px循诉,這個(gè)時(shí)候你需要把px轉(zhuǎn)成dp横辆。這個(gè)時(shí)候問題來了,如何轉(zhuǎn)茄猫?
首先龄糊,你需要了解設(shè)計(jì)師給你設(shè)計(jì)稿的分辨率以及所參考的機(jī)型,有的設(shè)計(jì)師會(huì)android,iOS各出一套設(shè)計(jì)方案募疮,如果你碰到這樣的設(shè)計(jì)家炫惩,那請(qǐng)你聯(lián)系我。如果Android有一套設(shè)計(jì)阿浓,那么你需要了解參考機(jī)型和分辨率得知屏幕密度他嚷,這時(shí)候你就可以將px轉(zhuǎn)成dp。
好吧芭毙,上面的都是理想的情況筋蓖,正常來說設(shè)計(jì)師會(huì)丟一個(gè)iOS的設(shè)計(jì)稿給你,這時(shí)候怎么辦退敦?
假設(shè)設(shè)計(jì)師是按iPhone5s來設(shè)計(jì)的粘咖,我們google下iPhone 5s的分辨率為1136640 尺寸為4英寸,根據(jù)初中的數(shù)學(xué)知識(shí)以及上面所介紹的應(yīng)該可以輕松的算出屏幕密度吧侈百。
因?yàn)?英寸是指屏幕對(duì)角線的長(zhǎng)度瓮下,所以我們算出對(duì)角線的像素值
√1136
1136 + 640*640 = 1303

所以我們得出每英寸像素 1303/4 = 325,那么屏幕密度為 325/(160) 钝域,大約屏幕密度就是為2讽坏。此時(shí)你就可以大膽的把px/2就是你所要的dp了。
綜上所述例证,如果設(shè)計(jì)師會(huì)提供針對(duì)Android的設(shè)計(jì)稿路呜,那么你可以建議設(shè)計(jì)師用一個(gè)中等常見的機(jī)型的分辨率來設(shè)計(jì)。如果只提供iOS設(shè)計(jì)的話织咧,那么iphone5s 是最好的胀葱。
再推薦一個(gè)神奇的軟件 馬克鰻 高效的設(shè)計(jì)稿標(biāo)注、測(cè)量工具笙蒙。 嗯抵屿,以后再也不用求著設(shè)計(jì)師給標(biāo)記了。

支持多種屏幕

Android 1.6之后 (API Level 4), Android 開始支持多種屏幕尺寸以及屏幕密度手趣,通過不同的屏幕配置來適應(yīng)各種設(shè)備晌该》世螅可以使用安卓系統(tǒng)的功能來優(yōu)化您的應(yīng)用程序的用戶界面,為每個(gè)屏幕配置朝群,確保應(yīng)用程序不僅正確展示燕耿,而且提供最佳的用戶體驗(yàn)。
之前說過屏幕密度的概念姜胖,這個(gè)是解決屏幕適配的核心誉帅。
幾種屏幕密度說明
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是很早以前的產(chǎn)物,現(xiàn)在開發(fā)不需要考慮了右莱。
屏幕的尺寸和屏幕密度的組合構(gòu)成了分裂的Android設(shè)備蚜锨。例如,兩個(gè)相同的屏幕大小的設(shè)備慢蜓,可能有不同的分辨率和比例亚再。或者兩個(gè)屏幕密度相同的設(shè)備有不同的分辨率晨抡。Android系統(tǒng)將這些差異化抽象為應(yīng)用程序氛悬,這樣你就可以為各種分辨率和屏幕密度提供用戶界面,讓系統(tǒng)去調(diào)整耘柱。屏幕的物理尺寸如捅,分辨率,屏幕密度的組成就是我們所要去適配的调煎。下圖說明了不同的大小和密度是如何大致分組镜遣。


設(shè)計(jì)不同的屏幕尺寸用戶界面時(shí),會(huì)發(fā)現(xiàn)每個(gè)設(shè)計(jì)都需要一個(gè)最小的f分辨率士袄。因此悲关,每個(gè)屏幕大小都有一個(gè)由系統(tǒng)定義的關(guān)聯(lián)的最小分辨率。按照這個(gè)最小分辨率進(jìn)行設(shè)計(jì)窖剑,就不必?fù)?dān)心會(huì)溢出屏幕的情況坚洽。
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

有了以上的理論基礎(chǔ)戈稿,為了進(jìn)一步優(yōu)化UI西土,適配不同的屏幕尺寸和屏幕密度。通常情況下鞍盗,我們可以為不同屏幕密度需了,不同分辨率配置不同的圖片資源和布局文件。在運(yùn)行時(shí)般甲,系統(tǒng)會(huì)去加載適當(dāng)?shù)馁Y源肋乍,適配不同分辨率和屏幕密度。

如何適配多種屏幕敷存?

1.首先在布局文件中使用dp,sp作為長(zhǎng)度與字體大小的單位墓造,在編碼過程中有涉及大小的單位堪伍,根據(jù)屏幕密度算出px。
2.根據(jù)不同的屏幕尺寸提供不同的layout文件觅闽。
例如帝雇,大屏幕上,你可能想調(diào)整某些元素的大小和位置蛉拙,利用額外的屏幕空間尸闸,或在較小屏幕上,你可能需要調(diào)整大小孕锄,以便一切都可以放在屏幕上吮廉。
可以利用配置修飾符可以使用提供特定的Layout ---- small, normal, large, and xlarge。例如畸肆,一個(gè)超大的屏幕布局可以配置成layout-xlarge宦芦。
Android 3.2(API級(jí)別13)之后,可以使用SW < n > DP配置修飾符定義最小可用寬度的布局資源轴脐。例如踪旷,如果你的平板布局要求至少為600dp屏幕寬度,你應(yīng)該將layout放入layout-sw600dp /豁辉。
3.為不同屏幕密度提供不同的資源文件
為Drawable文件夾提供配置修飾符令野。你可以使用特定密度資源ldpi,mdpi徽级,hdpi气破,xhdpi,xxhdpi餐抢,和xxxhdpi现使。例如,高密度的屏幕位圖應(yīng)該放在drawable hdpi /旷痕。
4.使用新的標(biāo)簽
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可以在當(dāng)前屏幕中提供一個(gè)合適的尺寸
6.不要在程序中硬編碼尺寸用px作為單位碳锈,即使要在代碼中設(shè)置尺寸也要通過dp->px 轉(zhuǎn)成適合該屏幕密度的值
7.不要使用AbsoluteLayout
8.擅用LinearLayout中使用weight

原文鏈接: http://www.reibang.com/p/a311045232e6

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市欺抗,隨后出現(xiàn)的幾起案子售碳,更是在濱河造成了極大的恐慌,老刑警劉巖绞呈,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贸人,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡佃声,警方通過查閱死者的電腦和手機(jī)艺智,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來圾亏,“玉大人十拣,你說我怎么就攤上這事封拧。” “怎么了夭问?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵哮缺,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我甲喝,道長(zhǎng)尝苇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任埠胖,我火速辦了婚禮糠溜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘直撤。我一直安慰自己非竿,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布谋竖。 她就那樣靜靜地躺著红柱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蓖乘。 梳的紋絲不亂的頭發(fā)上锤悄,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音嘉抒,去河邊找鬼零聚。 笑死,一個(gè)胖子當(dāng)著我的面吹牛些侍,可吹牛的內(nèi)容都是我干的隶症。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼岗宣,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蚂会!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起耗式,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤胁住,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后纽什,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體措嵌,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年芦缰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枫慷。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡让蕾,死狀恐怖浪规,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情探孝,我是刑警寧澤笋婿,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站顿颅,受9級(jí)特大地震影響缸濒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜粱腻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一庇配、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧绍些,春花似錦捞慌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至氮帐,卻和暖如春嗅虏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背上沐。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工旋恼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人奄容。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓冰更,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親昂勒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蜀细,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容