(轉)android屏幕適配

来源:http://www.cnblogs.com/zzw1994/archive/2016/01/04/5098314.html
-Advertisement-
Play Games

本文轉自:http://isux.tencent.com/learn-android-from-zero-session6.html一,Android的度量單位在Android中,定義組件尺寸的單位通常有dp和sp,那麼它們跟我們經常使用的px有什麼區別呢?pxpx是Pixels的縮寫,是常用的像素...


本文轉自:http://isux.tencent.com/learn-android-from-zero-session6.html

一,Android的度量單位

在Android中,定義組件尺寸的單位通常有dp和sp,那麼它們跟我們經常使用的px有什麼區別呢?

  • px

px是Pixels的縮寫,是常用的像素單位,對應的是屏幕上的點。
移動設備的尺寸有很多種,它們的屏幕總像素也是不同的,使用px單位的組件尺寸會有不一致的情況。

我們看個例子
ep_iconep_icon1
可以看出這個加號icon在解析度較高,尺寸較大的屏幕上反而顯得略小

  • dip/dp

dp(density-independent pixel)是與密度無關的像素單位,也就是dip。它是基於設備屏幕物理密度的抽象單位。1dp 表示屏幕DPI為160時1px的長度。DPI 越高的屏幕,屏幕繪製1dp 需要越多的像素,反之亦然。

我們可以將上個例子的圖片寬高設置為30dp

ep_icon2

可以看出兩個加號icon的尺寸是一致的

  • sp

sp(scale-independent pixel)是與縮放無關的像素單位。跟dp類似,唯一的不同是,該單位會受系統字體設置的影響,通常用在字體上。
Android在設計規範中規定了字體的常用大小:
圖片1
使用dp/sp的好處是,無論屏幕DPI如何,組件總能表現一致。

二,Android的佈局

在Android開發,為程式定義用戶界面佈局有以下方法:

  • 在XML 文件定義
  • 在程式代碼中實例化佈局
  • 使用圖形佈局工具

以上三種方法各有利弊,我們會根據需求場景來應用不同的佈局方式,這裡主要講XML佈局。

在XML文件定義組件,可以方便的管理程式的UI部分,並且分離表現和行為,使得代碼容易管理閱讀和管理,而且可以為不同的屏幕定製XML文件。
常用的佈局有Frame Layout , Linear Layout , Relative Layout , List View 和 Grid View。
由於List View 和 Grid View 涉及數據部分,我們放到後面再講,先從幾個簡單的開始  :)

Frame Layout

圖片2

FrameLayout是最簡單的佈局,添加到這個佈局的元素都是層疊的,當前元素會被下一個元素覆蓋,相當於CSS中的絕對定位position:absolute。

從 Summary 的 XML Attributes 中可以知道這些屬性的信息概要。
QQ截圖20140704103312

幾個常用的屬性:

  1. android:foreground  設置佈局的前景圖,前景圖不會被子元素覆蓋
  2. android:foregroundGravity 設置佈局前景圖的位置

對於FrameLayout.LayoutParams,這裡僅有android:layout_gravity屬性,可以查看前面文章
http://isux.tencent.com/learn-android-from-zero-session3.html

我們可以實踐一下:
新建一個Android項目,然後在layout文件夾找到佈局xml文件並寫入以下佈局
QQ圖片20140704105256

運行效果如下:
QQ截圖20140704105354

更多詳細信息可以查看谷歌大神文檔:
http://developer.android.com/reference/android/widget/FrameLayout.html

Linear Layout

圖片3

線性佈局在前面有所講解,小伙伴們可以看這篇文章http://isux.tencent.com/learn-android-from-zero-session3.html

Relative Layout

圖片4

相對佈局可以指定元素的位置。元素的位置可定義為相鄰元素的相對位置(例如元素A在元素B的左側),也可以定義為父元素的相對位置(例如在父元素的中間或者左側)。
使用相對佈局可以方便的控制元素的位置。在沒有定義時,所有的元素都是在父元素的左上方。

從 Summary 的 XML Attributes 中可以知道這些屬性的信息概要。
{CE3AF64C-7D92-4003-9796-7A0FF122B6CD}

