亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

漲姿勢(shì)了,原來Android屏幕適配還可以這么玩

Original 2016-12-03 11:21:41 459
abstract:為什么要屏幕適配?碎片化品牌機(jī)型碎片化屏幕尺寸碎片化操作系統(tǒng)碎片化為了保證用戶獲得一致的用戶體驗(yàn)效果,使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果,則需要我們進(jìn)行屏幕適配?;A(chǔ)概念屏幕尺寸屏幕尺寸是指屏幕對(duì)角線的長度,單位是英寸,1 inch=2.54 cm屏幕分辨率手機(jī)在橫向和縱向上的像素點(diǎn)數(shù)總和,單位是像素(pixel),1px = 1像素點(diǎn),舉個(gè)栗子,1080x

為什么要屏幕適配?

t01982e0291c6a1d93b.jpg

碎片化

品牌機(jī)型碎片化

屏幕尺寸碎片化

操作系統(tǒng)碎片化

為了保證用戶獲得一致的用戶體驗(yàn)效果,使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果,則需要我們進(jìn)行屏幕適配。

基礎(chǔ)概念

屏幕尺寸

屏幕尺寸是指屏幕對(duì)角線的長度,單位是英寸,1 inch=2.54 cm

屏幕分辨率

手機(jī)在橫向和縱向上的像素點(diǎn)數(shù)總和,單位是像素(pixel),1px = 1像素點(diǎn),舉個(gè)栗子,1080x1920,即寬度方向上有1080個(gè)像素點(diǎn),在高度方向上有1920個(gè)像素點(diǎn)。

屏幕像素密度

每英寸像素點(diǎn)個(gè)數(shù),單位是dpi,dots per inch。為簡便起見,Android 將所有屏幕密度分組為六種通用密度: 低、中、高、超高、超超高和超超超高。

ldpi(低)~120dpi

mdpi(中)~160dpi

hdpi(高)~240dpi

xhdpi(超高)~320dpi

xxhdpi(超超高)~480dpi

xxxhdpi(超超超高)~640dpi

t01982e0291c6a1d93b.jpg

dpi_example

屏幕密度無關(guān)像素dp(dip)

Density Independent Pixels,即密度無關(guān)像素。

160dpi, 1dp = 1px

240dpi, 1dp = 1.5px

320dpi, 1dp = 2px

480dpi, 1dp = 3px

640dpi, 1dp = 4px

使用px在低、中、高屏幕密度下的效果 

t01982e0291c6a1d93b.jpg

density-test-bad

使用dp在低、中、高屏幕密度下的效果 

t01982e0291c6a1d93b.jpg

dimen_example2

獨(dú)立比例像素sp

Scale Independent Pixels, 即sp或sip。

Android開發(fā)時(shí)用此單位設(shè)置文字大小,可根據(jù)字體大小首選項(xiàng)進(jìn)行縮放,推薦使用12sp、14sp、18sp、22sp作為字體設(shè)置的大小,不推薦使用奇數(shù)和小數(shù),容易造成精度的丟失問題,小于12sp的字體會(huì)太小導(dǎo)致用戶看不清。

屏幕適配之圖片適配

22.png

漲姿勢(shì)了,原來Android屏幕適配還可以這么玩

為了保證用戶獲得一致的用戶體驗(yàn)效果,使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果,則需要我們進(jìn)行屏幕適配。

作者:沉默的范大叔來源:安卓巴士Android開發(fā)者門戶|2016-12-02 20:43

 收藏

  分享


為什么要屏幕適配?


碎片化

品牌機(jī)型碎片化

屏幕尺寸碎片化

操作系統(tǒng)碎片化

為了保證用戶獲得一致的用戶體驗(yàn)效果,使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果,則需要我們進(jìn)行屏幕適配。

基礎(chǔ)概念

屏幕尺寸

屏幕尺寸是指屏幕對(duì)角線的長度,單位是英寸,1 inch=2.54 cm

屏幕分辨率

