1.3.2 适配不同的屏幕

Android用尺寸和分辨率这两种常规属性对不同的设备屏幕加以分类。我们应该想到自己的app会被安装在各种屏幕尺寸和分辨率的设备中。这样,app中就应该包含一些可选资源,针对不同的屏幕尺寸和分辨率,来优化其外观。

  • 有4种普遍尺寸:小(small),普通(normal),大(large),超大(xlarge)
  • 4种普遍分辨率:低精度(ldpi), 中精度(mdpi), 高精度(hdpi), 超高精度(xhdpi)

声明针对不同屏幕所用的layout和bitmap,必须把这些可选资源放置在独立的目录中,这与适配不同语言时的做法类似。

同样要注意屏幕的方向(横向或纵向)也是一种需要考虑的屏幕尺寸变化,因此许多app会修改layout,来针对不同的屏幕方向优化用户体验。

创建不同的layout

为了针对不同的屏幕去优化用户体验,我们需要为每一种将要支持的屏幕尺寸创建唯一的XML文件。每一种layout需要保存在相应的资源目录中,目录以-<screen_size>为后缀命名。例如,对大尺寸屏幕(large screens),一个唯一的layout文件应该保存在res/layout-large/中。

Note:为了匹配合适的屏幕尺寸Android会自动地测量我们的layout文件。所以不需要因不同的屏幕尺寸去担心UI元素的大小,而应该专注于layout结构对用户体验的影响。(比如关键视图相对于同级视图的尺寸或位置)

例如,这个工程包含一个默认layout和一个适配大屏幕的layout:

MyProject/
    res/
        layout/
            main.xml
        layout-large/
            main.xml

layout文件的名字必须完全一样,为了对相应的屏幕尺寸提供最优的UI,文件的内容不同。

如平常一样在app中简单引用:

@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
}

系统会根据app所运行的设备屏幕尺寸,在与之对应的layout目录中加载layout。更多关于Android如何选择恰当资源的信息,详见Providing Resources

另一个例子,这一个工程中有为适配横向屏幕的layout:

MyProject/
    res/
        layout/
            main.xml
        layout-land/
            main.xml

默认的,layout/main.xml文件用作竖屏的layout。

如果想给横屏提供一个特殊的layout,也适配于大屏幕,那么则需要使用largeland修饰符。

 MyProject/
    res/
        layout/              # default (portrait)
            main.xml
        layout-land/         # landscape
            main.xml
        layout-large/        # large (portrait)
            main.xml
        layout-large-land/   # large landscape
            main.xml

Note:Android 3.2及以上版本支持定义屏幕尺寸的高级方法,它允许我们根据屏幕最小长度和宽度,为各种屏幕尺寸指定与密度无关的layout资源。这节课程不会涉及这一新技术,更多信息详见Designing for Multiple Screens。

创建不同的bitmap

我们应该为4种普遍分辨率:低,中,高,超高精度,都提供相适配的bitmap资源。这能使我们的app在所有屏幕分辨率中都能有良好的画质和效果。

要生成这些图像,应该从原始的矢量图像资源着手,然后根据下列尺寸比例,生成各种密度下的图像。

  • xhdpi: 2.0
  • hdpi: 1.5
  • mdpi: 1.0 (基准)
  • ldpi: 0.75

这意味着,如果针对xhdpi的设备生成了一张200x200的图像,那么应该为hdpi生成150x150,为mdpi生成100x100, 和为ldpi生成75x75的图片资源。

然后,将这些文件放入相应的drawable资源目录中:

MyProject/
    res/
        drawable-xhdpi/
            awesomeimage.png
        drawable-hdpi/
            awesomeimage.png
        drawable-mdpi/
            awesomeimage.png
        drawable-ldpi/
            awesomeimage.png

任何时候,当引用@drawable/awesomeimage时系统会根据屏幕的分辨率选择恰当的bitmap。

Note:低密度(ldpi)资源是非必要的,当提供了hdpi的图像,系统会把hdpi的图像按比例缩小一半,去适配ldpi的屏幕。

更多关于为app创建图标assets的信息和指导,详见Iconography design

