Android图像适配
转载自:http://blog.csdn.net/zhaokaiqiang1992
Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因、重要概念、解决方案及最佳实践,我相信如果你能认真的学习本文,对于Android的屏幕适配,你将有所收获!
- Android屏幕适配出现的原因
- 重要概念
- 屏幕尺寸
- 屏幕分辨率
- 屏幕像素密度
- dpdipdpisppx
- mdpihdpixdpixxdpi
- 解决方案
- 支持各种屏幕尺寸
- 使用wrap_contentmatch_parentweight
- 使用相对布局禁用绝对布局
- 使用限定符
- 使用尺寸限定符
- 使用最小宽度限定符
- 使用布局别名
- 使用屏幕方向限定符
- 使用自动拉伸位图
- 支持各种屏幕密度
- 使用非密度制约像素
- 提供备用位图
- 实施自适应用户界面流程
- 确定当前布局
- 根据当前布局做出响应
- 重复使用其他活动中的片段
- 处理屏幕配置变化
- 最佳实践
- 关于高清设计图尺寸
- ImageView的ScaleType属性
- 动态设置
- 更多参考资料
- 支持各种屏幕尺寸
Android屏幕适配出现的原因
在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配。
由于Android系统的开放性,任何用户、开发者、OEM厂商、运营商都可以对Android进行定制,修改成他们想要的样子。
在2012年,OpenSignalMaps(以下简称OSM)发布了第一份Android碎片化报告,统计数据表明,
下面这张图片所显示的内容足以充分说明当今Android系统碎片化问题的严重性,因为该图片中的每一个矩形都代表着一种Android设备。
下面这张图是Android屏幕尺寸的示意图,在这张图里面,蓝色矩形的大小代表不同尺寸,颜色深浅则代表所占百分比的大小。
而与之相对应的,则是下面这张图。这张图显示了IOS设备所需要进行适配的屏幕尺寸和占比。
当然,这张图片只是4,4s,5,5c,5s和平板的尺寸,现在还应该加上新推出的iphone6和plus,但是和Android的屏幕碎片化程度相比而言,还是差的太远。
但是在开始进入主题之前,我们再来探讨一件事情,那就是Android设备的屏幕尺寸,从几寸的智能手机,到10寸的平板电脑,再到几十寸的数字电视,我们应该适配哪些设备呢?
其实这个问题不应该这么考虑,因为对于具有相同像素密度的设备来说,像素越高,尺寸就越大,所以我们可以换个思路,将问题从单纯的尺寸大小转换到像素大小和像素密度的角度来。
所以说,我们只要尽量适配这几种分辨率,就可以在大部分的手机上正常运行了。
当然了,这只是手机的适配,对于平板设备(电视也可以看做是平板),我们还需要一些其他的处理。
好了,到目前为止,我们已经弄清楚了Android开发为什么要进行适配,以及我们应该适配哪些对象,接下来,终于进入我们的正题了!
重要概念
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?
什么是dp、dip、dpi、sp、px?他们之间的关系是什么?
什么是mdpi、hdpi、xdpi、xxdpi?如何计算和区分?
屏幕尺寸
屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米
比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
屏幕分辨率
屏幕分辨率是指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素,如1960*1080。
屏幕像素密度
屏幕像素密度是指每英寸上的像素点数,单位是dpi,即“dot per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。
dp、dip、dpi、sp、px
px我们应该是比较熟悉的,前面的分辨率就是用的像素为单位,大多数情况下,比如UI设计、Android原生API都会以px作为统一的计量单位,像是获取屏幕宽高等。
而sp,即scale-independent pixels,与dp类似,但是可以根据文字大小首选项进行放缩,是设置字体大小的御用单位。
mdpi、hdpi、xdpi、xxdpi
其实之前还有个ldpi,但是随着移动设备配置的不断升级,这个像素密度的设备已经很罕见了,所在现在适配时不需考虑。
mdpi、hdpi、xdpi、xxdpi用来修饰Android中的drawable文件夹及values文件夹,用来区分不同像素密度下的图片和dimen值。
名称 | 像素密度范围 |
---|---|
mdpi | 120dpi~160dpi |
hdpi | 160dpi~240dpi |
xhdpi | 240dpi~320dpi |
xxhdpi | 320dpi~480dpi |
xxxhdpi | 480dpi~640dpi |
在进行开发的时候,我们需要把合适大小的图片放在合适的文件夹里面。下面以图标设计为例进行介绍。
虽然 Android 也支持低像素密度 (LDPI) 的屏幕,但无需为此费神,系统会自动将 HDPI 尺寸的图标缩小到 1/2 进行匹配。
屏幕密度 | 图标尺寸 |
---|---|
mdpi | 48x48px |
hdpi | 72x72px |
xhdpi | 96x96px |
xxhdpi | 144x144px |
xxxhdpi | 192x192px |
解决方案
支持各种屏幕尺寸
使用wrap_content、match_parent、weight
要确保布局的灵活性并适应各种尺寸的屏幕,应使用 “wrap_content” 和 “match_parent” 控制某些视图组件的宽度和高度。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout android:layout_width="match_parent"android:id="@+id/linearLayout1" android:gravity="center"android:layout_height="50dp"><ImageView android:id="@+id/imageView1"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" /><View android:layout_height="wrap_content"android:id="@+id/view1"android:layout_width="wrap_content"android:layout_weight="1" /><Button android:id="@+id/categorybutton"android:background="@drawable/button_bg"android:layout_height="match_parent"android:layout_weight="0"android:layout_width="120dp"style="@style/CategoryButtonStyle"/></LinearLayout><fragment android:id="@+id/headlines"android:layout_height="fill_parent"android:name="com.example.android.newsreader.HeadlinesFragment"android:layout_width="match_parent" />
</LinearLayout>
下图是在横纵屏切换的时候的显示效果,我们可以看到这样可以很好的适配屏幕尺寸的变化。
weight是线性布局的一个独特的属性,我们可以使用这个属性来按照比例对界面进行分配,完成一些特殊的需求。
但是,我们对于这个属性的计算应该如何理解呢?
首先看下面的例子,我们在布局中这样设置我们的界面
我们在布局里面设置为线性布局,横向排列,然后放置两个宽度为0dp的按钮,分别设置weight为1和2,在效果图中,我们可以看到两个按钮按照1:2的宽度比例正常排列了,这也是我们经常使用到的场景,这是时候很好理解,Button1的宽度就是1/(1+2) = 1/3,Button2的宽度则是2/(1+2) = 2/3,我们可以很清楚的明白这种情景下的占比如何计算。
但是假如我们的宽度不是0dp(wrap_content和0dp的效果相同),则是match_parent呢?
下面是设置为match_parent的效果
我们可以看到,在这种情况下,占比和上面正好相反,这是怎么回事呢?说到这里,我们就不得不提一下weight的计算方法了。
android:layout_weight的真实含义是:如果View设置了该属性并且有效,那么该 View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比。
从这个角度我们来解释一下上面的现象。在上面的代码中,我们设置每个Button的宽度都是match_parent,假设屏幕宽度为L,那么每个Button的宽度也应该都为L,剩余宽度就等于L-(L+L)= -L。
Button1的weight=1,剩余宽度占比为1/(1+2)= 1/3,所以最终宽度为L+1/3*(-L)=2/3L,Button2的计算类似,最终宽度为L+2/3(-L)=1/3L。
这是在水平方向上的,那么在垂直方向上也是这样吗?
下面是测试代码和效果
如果是垂直方向,那么我们应该改变的是layout_height的属性,下面是0dp的显示效果
下面是match_parent的显示效果,结论和水平是完全一样的
虽然说我们演示了match_parent的显示效果,并说明了原因,但是在真正用的时候,我们都是设置某一个属性为0dp,然后按照权重计算所占百分比。
使用相对布局,禁用绝对布局
在开发中,我们大部分时候使用的都是线性布局、相对布局和帧布局,绝对布局由于适配性极差,所以极少使用。
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <TextView
- android:id="@+id/label"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:text="Type here:"/>
- <EditText
- android:id="@+id/entry"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/label"/>
- <Button
- android:id="@+id/ok"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/entry"
- android:layout_alignParentRight="true"
- android:layout_marginLeft="10dp"
- android:text="OK" />
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_toLeftOf="@id/ok"
- android:layout_alignTop="@id/ok"
- android:text="Cancel" />
- </RelativeLayout>
在上面的代码中我们使用了相对布局,并且使用alignXXX等属性指定了子控件的位置,下面是这种布局方式在应对屏幕变化时的表现
在小尺寸屏幕的显示
在平板的大尺寸上的显示效果
虽然控件的大小由于屏幕尺寸的增加而发生了改变,但是我们可以看到,由于使用了相对布局,所以控件之前的位置关系并没有发生什么变化,这说明我们的适配成功了。
使用限定符
使用尺寸限定符
如何做到这一点呢?我们可以通过使用配置限定符,在运行时根据当前的设备配置自动选择合适的资源了,例如根据各种屏幕尺寸选择不同的布局。
res/layout/main.xml,单面板(默认)布局:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="match_parent" />
- </LinearLayout>
res/layout-large/main.xml,双面板布局:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="400dp"
- android:layout_marginRight="10dp"/>
- <fragment android:id="@+id/article"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.ArticleFragment"
- android:layout_width="fill_parent" />
- </LinearLayout>
请注意第二种布局名称目录中的 large 限定符。系统会在属于较大屏幕(例如 7 英寸或更大的平板电脑)的设备上选择此布局。系统会在较小的屏幕上选择其他布局(无限定符)。
使用最小宽度限定符
res/layout/main.xml,单面板(默认)布局:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="match_parent" />
- </LinearLayout>
res/layout-sw600dp/main.xml,双面板布局:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="400dp"
- android:layout_marginRight="10dp"/>
- <fragment android:id="@+id/article"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.ArticleFragment"
- android:layout_width="fill_parent" />
- </LinearLayout>
也就是说,对于最小宽度大于等于 600 dp 的设备,系统会选择 layout-sw600dp/main.xml(双面板)布局,否则系统就会选择 layout/main.xml(单面板)布局。
但 Android 版本低于 3.2 的设备不支持此技术,原因是这些设备无法将 sw600dp 识别为尺寸限定符,因此我们仍需使用 large 限定符。这样一来,就会有一个名称为 res/layout-large/main.xml 的文件(与 res/layout-sw600dp/main.xml 一样)。但是没有太大关系,我们将马上学习如何避免此类布局文件出现的重复。
使用布局别名
后两个文件是相同的,因为其中一个用于和 Android 3.2 设备匹配,而另一个则是为使用较低版本 Android 的平板电脑和电视准备的。
要避免平板电脑和电视的文件出现重复(以及由此带来的维护问题),您可以使用别名文件。例如,您可以定义以下布局:
- <resources>
- <item name="main" type="layout">@layout/main_twopanes</item>
- </resources>
res/values-sw600dp/layout.xml:
- <resources>
- <item name="main" type="layout">@layout/main_twopanes</item>
- </resources>
后两个文件的内容相同,但它们并未实际定义布局。它们只是将 main 设置成了 main_twopanes 的别名。由于这些文件包含 large 和 sw600dp 选择器,因此无论 Android 版本如何,系统都会将这些文件应用到平板电脑和电视上(版本低于 3.2 的平板电脑和电视会匹配 large,版本高于 3.2 的平板电脑和电视则会匹配 sw600dp)。
使用屏幕方向限定符
某些布局会同时支持横向模式和纵向模式,但我们可以通过调整优化其中大部分布局的效果。在新闻阅读器示例应用中,每种屏幕尺寸和屏幕方向下的布局行为方式如下所示:
- 小屏幕,纵向:单面板,带徽标
- 小屏幕,横向:单面板,带徽标
- 7 英寸平板电脑,纵向:单面板,带操作栏
- 7 英寸平板电脑,横向:双面板,宽,带操作栏
- 10 英寸平板电脑,纵向:双面板,窄,带操作栏
- 10 英寸平板电脑,横向:双面板,宽,带操作栏
- 电视,横向:双面板,宽,带操作栏
因此,这些布局中的每一种都定义在了 res/layout/ 目录下的某个 XML 文件中。为了继续将每个布局分配给各种屏幕配置,该应用会使用布局别名将两者相匹配:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="match_parent" />
- </LinearLayout>
res/layout/onepane_with_bar.xml:(单面板带操作栏)
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <LinearLayout android:layout_width="match_parent"
- android:id="@+id/linearLayout1"
- android:gravity="center"
- android:layout_height="50dp">
- <ImageView android:id="@+id/imageView1"
- 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" />
- <View android:layout_height="wrap_content"
- android:id="@+id/view1"
- android:layout_width="wrap_content"
- android:layout_weight="1" />
- <Button android:id="@+id/categorybutton"
- android:background="@drawable/button_bg"
- android:layout_height="match_parent"
- android:layout_weight="0"
- android:layout_width="120dp"
- style="@style/CategoryButtonStyle"/>
- </LinearLayout>
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="match_parent" />
- </LinearLayout>
res/layout/twopanes.xml:(双面板,宽布局)
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="400dp"
- android:layout_marginRight="10dp"/>
- <fragment android:id="@+id/article"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.ArticleFragment"
- android:layout_width="fill_parent" />
- </LinearLayout>
res/layout/twopanes_narrow.xml:(双面板,窄布局)
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="200dp"
- android:layout_marginRight="10dp"/>
- <fragment android:id="@+id/article"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.ArticleFragment"
- android:layout_width="fill_parent" />
- </LinearLayout>
既然我们已定义了所有可能的布局,那就只需使用配置限定符将正确的布局映射到各种配置即可。
现在只需使用布局别名技术即可做到这一点:
res/values/layouts.xml:
- <resources>
- <item name="main_layout" type="layout">@layout/onepane_with_bar</item>
- <bool name="has_two_panes">false</bool>
- </resources>
res/values-sw600dp-land/layouts.xml:
- <resources>
- <item name="main_layout" type="layout">@layout/twopanes</item>
- <bool name="has_two_panes">true</bool>
- </resources>
res/values-sw600dp-port/layouts.xml:
- <resources>
- <item name="main_layout" type="layout">@layout/onepane</item>
- <bool name="has_two_panes">false</bool>
- </resources>
res/values-large-land/layouts.xml:
- <resources>
- <item name="main_layout" type="layout">@layout/twopanes</item>
- <bool name="has_two_panes">true</bool>
- </resources>
res/values-large-port/layouts.xml:
- <resources>
- <item name="main_layout" type="layout">@layout/twopanes_narrow</item>
- <bool name="has_two_panes">true</bool>
- </resources>
使用自动拉伸位图
支持各种屏幕尺寸通常意味着您的图片资源还必须能适应各种尺寸。例如,无论要应用到什么形状的按钮上,按钮背景都必须能适应。
.9的制作,实际上就是在原图片上添加1px的边界,然后按照我们的需求,把对应的位置设置成黑色线,系统就会根据我们的实际需求进行拉伸。
下图是对.9图的四边的含义的解释,左上边代表拉伸区域,右下边代表padding box,就是间隔区域,在下面,我们给出一个例子,方便大家理解。
如果你还不明白,那么我们看下面的效果图,我们分别以图一和图二作为背景图,下面是效果图。
我们可以看到,使用wrap_content属性设置长宽,图一比图二的效果大一圈,这是为什么呢?还记得我上面说的padding吗?
这就是padding的效果提现,怎么证明呢?我们再看下面一张图,给图一添加padding=0,这样背景图设置的padding效果就没了,是不是两个一样大了?
ok,我想你应该明白右下边的黑线的含义了,下面我们再看一下左上边的效果。
支持各种屏幕密度
使用非密度制约像素
- <Button android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/clickme"
- android:layout_marginTop="20dp" />
请务必使用 sp 指定文字大小:
- <TextView android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:textSize="20sp" />
除了介绍这些最基础的知识之外,我们下面再来讨论一下另外一个问题。
经过上面的介绍,我们都清楚,为了能够规避不同像素密度的陷阱,Google推荐使用dp来代替px作为控件长度的度量单位,但是我们来看下面的一个场景。
假如我们以Nexus5作为书写代码时查看效果的测试机型,Nexus5的总宽度为360dp,我们现在需要在水平方向上放置两个按钮,一个是150dp左对齐,另外一个是200dp右对齐,中间留有10dp间隔,那么在Nexus5上面的显示效果就是下面这样
但是如果在Nexus S或者是Nexus One运行呢?下面是运行结果
可以看到,两个按钮发生了重叠。
我们都已经用了dp了,为什么会出现这种情况呢?
你听我慢慢道来。
虽然说dp可以去除不同像素密度的问题,使得1dp在不同像素密度上面的显示效果相同,但是还是由于Android屏幕设备的多样性,如果使用dp来作为度量单位,并不是所有的屏幕的宽度都是相同的dp长度,比如说,Nexus S和Nexus One属于hdpi,屏幕宽度是320dp,而Nexus 5属于xxhdpi,屏幕宽度是360dp,Galaxy Nexus属于xhdpi,屏幕宽度是384dp,Nexus 6 属于xxxhdpi,屏幕宽度是410dp。所以说,光Google自己一家的产品就已经有这么多的标准,而且屏幕宽度和像素密度没有任何关联关系,即使我们使用dp,在320dp宽度的设备和410dp的设备上,还是会有90dp的差别。当然,我们尽量使用match_parent和wrap_content,尽可能少的用dp来指定控件的具体长宽,再结合上权重,大部分的情况我们都是可以做到适配的。
但是除了这个方法,我们还有没有其他的更彻底的解决方案呢?
我们换另外一个思路来思考这个问题。
下面的方案来自Android Day Day Up 一群的【blue-深圳】,谢谢他的分享精神
因为分辨率不一样,所以不能用px;因为屏幕宽度不一样,所以要小心的用dp,那么我们可不可以用另外一种方法来统一单位,不管分辨率是多大,屏幕宽度用一个固定的值的单位来统计呢?
答案是:当然可以。
我们假设手机屏幕的宽度都是320某单位,那么我们将一个屏幕宽度的总像素数平均分成320份,每一份对应具体的像素就可以了。
具体如何来实现呢?我们看下面的代码
- import java.io.File;
- import java.io.FileNotFoundException;
- import java.io.FileOutputStream;
- import java.io.PrintWriter;
- public class MakeXml {
- private final static String rootPath = "C:\\Users\\Administrator\\Desktop\\layoutroot\\values-{0}x{1}\\";
- private final static float dw = 320f;
- private final static float dh = 480f;
- private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";
- private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\n";
- public static void main(String[] args) {
- makeString(320, 480);
- makeString(480,800);
- makeString(480, 854);
- makeString(540, 960);
- makeString(600, 1024);
- makeString(720, 1184);
- makeString(720, 1196);
- makeString(720, 1280);
- makeString(768, 1024);
- makeString(800, 1280);
- makeString(1080, 1812);
- makeString(1080, 1920);
- makeString(1440, 2560);
- }
- public static void makeString(int w, int h) {
- StringBuffer sb = new StringBuffer();
- sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
- sb.append("<resources>");
- float cellw = w / dw;
- for (int i = 1; i < 320; i++) {
- sb.append(WTemplate.replace("{0}", i + "").replace("{1}",
- change(cellw * i) + ""));
- }
- sb.append(WTemplate.replace("{0}", "320").replace("{1}", w + ""));
- sb.append("</resources>");
- StringBuffer sb2 = new StringBuffer();
- sb2.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
- sb2.append("<resources>");
- float cellh = h / dh;
- for (int i = 1; i < 480; i++) {
- sb2.append(HTemplate.replace("{0}", i + "").replace("{1}",
- change(cellh * i) + ""));
- }
- sb2.append(HTemplate.replace("{0}", "480").replace("{1}", h + ""));
- sb2.append("</resources>");
- String path = rootPath.replace("{0}", h + "").replace("{1}", w + "");
- File rootFile = new File(path);
- if (!rootFile.exists()) {
- rootFile.mkdirs();
- }
- File layxFile = new File(path + "lay_x.xml");
- File layyFile = new File(path + "lay_y.xml");
- try {
- PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
- pw.print(sb.toString());
- pw.close();
- pw = new PrintWriter(new FileOutputStream(layyFile));
- pw.print(sb2.toString());
- pw.close();
- } catch (FileNotFoundException e) {
- e.printStackTrace();
- }
- }
- public static float change(float a) {
- int temp = (int) (a * 100);
- return temp / 100f;
- }
- }
代码应该很好懂,我们将一个屏幕宽度分为320份,高度480份,然后按照实际像素对每一个单位进行复制,放在对应values-widthxheight文件夹下面的lax.xml和lay.xml里面,这样就可以统一所有你想要的分辨率的单位了,下面是生成的一个320*480分辨率的文件,因为宽高分割之后总分数和像素数相同,所以x1就是1px,以此类推
- <?xml version="1.0" encoding="utf-8"?>
- <resources><dimen name="x1">1.0px</dimen>
- <dimen name="x2">2.0px</dimen>
- <dimen name="x3">3.0px</dimen>
- <dimen name="x4">4.0px</dimen>
- <dimen name="x5">5.0px</dimen>
- <dimen name="x6">6.0px</dimen>
- <dimen name="x7">7.0px</dimen>
- <dimen name="x8">8.0px</dimen>
- <dimen name="x9">9.0px</dimen>
- <dimen name="x10">10.0px</dimen>
- ...省略好多行
- <dimen name="x300">300.0px</dimen>
- <dimen name="x301">301.0px</dimen>
- <dimen name="x302">302.0px</dimen>
- <dimen name="x303">303.0px</dimen>
- <dimen name="x304">304.0px</dimen>
- <dimen name="x305">305.0px</dimen>
- <dimen name="x306">306.0px</dimen>
- <dimen name="x307">307.0px</dimen>
- <dimen name="x308">308.0px</dimen>
- <dimen name="x309">309.0px</dimen>
- <dimen name="x310">310.0px</dimen>
- <dimen name="x311">311.0px</dimen>
- <dimen name="x312">312.0px</dimen>
- <dimen name="x313">313.0px</dimen>
- <dimen name="x314">314.0px</dimen>
- <dimen name="x315">315.0px</dimen>
- <dimen name="x316">316.0px</dimen>
- <dimen name="x317">317.0px</dimen>
- <dimen name="x318">318.0px</dimen>
- <dimen name="x319">319.0px</dimen>
- <dimen name="x320">320px</dimen>
- </resources>
那么1080*1960分辨率下是什么样子呢?我们可以看下,由于1080和320是3.37倍的关系,所以x1=3.37px
- <?xml version="1.0" encoding="utf-8"?>
- <resources><dimen name="x1">3.37px</dimen>
- <dimen name="x2">6.75px</dimen>
- <dimen name="x3">10.12px</dimen>
- <dimen name="x4">13.5px</dimen>
- <dimen name="x5">16.87px</dimen>
- <dimen name="x6">20.25px</dimen>
- <dimen name="x7">23.62px</dimen>
- <dimen name="x8">27.0px</dimen>
- <dimen name="x9">30.37px</dimen>
- <dimen name="x10">33.75px</dimen>
- ...省略好多行
- <dimen name="x300">1012.5px</dimen>
- <dimen name="x301">1015.87px</dimen>
- <dimen name="x302">1019.25px</dimen>
- <dimen name="x303">1022.62px</dimen>
- <dimen name="x304">1026.0px</dimen>
- <dimen name="x305">1029.37px</dimen>
- <dimen name="x306">1032.75px</dimen>
- <dimen name="x307">1036.12px</dimen>
- <dimen name="x308">1039.5px</dimen>
- <dimen name="x309">1042.87px</dimen>
- <dimen name="x310">1046.25px</dimen>
- <dimen name="x311">1049.62px</dimen>
- <dimen name="x312">1053.0px</dimen>
- <dimen name="x313">1056.37px</dimen>
- <dimen name="x314">1059.75px</dimen>
- <dimen name="x315">1063.12px</dimen>
- <dimen name="x316">1066.5px</dimen>
- <dimen name="x317">1069.87px</dimen>
- <dimen name="x318">1073.25px</dimen>
- <dimen name="x319">1076.62px</dimen>
- <dimen name="x320">1080px</dimen>
- </resources>
无论在什么分辨率下,x320都是代表屏幕宽度,y480都是代表屏幕高度。
那么,我们应该如何使用呢?
首先,我们要把生成的所有values文件夹放到res目录下,当设计师把UI高清设计图给你之后,你就可以根据设计图上的尺寸,以某一个分辨率的机型为基础,找到对应像素数的单位,然后设置给控件即可。
下图还是两个Button,不同的是,我们把单位换成了我们在values文件夹下dimen的值,这样在你指定的分辨率下,不管宽度是320dp、360dp,还是410dp,就都可以完全适配了。
但是,还是有个问题,为什么下面的三个没有适配呢?
这是因为由于在生成的values文件夹里,没有对应的分辨率,其实一开始是报错的,因为默认的values没有对应dimen,所以我只能在默认values里面也创建对应文件,但是里面的数据却不好处理,因为不知道分辨率,我只好默认为x1=1dp保证尽量兼容。这也是这个解决方案的几个弊端,对于没有生成对应分辨率文件的手机,会使用默认values文件夹,如果默认文件夹没有,就会出现问题。
所以说,这个方案虽然是一劳永逸,但是由于实际上还是使用的px作为长度的度量单位,所以多少和google的要求有所背离,不好说以后会不会出现什么不可预测的问题。其次,如果要使用这个方案,你必须尽可能多的包含所有的分辨率,因为这个是使用这个方案的基础,如果有分辨率缺少,会造成显示效果很差,甚至出错的风险,而这又势必会增加软件包的大小和维护的难度,所以大家自己斟酌,择优使用。
更多信息可参考鸿洋的新文章Android 屏幕适配方案
提供备用位图
要生成这些图片,我们应先提取矢量格式的原始资源,然后根据以下尺寸范围针对各密度生成相应的图片。
然后,将生成的图片文件放在 res/ 下的相应子目录中(mdpi、hdpi、xhdpi、xxhdpi),系统就会根据运行您应用的设备的屏幕密度自动选择合适的图片。
这样一来,只要我们引用 @drawable/id,系统都能根据相应屏幕的 dpi 选取合适的位图。
但是还有个问题需要注意下,如果是.9图或者是不需要多个分辨率的图片,就放在drawable文件夹即可,对应分辨率的图片要正确的放在合适的文件夹,否则会造成图片拉伸等问题。
实施自适应用户界面流程
确定当前布局
由于每种布局的实施都会稍有不同,因此我们需要先确定当前向用户显示的布局。例如,我们可以先了解用户所处的是“单面板”模式还是“双面板”模式。要做到这一点,可以通过查询指定视图是否存在以及是否已显示出来。
- public class NewsReaderActivity extends FragmentActivity {
- boolean mIsDualPane;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main_layout);
- View articleView = findViewById(R.id.article);
- mIsDualPane = articleView != null &&
- articleView.getVisibility() == View.VISIBLE;
- }
- }
请注意,这段代码用于查询“报道”面板是否可用,与针对具体布局的硬编码查询相比,这段代码的灵活性要大得多。
再举一个适应各种组件的存在情况的方法示例:在对这些组件执行操作前先查看它们是否可用。例如,新闻阅读器示例应用中有一个用于打开菜单的按钮,但只有在版本低于 3.0 的 Android 上运行该应用时,这个按钮才会存在,因为 API 级别 11 或更高级别中的 ActionBar 已取代了该按钮的功能。因此,您可以使用以下代码为此按钮添加事件侦听器:
[java] view plaincopy
- Button catButton = (Button) findViewById(R.id.categorybutton);
- OnClickListener listener = /* create your listener here */;
- if (catButton != null) {
- catButton.setOnClickListener(listener);
- }
根据当前布局做出响应
- @Override
- public void onHeadlineSelected(int index) {
- mArtIndex = index;
- if (mIsDualPane) {
- /* display article on the right pane */
- mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
- } else {
- /* start a separate activity */
- Intent intent = new Intent(this, ArticleActivity.class);
- intent.putExtra("catIndex", mCatIndex);
- intent.putExtra("artIndex", index);
- startActivity(intent);
- }
- }
同样,如果该应用处于双面板模式下,就应设置带导航标签的操作栏;但如果该应用处于单面板模式下,就应使用下拉菜单设置导航栏。因此我们的代码还应确定哪种情况比较合适:
[java] view plaincopy
- final String CATEGORIES[] = { "热门报道", "政治", "经济", "Technology" };
- public void onCreate(Bundle savedInstanceState) {
- ....
- if (mIsDualPane) {
- /* use tabs for navigation */
- actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS);
- int i;
- for (i = 0; i < CATEGORIES.length; i++) {
- actionBar.addTab(actionBar.newTab().setText(
- CATEGORIES[i]).setTabListener(handler));
- }
- actionBar.setSelectedNavigationItem(selTab);
- }
- else {
- /* use list navigation (spinner) */
- actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST);
- SpinnerAdapter adap = new ArrayAdapter(this,
- R.layout.headline_item, CATEGORIES);
- actionBar.setListNavigationCallbacks(adap, handler);
- }
- }
重复使用其他活动中的片段
在类似情况下,通常可以在多个活动中重复使用相同的 Fragment 子类以避免代码重复。例如,在双面板布局中使用了 ArticleFragment:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal">
- <fragment android:id="@+id/headlines"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.HeadlinesFragment"
- android:layout_width="400dp"
- android:layout_marginRight="10dp"/>
- <fragment android:id="@+id/article"
- android:layout_height="fill_parent"
- android:name="com.example.android.newsreader.ArticleFragment"
- android:layout_width="fill_parent" />
- </LinearLayout>
然后又在小屏幕的Activity布局中重复使用了它 :
- ArticleFragment frag = new ArticleFragment();
- getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();
当然,这与在 XML 布局中声明片段的效果是一样的,但在这种情况下却没必要使用 XML 布局,因为报道片段是此活动中的唯一组件。
请务必在设计片段时注意,不要针对具体活动创建强耦合。要做到这一点,通常可以定义一个接口,该接口概括了相关片段与其主活动交互所需的全部方式,然后让主活动实施该界面:
例如,新闻阅读器应用的 HeadlinesFragment 会精确执行以下代码:
- public class HeadlinesFragment extends ListFragment {
- ...
- OnHeadlineSelectedListener mHeadlineSelectedListener = null;
- /* Must be implemented by host activity */
- public interface OnHeadlineSelectedListener {
- public void onHeadlineSelected(int index);
- }
- ...
- public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) {
- mHeadlineSelectedListener = listener;
- }
- }
然后,如果用户选择某个标题,相关片段就会通知由主活动指定的侦听器(而不是通知某个硬编码的具体活动):
- public class HeadlinesFragment extends ListFragment {
- ...
- @Override
- public void onItemClick(AdapterView<?> parent,
- View view, int position, long id) {
- if (null != mHeadlineSelectedListener) {
- mHeadlineSelectedListener.onHeadlineSelected(position);
- }
- }
- ...
- }
除此之外,我们还可以使用第三方框架,比如说使用“订阅-发布”模式的EventBus来更多的优化组件之间的通信,减少耦合。
处理屏幕配置变化
如果我们使用独立Activity实施界面的独立部分,那么请注意,我们可能需要对特定配置变化(例如屏幕方向的变化)做出响应,以便保持界面的一致性。
例如,在运行 Android 3.0 或更高版本的标准 7 英寸平板电脑上,如果新闻阅读器示例应用运行在纵向模式下,就会在使用独立活动显示新闻报道;但如果该应用运行在横向模式下,就会使用双面板布局。
也就是说,如果用户处于纵向模式下且屏幕上显示的是用于阅读报道的活动,那么就需要在检测到屏幕方向变化(变成横向模式)后执行相应操作,即停止上述活动并返回主活动,以便在双面板布局中显示相关内容:
- public class ArticleActivity extends FragmentActivity {
- int mCatIndex, mArtIndex;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- mCatIndex = getIntent().getExtras().getInt("catIndex", 0);
- mArtIndex = getIntent().getExtras().getInt("artIndex", 0);
- // If should be in two-pane mode, finish to return to main activity
- if (getResources().getBoolean(R.bool.has_two_panes)) {
- finish();
- return;
- }
- ...
- }
通过上面几个步骤,我们就完全可以建立一个可以根据用户界面配置进行自适应的App了。
最佳实践
关于高清设计图尺寸
Google官方给出的高清设计图尺寸有两种方案,一种是以mdpi设计,然后对应放大得到更高分辨率的图片,另外一种则是以高分辨率作为设计大小,然后按照倍数对应缩小到小分辨率的图片。
根据经验,我更推荐第二种方法,因为小分辨率在生成高分辨率图片的时候,会出现像素丢失,我不知道是不是有方法可以阻止这种情况发生。
而分辨率可以以1280*720或者是1960*1080作为主要分辨率进行设计。
ImageView的ScaleType属性
设置不同的ScaleType会得到不同的显示效果,一般情况下,设置为centerCrop能获得较好的适配效果。
动态设置
有一些情况下,我们需要动态的设置控件大小或者是位置,比如说popwindow的显示位置和偏移量等,这个时候我们可以动态的获取当前的屏幕属性,然后设置合适的数值
[java] view plaincopy
- public class ScreenSizeUtil {
- public static int getScreenWidth(Activity activity) {
- return activity.getWindowManager().getDefaultDisplay().getWidth();
- }
- public static int getScreenHeight(Activity activity) {
- return activity.getWindowManager().getDefaultDisplay().getHeight();
- }
- }
更多参考资料
Android图像适配相关推荐
- android q测试机型,小米9安卓Q系统刷机包开启测试 小米Android Q适配机型一览
7月9日,小米9 Android Q Beta版已开启测试.MIUI官方微博宣布,小米9 Android Q Beta版已开启测试,正在招募尝鲜用户.看名字就可以看出,新系统是基于Android Q打 ...
- android 屏幕分辨率 屏幕密度,Android屏幕适配——多分辨率多屏幕密度
为什么要适配,适配的好处等等这里就不说了,直接说我们要怎么适配,请看下面的内容. 1.重要概念 px:pixel,像素Android原生API,UI设计计量单位,如获取屏幕宽高. 屏幕分辨率:指在纵向 ...
- vivo android p 机型,vivo X21成全球首批Android P适配机型!vivo :不小心就秀实力了
原标题:vivo X21成全球首批Android P适配机型!vivo :不小心就秀实力了 近日,2018谷歌I/O大会正式召开,会上发布了大家期待已久的Android P开发者预览版,给我们展示了众 ...
- 2021年最详细的Android屏幕适配方案汇总
1 Android屏幕适配的度量单位和相关概念 建议在阅读本文章之前,可以先阅读快乐李同学写的文章<Android屏幕适配的度量单位和相关概念>,这篇文章包含了阅读本文的一些基础知识,推荐 ...
- Android 10 和Android 11 适配采坑 实践篇
背景 最近在项目中着手做Android10和Android11 适配时候,期间遇到了不少的坑.之前有专门写过qq.微信分享的适配.但是此次在针对偏业务侧适配工作的时候还是碰到了一些新的问题.记录下来, ...
- Android 屏幕适配全攻略
Android-屏幕适配全攻略 一.Android屏幕碎片化 由于 Android 系统的开发性,任何用户.开发者.OEM厂商.运营商都可以对 Android 进行定制,修改成他们想要的样子.各大厂商 ...
- [整理]Android屏幕适配(不同的屏幕分辨率和尺寸)
Android屏幕适配 目录: Android屏幕适配 概念区分 换算关系 划分标准 Android手机常见尺寸和对应分辨率 部分Android测试机分析 补充9图的使用说明 在实际开发过程中,会遇到 ...
- Android屏幕适配-必备知识
Android屏幕适配专题 Android屏幕适配-必备知识 Android屏幕适配-终结者 你是否被屏幕的各种参数(dpi.ppi等)搞的头晕眼花? 屏幕的密度到底是怎么回事? 应该如何来进行屏幕适 ...
- 2021年最全Android屏幕适配的度量单位px dp(dip) ppi dpi sp pt的区别(最详细,屏幕尺寸,屏幕分辨率,屏幕兼容,屏幕适配)
0 前言 快乐李同学最新在学习Android屏幕适配相关的知识点,其中涉及到了很多Android屏幕适配相关概念和度量单位,但是快乐李同学掌握的相关知识不牢固,于是决定写出这两篇文章对这方面的知识点做 ...
最新文章
- 操作系统学习:启动进入实模式
- SAP PLM市场广阔(转自e-works制造业信息化Researcher)
- oracle 无备份恢复数据文件
- EditText(输入框)详解
- 【Linux开发】linux设备驱动归纳总结(七):2.内核定时器
- C#中读取带有Xmlns命名空间的XML文件
- 数据库课设(足球联赛管理系统)
- 详解 Java NIO
- 设置不显示用户名和主机名_谁说Excel中不可以有聚光灯效果:Excel高亮显示设置...
- Node.js 非阻塞的 Sleep 要怎么写 ?
- 一种解决Android studio 3.0 Build报错的方法
- Java实现简单的计算器
- 静态页面编写规范02
- 高可用之2——存储b
- Linux下调用wps的Tables接口,WPS二次开发简单示例
- 如何辩证看待技术与业务的关系
- 用diiv实现多个方块居中嵌套--margin
- 分享暄桐好作业之《灵飞经》,静观春意生长
- python的super super easy教程 | 类
- anr用户无响应问题的解决