手機(jī)在橫向和縱向上的像素點(diǎn)數(shù)總和,單位是像素(pixel),1px = 1像素點(diǎn),舉個(gè)栗子,1080x1920,即寬度方向上有1080個(gè)像素點(diǎn),在高度方向上有1920個(gè)像素點(diǎn)。

屏幕像素密度

每英寸像素點(diǎn)個(gè)數(shù),單位是dpi,dots per inch。為簡便起見,Android 將所有屏幕密度分組為六種通用密度: 低、中、高、超高、超超高和超超超高。

ldpi(低)~120dpi

mdpi(中)~160dpi

hdpi(高)~240dpi

xhdpi(超高)~320dpi

xxhdpi(超超高)~480dpi

xxxhdpi(超超超高)~640dpi


dpi_example

屏幕密度無關(guān)像素dp(dip)

Density Independent Pixels,即密度無關(guān)像素。

160dpi, 1dp = 1px

240dpi, 1dp = 1.5px

320dpi, 1dp = 2px

480dpi, 1dp = 3px

640dpi, 1dp = 4px

使用px在低、中、高屏幕密度下的效果 


density-test-bad

使用dp在低、中、高屏幕密度下的效果 


dimen_example2

獨(dú)立比例像素sp

Scale Independent Pixels, 即sp或sip。

Android開發(fā)時(shí)用此單位設(shè)置文字大小,可根據(jù)字體大小首選項(xiàng)進(jìn)行縮放,推薦使用12sp、14sp、18sp、22sp作為字體設(shè)置的大小,不推薦使用奇數(shù)和小數(shù),容易造成精度的丟失問題,小于12sp的字體會(huì)太小導(dǎo)致用戶看不清。

屏幕適配之圖片適配


在設(shè)計(jì)圖標(biāo)時(shí),對(duì)于5種主流的像素密度(mdpi,hdpi,xhdpi,xxhdpi和xxxdpi)應(yīng)按照2:3:4:6:8的比例進(jìn)行縮放。例如一個(gè)啟動(dòng)圖片ic_launcher.png,它在各個(gè)像素密度文件夾下大小為:

ldpi(低)

mdpi(中)48*48

hdpi(高)72*72

xhdpi(超高)96*96

xxhdpi(超超高)144*144

xxxhdpi(超超超高)192*192

存在的問題

每套分辨率出一套圖,為美工或者設(shè)計(jì)增加了許多工作量

對(duì)Android工程文件的apk包變的很大

解決方法

Android SDK加載圖片流程

Android SDK會(huì)根據(jù)屏幕密度自動(dòng)選擇對(duì)應(yīng)的資源文件進(jìn)行渲染加載,比如說,SDK檢測(cè)到你手機(jī)的分辨率是xhdpi,會(huì)優(yōu)先到xhdpi文件夾下找對(duì)應(yīng)的圖片資源;

如果xhdpi文件夾下沒有圖片資源,那么就會(huì)去分辨率高的文件夾下查找,比如xxhdpi,直到找到同名圖片資源,將它按比例縮小成xhpi圖片;

如果往上查找圖片還是沒有找到,那么就會(huì)往低分辨率的文件夾查找,比如hdpi,直到找到同名圖片資源,將它按比例放大成xhpi圖片。

根據(jù)加載圖片的流程,可以得出理論上提供一套圖片就可以了。

那么應(yīng)該提供哪種分辨率規(guī)格呢?

原則上越高越好,同時(shí)結(jié)合當(dāng)前主流分辨率屏幕

自動(dòng)拉伸圖片

22.png

22.png

屏幕適配之布局適配

布局參數(shù)

使用wrap_content, match_parent, layout_weight。

weight的使用

22.png

weight_examples

當(dāng)layout_width為0dp,layout_weight分別是1和2 

<LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 
 
      <Button 
          android:layout_width="0dp" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:text="weight = 1"/> 
 
      <Button 
          android:layout_width="0dp" 
          android:layout_height="wrap_content" 
          android:layout_weight="2" 
          android:text="weight = 2"/> 
  </LinearLayout>