时间: 2024-11-03 21:24:59

1.3.2 适配不同的屏幕的相关文章

iOS 的 APP 在系统中如何适配不同的屏幕的尺寸

2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone 3GS也保持不变. 那时编写iOS的App(应用程序),只支持绝对定位.比如一个按钮(x, y, width, height) = (20, 30, 40, 50),就表示它的宽度是40像素,高度是50像素,放在(20, 30)像素的位置. iPhone 4 2010年,iPhone 4发布,率先采用Retina显示屏,在屏幕的物理尺寸不变的情况下,像素成倍增

Qt移动应用开发(一):适配不同的屏幕

Qt移动应用开发(一):适配不同的屏幕 到目前为止,Qt5.3已经出现很长一段时间了,并且已经有一些应用使用Qt进行构建了,我自己也完成了第一款使用Qt构建的手机游戏<吃药了>.那么接下来的几篇文章主要向大家分享我是怎样使用Qt进行移动开发的.Qt移动应用开发分为多篇博客文章,每一篇文章都力求精简不罗嗦,力求为大家提供一个快捷的参考.我在这里也主要将使用Qt制作<吃药了>的方法技巧一一分享给大家. 说到移动应用开发,第一想到的就是Android了,的确.Digia其实在为Qt制定向

使用CSS3 Media Query技术适配Android平板屏幕分辨率和屏幕密度

使用HTML5开发移动应用时需要适配各种Android平板设备的分辨率和屏幕密度,过程实在很麻烦,最后的解决办法是使用css media query,同时匹配分辨率和屏幕密度,在每个设备上进行兼容性测试,最终保证在多数Android平板上都能较好的显示. 一个典型的针对设备的Css Media Query写法如下,可以保证页面高度充满屏幕,简单的设置height:100%是不行的. //SAMSUNG N5100, Nexus7 1, @media only screen and (min-de

通过js适配不同的屏幕大小

// 通过js适配不同的屏幕大小(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根据设备的比例调整初始fo

Android屏幕适配和文字屏幕适配

http://blog.sina.com.cn/s/blog_9996c67e0101euwd.html 最近在一个项目中要实现屏幕适配平板和手机等不同的型号,而蛋疼的美工给了一套图,而且这些图纸有在1280×800的平板上才能布局正常,所以没办法,只能自己一步一步的写了,终于让俺在度娘和谷哥上找到了类似的解决办法,现将我自己实现的方法粘贴出来: 首先俺有一个activity_index.xml文件: <xmlns:tools="http://schemas.android.com/too

移动端页面利用好viewport,适配各种宽度屏幕

最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用rem单位,而是利用js动态设置mete的viewport来达到适配的效果. 感觉挺不错的,也不需要计算什么东西,单位继续用px.代码分享下: // 计算缩放比例 (function () { var phoneScale = parseInt(window.screen.width) / 375; document.write('<meta name="viewport" content=

IOS之ipad和iphone之间的xib的适配所有的屏幕

今天在项目中运到了这个的一个问题,就是在原来的xib的是适配所有的iphone屏幕,然而现在既要适配iphone 也要适配Ipad,搞的很头大,现在就为了实现这个效果,老大给我了两种方法,就是在xib的基础上修改的,之直接上代码了,不多说了. 第一种方式:修改xib的文件(source code) 1.在适配所有的iphone的屏幕的xib中会出现这个东西: <variation key="default"> <mask key="subviews"

Android 适配不同分辨率屏幕

为了查看方便,特意贴一段 Google API 文档:http://developer.Android.com/intl/zh-cn/guide/practices/screens_support.html 文章末尾会附上该篇文档. 近期做些关于手机适配的工作. 下面来总结一下,希望可以对大家有帮助,本人能力有限,如果有解释失误的地方,请务必帮忙指出,谢谢. 首先引入几个概念. PPI : Pixels Per Inch的缩写简称,表示的是每英寸显示屏所拥有的像素(pixel)数目. DPI :

适配不同分辨率屏幕

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整.接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案. 范例效果预览 首先,我们来看看本篇