首先了解以下几个概念
屏幕尺寸 Screen size
按照对角线测量,单位大小为英寸(inch 2.54厘米)
屏幕分辨率 Resolution
屏幕上总的像素点数目,例如相同物理尺寸的手机,分辨率越高显示的图像越清晰,像素点不能简单的看做是物理尺寸上的一个点!
屏幕密度 Screen density
手机屏幕上,单位区域内的像素点数量,简称为 dpi ( dots per inch ,为什么是 dots per inch ?我就不解了!!)
密度无关像素 dp Density-independent pixel
它是一个虚拟的单位,它的计算公式为 对于 160 dpi的屏幕,一个 dp 等于一个物理像素点 ,满足以下公式 px =dp.(dpi/160) ,也就是说在 160 dpi 的屏幕上一个 dp 等于 一个 px (物理像素点)
计算 dpi
例如一个 4寸的机器,分辨率是 480 * 800 ,如何计算其 dpi?但是我们却不知道手机屏幕的边长!大致可以这样计算。
先计算出对角线上像素点数目 约为932.95 (勾股定理)
然后 除以对角线 932.95/ 4 =233.23
实际上这个计算方式有点茫然,因为它给出的定义是单位面积上的像素点个数。
那么我们为什么要用 dp 作为 UI的测量单位?
dp 和像素无关,其次考虑我们想要实现的 UI 效果,我们想要实现的 UI 效果大致有以下几种:
组件按百分比铺满
组件在界面中显示,大小比例符合美观
其实 dp 帮我们解决的问题是,使用 dp 作为单位,能保证在不同分辨率展现出近似的大小出来,但是设备物理尺寸存在较大差异的时候,就会出现不能满足的情况,例如为 4.3 寸设计的 UI 在 5.0 寸上一跑,可能会出现大量空白的情况。以下是简要的例子:
然后我在
红米 1S 4.7 寸 分辨率 1280 * 720
魅族 MX3 5.1寸 分辨率 1800 * 1080
测试的时候,设置组件 UI 大小 300 dp 的出来的结果是,两者在这两款机子上显示的 UI 大小基本一致
之后 我在一部 三星手机测试 3.0 寸 分辨率 也应该很低,再测试的时候发现,这个 UI 大小就差距很大了,基本上随水为 7/8 的样子。
屏幕分辨率适应的方案
官方说明:
多用wrap_content 和 match_parent
多用 weight 属性
多用 …..
(说了和没说一样)
实际开发中的分辨率适应:
为不同的分辨率配置不同的尺寸
例如使用 dimen ,在不同的value 文件夹中配置不同的 dimen ,让Android系统在实际运行中去配置不同的尺寸(这点很让人心烦)
利用百分比
在 web 开发中可没有屏幕分辨率适应,因为它们能使用百分比属性,直接把组件大小设置为百分比属性,所以我们借鉴这个经验,考虑如何在 Android 中使用这个”百分比“设置,下面就介绍一些做法
一种网络流传的恶劣做法
考虑直接在分辨率适配下写,尺寸,比如你这个800*480 的分辨率手机下,要想做出一个按钮效果是整个手机屏幕的四分一,那么我们将其大小写死为 200 px *120 px 为其设置宽和高。
但是,那么多分辨率,怎么办?有恒心者事竟成。我们可以考虑怎么去实现一种高效的工作方式:
把一个较低的分辨率,例如480 * 320 作为尺寸标准,将每种分辨率按比例划分,然后就可以在dimen 中使用 以下做法
在 values-400X320 文件夹下
有lay_x.xml 文件
1.0px
2.0px
3.0px
4.0px
5.0px
6.0px
7.0px
8.0px
9.0px
10.0px
.....
317.0px
318.0px
319.0px
320px
lay_y.xml 文件中
有lay_x.xml 文件
1.0px
2.0px
3.0px
4.0px
5.0px
6.0px
7.0px
8.0px
9.0px
10.0px
11.0px
12.0px
13.0px
..........
397.0px
398.0px
399.0px
400px
然后在 values-800X480 文件夹下
有lay_x.xml 文件
1.5px
3.0px
4.5px
6.0px
7.5px
9.0px
10.5px
12.0px
13.5px
15.0px
16.5px
.....
471.0px
472.5px
474.0px
475.5px
477.0px
478.5px
480px
在 lay_y.xml 中
2.0px
4.0px
6.0px
8.0px
10.0px
12.0px
.....
786.0px
788.0px
790.0px
792.0px
794.0px
796.0px
798.0px
800px
这样的话,如果我们想要实现之前的效果,实现 屏幕四分一大小的按钮就可以在代码中这样添加一个组件
android:id="@+id/but_one"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_width="@dimen/x80"
android:layout_height="@dimen/y120"
android:background="#F96823"
/>
我这里有自动生成这个文件夹下配置文件的 工具。
tip: AS 在 project 视图下才能看到 这系列的 values文件夹,Android 下视图会被隐藏细节。
Android 5.0 的百分比属性
百分比属性支持库 android.support.percent
在 module 的 gradle.build 中的 dependencies 节点下加入以下代码
compile 'com.android.support:percent:22.2.0'
两种布局供大家使用:
PercentRelativeLayout、PercentFrameLayout,通过名字就可以看出,这是继承自FrameLayout和RelativeLayout两个容器类,所以基本不用解释它们的用法了
支持的属性有:(大家按字面意思就可以理解这些标签作用了)
layout_widthPercent、layout_heightPercent、
layout_marginPercent、layout_marginLeftPercent、
layout_marginTopPercent、layout_marginRightPercent、
layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。
以下是 简单的一个例子代码
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="match_parent">
app:layout_heightPercent="50%"
app:layout_widthPercent="50%"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="left|top"
android:background="#44ff0000"
android:gravity="center"
android:text="width:50%,height:50%" />
值得注意的是 这个 xml 节点的命名空间不一样的
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
以前的命名空间是
xmlns:android="http://schemas.android.com/apk/res/android"
多了一行的引用命名空间,不然会提示找不到一些节点的标签名称