當(dāng)layout_width為match_parent,layout_weight分別為1和2

<LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 
 
      <Button 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:text="weight = 1"/> 
 
      <Button 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:layout_weight="2" 
          android:text="weight = 2"/> 
  </LinearLayout>

漲姿勢(shì)了,原來Android屏幕適配還可以這么玩

為了保證用戶獲得一致的用戶體驗(yàn)效果,使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果,則需要我們進(jìn)行屏幕適配。

作者:沉默的范大叔來源:安卓巴士Android開發(fā)者門戶|2016-12-02 20:43

 收藏

  分享


為什么要屏幕適配?


碎片化

品牌機(jī)型碎片化

屏幕尺寸碎片化

操作系統(tǒng)碎片化

為了保證用戶獲得一致的用戶體驗(yàn)效果,使得某一元素在Android不同尺寸、不同分辨率的手機(jī)上具備相同的顯示效果,則需要我們進(jìn)行屏幕適配。

基礎(chǔ)概念

屏幕尺寸

屏幕尺寸是指屏幕對(duì)角線的長度,單位是英寸,1 inch=2.54 cm

屏幕分辨率

手機(jī)在橫向和縱向上的像素點(diǎn)數(shù)總和,單位是像素(pixel),1px = 1像素點(diǎn),舉個(gè)栗子,1080x1920,即寬度方向上有1080個(gè)像素點(diǎn),在高度方向上有1920個(gè)像素點(diǎn)。

屏幕像素密度

每英寸像素點(diǎn)個(gè)數(shù),單位是dpi,dots per inch。為簡便起見,Android 將所有屏幕密度分組為六種通用密度: 低、中、高、超高、超超高和超超超高。

ldpi(低)~120dpi

mdpi(中)~160dpi

hdpi(高)~240dpi

xhdpi(超高)~320dpi

xxhdpi(超超高)~480dpi

xxxhdpi(超超超高)~640dpi


dpi_example

屏幕密度無關(guān)像素dp(dip)

Density Independent Pixels,即密度無關(guān)像素。

160dpi, 1dp = 1px

240dpi, 1dp = 1.5px

320dpi, 1dp = 2px

480dpi, 1dp = 3px

640dpi, 1dp = 4px

使用px在低、中、高屏幕密度下的效果 


density-test-bad

使用dp在低、中、高屏幕密度下的效果 


dimen_example2

獨(dú)立比例像素sp

Scale Independent Pixels, 即sp或sip。

Android開發(fā)時(shí)用此單位設(shè)置文字大小,可根據(jù)字體大小首選項(xiàng)進(jìn)行縮放,推薦使用12sp、14sp、18sp、22sp作為字體設(shè)置的大小,不推薦使用奇數(shù)和小數(shù),容易造成精度的丟失問題,小于12sp的字體會(huì)太小導(dǎo)致用戶看不清。

屏幕適配之圖片適配


在設(shè)計(jì)圖標(biāo)時(shí),對(duì)于5種主流的像素密度(mdpi,hdpi,xhdpi,xxhdpi和xxxdpi)應(yīng)按照2:3:4:6:8的比例進(jìn)行縮放。例如一個(gè)啟動(dòng)圖片ic_launcher.png,它在各個(gè)像素密度文件夾下大小為:

ldpi(低)

mdpi(中)48*48

hdpi(高)72*72

xhdpi(超高)96*96

xxhdpi(超超高)144*144

xxxhdpi(超超超高)192*192

存在的問題

每套分辨率出一套圖,為美工或者設(shè)計(jì)增加了許多工作量

對(duì)Android工程文件的apk包變的很大

解決方法

Android SDK加載圖片流程

Android SDK會(huì)根據(jù)屏幕密度自動(dòng)選擇對(duì)應(yīng)的資源文件進(jìn)行渲染加載,比如說,SDK檢測(cè)到你手機(jī)的分辨率是xhdpi,會(huì)優(yōu)先到xhdpi文件夾下找對(duì)應(yīng)的圖片資源;