幾個常用的屬性:

  1. android:gravity 設置其內容(文字、視圖)在該元素內的位置
  2. android:ignoreGravity  設置元素的ID使其不受gravity屬性的影響

在 RelativeLayout.LayoutParams,有兩類屬性,一類是子元素在父元素的對齊方式,另一類是子元素相對其他元素的位置

下麵是第一類屬性的示意圖
AUPWR1H[~IO@3LR3$3QV7]T

對於第二類屬性,我們實踐一下:
新建一個Android項目,然後在layout文件夾找到佈局xml文件並寫入以下佈局
圖片24

然後在values文件夾找到string.xml並增加以下代碼
圖片6

運行效果如下:
圖片14

更多詳細信息可以查看谷歌大神文檔:
http://developer.android.com/reference/android/widget/RelativeLayout.html

三,Android的屏幕適配

1.屏幕相關概念

下麵介紹幾個常見的名詞

  • 屏幕大小

通過查閱設備信息可以知道設備的物理尺寸,也可以通過計算屏幕對角線的長度得到。
在Android的設計規範中,把屏幕分成了4類:Small,Normal,Large,Extra Large

  • 屏幕密度

屏幕在物理尺寸範圍內的像素數量。也通常指DPI(dots per inch)。屏幕密度越小,所包含的像素也就越少。
在Android的設計規範中,把屏幕密度劃分為4類:Low,Medium,High,Extra High。

  • 屏幕方向

屏幕方向有橫向和縱向,這兩種情況下的屏幕長寬比是不同的。

  • 解析度

跟電腦解析度的概念類似,表示屏幕橫縱方向的像素數,例如480*800。
在為APP進行屏幕適配時,不能只考慮到像素,還有屏幕大小,屏幕密度等等。

  • DPI

dots per inch,就是每英寸多少像素,通過下麵公式可以得到。
DPI=(√(橫向解析度^2+縱向解析度^2))/屏幕尺寸

在Android的設計規範中,DPI分成了5個檔次:MDPI,HDPI,XHDPI,XXHDPI,XXXHDPI,它們的比例是 2:3:4:6:8

圖片7

可以看一下不同的尺寸單位在不同屏幕的情況:

XHDPI屏幕(~320DPI)
圖片8

HDPI屏幕(~240DPI)
圖片25

MDPI屏幕(~160DPI)
圖片10

通過以上可以得出:

  • 在MDPI的屏幕(即160DPI),1dp 和1sp 基本等於 1px 。
  • dp 和 px的換算公式:px = dp*(DPI/160)。
  • sp 和 px的換算公式:px = sp*(DPI/160)。

2.為不同的屏幕大小提供佈局

通常來說,Android通過縮放使得APP可以適應屏幕大小,但是對於一些特殊情況,我們可以提供更佳的佈局使得體驗更好。例如,在大屏幕設備,可以通過調整UI組件的位置和大小使屏幕的空間可以得到充分利用。對於小設備,就只需要調整UI組件的大小就行。

佈局常用的大小有small,normal,large和x-large,可以根據需要選擇佈局的類型進行配置。
常用的佈局配置如下:

  • res/layout/layout.xml
  • res/layout-small/layout.xml
  • res/layout-large/layout.xml
  • res/layout-large-land/layout.xml

3.為不同的屏幕密度提供圖片

對於android來說,可以使用的圖片類型有.png,.jpg,.gif以及.9.png(點九圖)。APP會為不同的屏幕放大或者縮小圖片。如果只為MDPI的設備提供了圖片,那麼對於HDPI的設備圖片會放大,對於LDPI的設備圖片會縮小。所以最好的方式是為不同的屏幕密度提供圖片。

對於設計師來說,可以選擇320DPI作為標準對APP進行設計,然後選擇Photoshop/Illustrator這些工具,按照設備的比例,導出不同尺寸的圖片。例如,為標準尺寸設備(XHDPI)設計的200×200按鈕圖,就需要為HDPI設備導出150×150的尺寸,為MDPI設備導出100×100的尺寸
然後將這些圖片放到 res/ 中對應的文件夾,APP會根據設備的情況選取圖片。
設置如下:

  • res/drawable-xhdpi/image.png
  • res/drawable-hdpi/image.png
  • res/drawable-mdpi/image.png

