Android系统屏幕适配详解

一、相关概念

   1.分辨率

     分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。

   2.屏幕大小

     屏幕大小就是手机屏幕对角线的物理尺寸,单位为英寸(inch),1英寸=2.54cm,如某某手机为“5寸大屏手机”,就是指对角线的尺寸,5英寸×2.54厘米=12.7厘米。

   3.屏幕密度

屏幕密度就是对角线上的像素个数除以对角线的长度,单位为dpi(dots per inch)或者ppi。以下面的手机分辨率1080*1920像素为例,根据中学的勾股定理,可算得对角线的像素为2203px! 手机屏幕大小为5inch,所以屏幕密度是2203/5 = 440 dpi



实际密度与系统密度

尚未发现他处使用“实际密度”和“系统密度”这两个词汇,暂时由我如此定义吧。

“实际密度”就是我们自己算出来的密度,这个密度代表了屏幕真实的细腻程度,如上述例子中的440dpi就是实际密度,说明这块屏幕每寸有440个 像素。5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看来,屏幕密度将会出现很多数值,呈现严重的碎片 化。而密度又是安卓屏幕将界面进行缩放显示的依据,那么安卓是如何适配这么多屏幕的呢?

    其实,每部安卓手机屏幕都有一个初始的固定密度,这些数值是120、160、240、320、480,我们权且称为“系统密度”。大家发现规律没 有?相隔数值之间是2倍的关系。一般情况下,240×320的屏幕是低密度120dpi,即ldpi;320×480的屏幕是中密度160dpi,即 mdpi;480×800的屏幕是高密度240dpi,即hdpi;720×1280的屏幕是超高密度320dpi,即xhdpi;1080×1920的 屏幕是超超高密度480dpi,即xxhdpi。安卓对界面元素进行缩放的比例依据正是系统密度,而不是实际密度。



、Android屏幕适配出现的原因


    在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配。

由于Android系统的开放性,任何用户、开发者、OEM厂商、运营商都可以对Android进行定制,修改成他们想要的样子。

但是这种“碎片化”到底到达什么程度呢?

在2012年,OpenSignalMaps(以下简称OSM)发布了第一份Android碎片化报告,统计数据表明,

2012年,支持Android的设备共有3997种。

2013年,支持Android的设备共有11868种。

2014年,支持Android的设备共有18796种。

下面这张图片所显示的内容足以充分说明当今Android系统碎片化问题的严重性,因为该图片中的每一个矩形都代表着一种Android设备。




而随着支持Android系统的设备(手机、平板、电视、手表)的增多,设备碎片化、品牌碎片化、系统碎片化、传感器碎片化和屏幕碎片化的程度也在不断地加深。而我们今天要探讨的,则是对我们开发影响比较大的——屏幕的碎片化。

下面这张图是Android屏幕尺寸的示意图,在这张图里面,蓝色矩形的大小代表不同尺寸,颜色深浅则代表所占百分比的大小。


现在你应该很清楚为什么要对Android的屏幕进行适配了吧?屏幕尺寸这么多,为了让我们开发的程序能够比较美观的显示在不同尺寸、分辨率、像素密度(这些概念我会在下面详细讲解)的设备上,那就要在开发的过程中进行处理,至于如何去进行处理,这就是我们今天的主题了。


四、一个重要的单位dp

dp也可写为dip,即density-independent pixel,即密度无关像素,你可以想象dp更类似一个物理尺寸,比如一张宽和高均为100dp的图片在320×480和480×800的手机上“看起来”一样大。而实际 上,它们的像素值并不一样。dp正是这样一个尺寸,不管这个屏幕的密度是多少,屏幕上相同dp大小的元素看起来始终差不多大。

上面我们说过,dpi是屏幕像素密度,假如一英寸里面有160个像素,这个屏幕的像素密度就是160dpi,那么在这种情况下,dp和px如何换算呢?在Android中,规定以160dpi为基准,1dip=1px,如果密度是320dpi,则1dip=2px,以此类推。

    假如同样都是画一条320px的线,在480*800分辨率手机上显示为2/3屏幕宽度,在320*480的手机上则占满了全屏,如果使用dp为单位,在这两种分辨率下,160dp都显示为屏幕一半的长度。这也是为什么在Android开发中,写布局的时候要尽量使用dp而不是px的原因。

而sp,即scale-independent pixels,与dp类似,但是可以根据文字大小首选项进行放缩,是设置字体大小的御用单位。     


[if !supportLists]五、[endif]mdpi、hdpi、xdpi、xxdpi

    其实之前还有个ldpi,但是随着移动设备配置的不断升级,这个像素密度的设备已经很罕见了,所在现在适配时不需考虑。

mdpi、hdpi、xdpi、xxdpi用来修饰Android中的drawable文件夹及values文件夹,用来区分不同像素密度下的图片和dimen值。

那么如何区分呢?Google官方指定按照下列标准进行区分:

名称像素密度范围

mdpi        120dpi~160dpi

hdpi        160dpi~240dpi

xhdpi        240dpi~320dpi