如果xhdpi文件夾下沒有圖片資源,那么就會(huì)去分辨率高的文件夾下查找,比如xxhdpi,直到找到同名圖片資源,將它按比例縮小成xhpi圖片;

如果往上查找圖片還是沒有找到,那么就會(huì)往低分辨率的文件夾查找,比如hdpi,直到找到同名圖片資源,將它按比例放大成xhpi圖片。

根據(jù)加載圖片的流程,可以得出理論上提供一套圖片就可以了。

那么應(yīng)該提供哪種分辨率規(guī)格呢?

原則上越高越好,同時(shí)結(jié)合當(dāng)前主流分辨率屏幕

自動(dòng)拉伸圖片


ninepatch_raw


ninepatch_examples

屏幕適配之布局適配

布局參數(shù)

使用wrap_content, match_parent, layout_weight。

weight的使用


weight_examples

當(dāng)layout_width為0dp,layout_weight分別是1和2 

<LinearLayout       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:orientation="horizontal">        <Button           android:layout_width="0dp"           android:layout_height="wrap_content"           android:layout_weight="1"           android:text="weight = 1"/>        <Button           android:layout_width="0dp"           android:layout_height="wrap_content"           android:layout_weight="2"           android:text="weight = 2"/>   </LinearLayout>  

當(dāng)layout_width為match_parent,layout_weight分別為1和2

<LinearLayout       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:orientation="horizontal">        <Button           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:layout_weight="1"           android:text="weight = 1"/>        <Button           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:layout_weight="2"           android:text="weight = 2"/>   </LinearLayout>  

weight的計(jì)算

寬度 = 原來寬度 + 權(quán)重比值 * 剩余寬度

當(dāng)layout_width為0dp,layout_weight分別是1和2

第一個(gè)按鈕:寬度 = 0 + 1/3 * 屏寬 = 1/3屏寬

第二個(gè)按鈕:寬度 = 0 + 2/3 * 屏寬 = 2/3屏寬

當(dāng)layout_width為match_parent, layout_weight分別是1和2

第一個(gè)按鈕:寬度 = 屏寬 + 1/3 (屏寬 - 2 屏寬) = 2/3屏寬

第二個(gè)按鈕:寬度 = 屏寬 + 2/3 (屏寬 - 2 屏寬) = 1/3屏寬

布局使用

使用相對(duì)布局,禁用絕對(duì)布局。

限定符

尺寸限定符

在手機(jī)較小的屏幕上,加載layout文件夾布局

在平板電腦和電視的屏幕(>7英寸)上, 加載layout-large文件夾的布局

Android3.2版本之前

最小寬度限定符

在手機(jī)較小的屏幕上,加載layout文件夾布局

標(biāo)準(zhǔn)7英寸平板(其最小寬度為 600 dp),加載layout-sw600dp文件夾的布局

在Android3.2版本及之后版本

布局別名

適配手機(jī)的單面板(默認(rèn))布局:res/layout/activity_main.xml

適配尺寸>7寸平板的雙面板布局(Android 3.2前):res/layout-large/activity_main.xml

適配尺寸>7寸平板的雙面板布局(Android 3.2后):res/layout-sw600dp/activity_main.xml

最后的兩個(gè)文件的xml內(nèi)容是完全相同的,這會(huì)帶來:文件名的重復(fù)從而帶來一些列后期維護(hù)的問題,修改一個(gè)文件,可能忘記修改另外一個(gè)。于是為了要解決這種重復(fù)問題,我們引入了布局別名。

適配手機(jī)的單面板(默認(rèn))布局:res/layout/activity_main.xml

適配尺寸>7寸平板的雙面板布局:res/layout/activity_twopanes.xml

resalues/layout.xml

<?xml version="1.0" encoding="utf-8"?> 
 <resources> 
     <item name="main" type="layout">@layout/activity_main</item> 
 </resources>

resalues-large/layout.xml

<?xml version="1.0" encoding="utf-8"?> 
  <resources> 
      <item name="main" type="layout">@layout/activity_twopanes</item> 
  </resources>