4,點九圖

“點九”是一種特殊的PNG格式,可以對圖片指定拉伸區域和內容區域。在SDK裡面的 tools/文件夾就能找到製作這種圖片的工具。

圖片15

工具界面如下:
圖片16
把圖片拖拽到工具裡面進行加點標記

在圖片的左邊(A區域左側)和上邊(B區域上方)進行標記,表示該區域可伸縮。
A區域:
圖片17
B區域:
圖片18

在圖片的底邊(c區域下方)和右邊(D區域右側)進行標記,表示該區域是內容。
C區域:
圖片19
D區域:
圖片20

標記完之後,文件在保存的時候會將改為.9.png格式。
使用時,在xml文件中設置android:background=”@drawable/button”。

圖片21

關於點九的文章前面有同學介紹過:http://isux.tencent.com/android-ui-9-png.html
當然,如果你想偷懶的話,這裡有個工具可以幫你點:)
http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

四,總結

在做屏幕適配時,需要註意以下幾個點:

  1. 在定義xml佈局的時候,使用dp單位,wrap_content,fill_parent(match_parent)
  2. 為不同的屏幕密度提供不同的圖片
  3. 對於有某些規則(漸變)的圖片使用點九圖
  4. 為特殊的屏幕類型(橫豎屏)提供不同的佈局

對於本節來說,是非常基礎的知識,同時,這也是打造精品APP的必備知識,各位加油吧:P


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 標簽:mount,umount概述在上一章增加linux操作系統空間中已經使用過了mount命令對分區進行掛載,這一章詳細介紹掛載管理,該命令涉及的知識點也挺多的而且也還比較重要,是需要掌握的一個命令。掛載分區mount基本語法mount [參數] /dev/sdb1(需要掛載的分區) /sdb1....
  • 這次藉助zynq的內嵌的XADC來採集zynq內部的一些參數:•VCCINT:內部PL核心電壓•VCCAUX:輔助PL電壓•VREFP:XADC正參考電壓•VREFN:XADC負參考電壓•VCCBram:PL BRAM電壓•VCCPInt:PS內部核心電壓•VCCPAux:PS輔助電壓•VCCDdr...
  • 標簽:fdisk分區概述我們管理的伺服器可能會隨著業務量的不斷增長造成磁碟空間不足的情況,在這個時候我們就需要增加磁碟空間,本章主要介紹如何使用fdisk分區工具創建磁碟分區和掛載分區,介紹兩種情況一種是對原有的磁碟的剩餘空間增加分區,第二種是對新添加的磁碟進行分區操作。擴展空間查看當前分區信息fd...
  • 1、進入管理員控制台停止mysql服務:net stop mysql;2、進入mysql的安裝路徑,如我的安裝路徑為C:\Program Files\MySQL\MySQL Server 5.5,打開my.ini文件,找到[mysqld],在該行下麵添加skip_grant_tables,也就是通知...
  • Redis 性能測試Redis 性能測試是通過同時執行多個命令實現的。Redis性能測試主要是通過src文件夾下的redis-benchmark來實現(Linux系統下)語法redis 性能測試的基本命令如下:redis-benchmark [option] [option value]實例以下實例...
  • Redis 數據類型Redis支持五種數據類型:string(字元串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合)。String(字元串)string是redis最基本的類型,你可以理解成與Memcached一模一樣的類型,一個key對應一個val...
  • SQLServer提供了多種數據導出導入的工具和方法,在此,分享我實踐的經驗(只涉及資料庫與Excel、資料庫與文本文件、資料庫與資料庫之間的導出導入)。(一)資料庫與Excel方法1:使用資料庫客戶端(SSMS)的界面工具。右鍵選擇要導出數據的資料庫,選擇“任務”——“導出數據”,下圖1,按照嚮導...
  • 1.操作系統版本用於安裝資料庫的操作系統鏡像文件名為:cn_windows_server_2012_r2_vl_with_update_x64_dvd_6052729.iso安裝DataCenter(帶GUI)版本2.資料庫版本安裝的資料庫文件名為:10204_vista_w2k8_x64_prod...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...