xxhdpi        320dpi~480dpi

xxxhdpi    480dpi~640dpi

六、屏幕适配解决方案

   1.支持各种屏幕尺寸

使用wrap_content、match_parent、weight

      要确保布局的灵活性并适应各种尺寸的屏幕,应使用“wrap_content” 和 “match_parent” 控制某些视图组件的宽度和高度。

使用“wrap_content”,系统就会将视图的宽度或高度设置成所需的最小尺寸以适应视图中的内容,而 “match_parent”(在低于 API 级别 8 的级别中称为 “fill_parent”)则会展开组件以匹配其父视图的尺寸。

如果使用“wrap_content” 和 “match_parent” 尺寸值而不是硬编码的尺寸,视图就会相应地仅使用自身所需的空间或展开以填满可用空间。此方法可让布局正确适应各种屏幕尺寸和屏幕方向。

    weight是线性布局的一个独特的属性,我们可以使用这个属性来按照比例对界面进行分配,完成一些特殊的需求。

[if !supportLists]2. [endif]使用相对布局,禁用绝对布局

    在开发中,我们大部分时候使用的都是线性布局、相对布局和帧布局,绝对布局由于适配性极差,所以极少使用。

由于各种布局的特点不一样,所以不能说哪个布局好用,到底应该使用什么布局只能根据实际需求来确定。我们可以使用LinearLayout 的嵌套实例并结合 “wrap_content” 和 “match_parent”,以便构建相当复杂的布局。不过,我们无法通过 LinearLayout 精确控制子视图的特殊关系;系统会将 LinearLayout 中的视图直接并排列出。

如果我们需要将子视图排列出各种效果而不是一条直线,通常更合适的解决方法是使用RelativeLayout,这样就可以根据各组件之间的特殊关系指定布局了。例如,我们可以将某个子视图对齐到屏幕左侧,同时将另一个视图对齐到屏幕右侧。

[if !supportLists]3、[endif]使用尺寸限定符

    上面所提到的灵活布局或者是相对布局,可以为我们带来的优势就只有这么多了。虽然这些布局可以拉伸组件内外的空间以适应各种屏幕,但它们不一定能为每种屏幕都提供最佳的用户体验。因此,我们的应用不仅仅只实施灵活布局,还应该应针对各种屏幕配置提供一些备用布局。

如何做到这一点呢?我们可以通过使用配置限定符,在运行时根据当前的设备配置自动选择合适的资源了,例如根据各种屏幕尺寸选择不同的布局。

很多应用会在较大的屏幕上实施“双面板”模式,即在一个面板上显示项目列表,而在另一面板上显示对应内容。平板电脑和电视的屏幕已经大到可以同时容纳这两个面板了,但手机屏幕就需要分别显示。因此,我们可以使用以下文件以便实施这些布局:

res/layout/main.xml,单面板(默认)布局:

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="match_parent" />

res/layout-large/main.xml,双面板布局:

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="400dp"

              android:layout_marginRight="10dp"/>

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.ArticleFragment"

              android:layout_width="fill_parent" />

请注意第二种布局名称目录中的large 限定符。系统会在属于较大屏幕(例如 7 英寸或更大的平板电脑)的设备上选择此布局。系统会在较小的屏幕上选择其他布局(无限定符)。

4、使用最小宽度限定符

    在版本低于3.2 的 Android 设备上,开发人员遇到的问题之一是“较大”屏幕的尺寸范围,该问题会影响戴尔 Streak、早期的 Galaxy Tab 以及大部分 7 英寸平板电脑。即使这些设备的屏幕属于“较大”的尺寸,但很多应用可能会针对此类别中的各种设备(例如 5 英寸和 7 英寸的设备)显示不同的布局。这就是 Android 3.2 版在引入其他限定符的同时引入“最小宽度”限定符的原因。

最小宽度限定符可让您通过指定某个最小宽度(以dp 为单位)来定位屏幕。例如,标准 7 英寸平板电脑的最小宽度为 600 dp,因此如果您要在此类屏幕上的用户界面中使用双面板(但在较小的屏幕上只显示列表),您可以使用上文中所述的单面板和双面板这两种布局,但您应使用 sw600dp 指明双面板布局仅适用于最小宽度为 600 dp 的屏幕,而不是使用 large 尺寸限定符。

res/layout/main.xml,单面板(默认)布局:

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="match_parent" />

res/layout-sw600dp/main.xml,双面板布局:

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="400dp"

              android:layout_marginRight="10dp"/>

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.ArticleFragment"

              android:layout_width="fill_parent" />

 也就是说,对于最小宽度大于等于600 dp 的设备,系统会选择 layout-sw600dp/main.xml(双面板)布局,否则系统就会选择 layout/main.xml(单面板)布局。

但Android 版本低于 3.2 的设备不支持此技术,原因是这些设备无法将 sw600dp 识别为尺寸限定符,因此我们仍需使用 large 限定符。这样一来,就会有一个名称为 res/layout-large/main.xml 的文件(与 res/layout-sw600dp/main.xml 一样)。但是没有太大关系,我们将马上学习如何避免此类布局文件出现的重复。