resalues-sw600dp/layout.xml

<?xml version="1.0" encoding="utf-8"?> 
  <resources> 
      <item name="main" type="layout">@layout/activity_twopanes</item> 
  </resources>

setContentView(R.layout.main);

屏幕方向限定符

res/layout-land

res/layout-port

res/layout-sw600dp-land

res/layout-sw600dp-port

屏幕適配之dimen適配

Nexus 4 (4.7英寸 768x1280:xhdpi) 

22.png

Nexus S (4英寸 480x800:hdpi)

22.png

dimen_example2

即使使用dp,依然不能解決屏幕分辨率的適配問題,我們可以針對(duì)不同的屏幕創(chuàng)建不同的dimen值。

resalues/dimens.xml

<resources> 
 <dimen name="button_length_1">180dp</dimen> 
 <dimen name="button_length_2">160dp</dimen> 
 </resources>

resalues-480x800/dimens.xml

<resources> 
      <dimen name="button_length_1">113dp</dimen> 
      <dimen name="button_length_2">100dp</dimen> 
  </resources>

屏幕適配之百分比布局

官方文檔

Github Sample 

<?xml version="1.0" encoding="utf-8"?> 
  <android.support.percent.PercentRelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 
 
      <Button 
          android:layout_width="0dp" 
          android:layout_height="wrap_content" 
          android:text="30%" 
          app:layout_widthPercent="30%"/> 
 
      <Button 
          android:layout_width="0dp" 
          android:layout_height="wrap_content" 
          android:layout_alignParentRight="true" 
          android:text="20%" 
          app:layout_widthPercent="20%"/> 
 
  </android.support.percent.PercentRelativeLayout>

幕適配之自適應(yīng)用戶界面

t01982e0291c6a1d93b.jpg

newsreader_land

t01982e0291c6a1d93b.jpg

當(dāng)NewsReader在橫屏?xí)r是雙面板,左側(cè)是HeadLinesFragment, 右側(cè)是ArticleFragment, 點(diǎn)擊新聞標(biāo)題, 切換ArticleFragment的內(nèi)容。當(dāng)NewsReader在豎屏?xí)r是單面板,只有個(gè)HeadLinesFragment, 點(diǎn)擊新聞標(biāo)題,跳轉(zhuǎn)到ArticleActivity去顯示新聞內(nèi)容。所以,要實(shí)現(xiàn)這樣的橫豎屏適配,只是通過布局是完成不了的,不同業(yè)務(wù)邏輯的處理,還需要寫代碼來完成,這就是我們的自適應(yīng)用戶界面。

使用布局別名

resalues/layouts.xml 

<resources> 
 <item name="main_layout" type="layout">@layout/onepane_with_bar</item> 
 <bool name="has_two_panes">false</bool> 
 </resources>

resalues-sw600dp-land/layouts.xml 

<resources> 
 <item name="main_layout" type="layout">@layout/twopanes</item> 
 <bool name="has_two_panes">true</bool> 
 </resources>

resalues-sw600dp-port/layouts.xml

<resources> 
     <item name="main_layout" type="layout">@layout/onepane</item> 
     <bool name="has_two_panes">false</bool> 
 </resources>

判斷是單面板還是雙面板

View articleView = findViewById(R.id.article); 
mIsDualPane = articleView != null && articleView.getVisibility() == View.VISIBLE;//如果能夠找到ArticleFragment則是雙面板

單雙面板的不同業(yè)務(wù)邏輯

public void onHeadlineSelected(int index) { 
    mArtIndex = index;    if (mIsDualPane) {  
 
       // display it on the article fragment 
        mArticleFragment.displayArticle(mCurrentCat.getArticle(index)); 
    }    else {  
 
       // use separate activity 
        Intent i = new Intent(this, ArticleActivity.class); 
        i.putExtra("catIndex", mCatIndex); 
        i.putExtra("artIndex", index); 
        startActivity(i); 
    } 
}


Release Notes

Popular Entries