5.使用布局别名

最小宽度限定符仅适用于Android 3.2 及更高版本。因此,如果我们仍需使用与较低版本兼容的概括尺寸范围(小、正常、大和特大)。例如,如果要将用户界面设计成在手机上显示单面板,但在 7 英寸平板电脑、电视和其他较大的设备上显示多面板,那么我们就需要提供以下文件:

res/layout/main.xml: 单面板布局

res/layout-large: 多面板布局

res/layout-sw600dp: 多面板布局

后两个文件是相同的,因为其中一个用于和Android 3.2 设备匹配,而另一个则是为使用较低版本 Android 的平板电脑和电视准备的。

要避免平板电脑和电视的文件出现重复(以及由此带来的维护问题),您可以使用别名文件。例如,您可以定义以下布局:

res/layout/main.xml,单面板布局

res/layout/main_twopanes.xml,双面板布局

然后添加这两个文件:

res/values-large/layout.xml:

    @layout/main_twopanes

res/values-sw600dp/layout.xml:

    @layout/main_twopanes

后两个文件的内容相同,但它们并未实际定义布局。它们只是将main 设置成了 main_twopanes 的别名。由于这些文件包含 large 和 sw600dp 选择器,因此无论 Android 版本如何,系统都会将这些文件应用到平板电脑和电视上(版本低于 3.2 的平板电脑和电视会匹配 large,版本高于 3.2 的平板电脑和电视则会匹配 sw600dp)。

6.使用屏幕方向限定符

  某些布局会同时支持横向模式和纵向模式,但我们可以通过调整优化其中大部分布局的效果。在新闻阅读器示例应用中,每种屏幕尺寸和屏幕方向下的布局行为方式如下所示:

* 小屏幕,纵向:单面板,带徽标

* 小屏幕,横向:单面板,带徽标

*7 英寸平板电脑,纵向:单面板,带操作栏

*7 英寸平板电脑,横向:双面板,宽,带操作栏

*10 英寸平板电脑,纵向:双面板,窄,带操作栏

*10 英寸平板电脑,横向:双面板,宽,带操作栏

*电视,横向:双面板,宽,带操作栏

因此,这些布局中的每一种都定义在了res/layout/ 目录下的某个 XML 文件中。为了继续将每个布局分配给各种屏幕配置,该应用会使用布局别名将两者相匹配:

res/layout/onepane.xml:(单面板)

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="match_parent" />

res/layout/onepane_with_bar.xml:(单面板带操作栏)

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

                  android:id="@+id/linearLayout1"  

                  android:gravity="center"

                  android:layout_height="50dp">

                   android:layout_height="wrap_content"

                   android:layout_width="wrap_content"

                   android:src="@drawable/logo"

                   android:paddingRight="30dp"

                   android:layout_gravity="left"

                   android:layout_weight="0" />

              android:id="@+id/view1"

              android:layout_width="wrap_content"

              android:layout_weight="1" />

                android:background="@drawable/button_bg"

                android:layout_height="match_parent"

                android:layout_weight="0"

                android:layout_width="120dp"

                style="@style/CategoryButtonStyle"/>

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="match_parent" />

res/layout/twopanes.xml:(双面板,宽布局)

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="400dp"

              android:layout_marginRight="10dp"/>

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.ArticleFragment"

              android:layout_width="fill_parent" />

res/layout/twopanes_narrow.xml:(双面板,窄布局)

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal">

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.HeadlinesFragment"

              android:layout_width="200dp"

              android:layout_marginRight="10dp"/>

              android:layout_height="fill_parent"

              android:name="com.example.android.newsreader.ArticleFragment"

              android:layout_width="fill_parent" />

既然我们已定义了所有可能的布局,那就只需使用配置限定符将正确的布局映射到各种配置即可。

现在只需使用布局别名技术即可做到这一点:

res/values/layouts.xml:

    @layout/onepane_with_bar

    false

 res/values-sw600dp-land/layouts.xml:

    @layout/twopanes

    true

 res/values-sw600dp-port/layouts.xml:

    @layout/onepane

    false

 res/values-large-land/layouts.xml:

    @layout/twopanes

    true

 res/values-large-port/layouts.xml:

    @layout/twopanes_narrow

true

7. 使用自动拉伸位图

    支持各种屏幕尺寸通常意味着您的图片资源还必须能适应各种尺寸。例如,无论要应用到什么形状的按钮上,按钮背景都必须能适应。

如果在可以更改尺寸的组件上使用了简单的图片,您很快就会发现显示效果多少有些不太理想,因为系统会在运行时平均地拉伸或收缩您的图片。解决方法为使用自动拉伸位图,即9.png图片,这是一种格式特殊的PNG 文件,其中会指明可以拉伸以及不可以拉伸的区域。

9.png的制作,实际上就是在原图片上添加1px的边界,然后按照我们的需求,把对应的位置设置成黑色线,系统就会根据我们的实际需求进行拉伸。

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

推荐阅读更多精彩内容