一、使用密度无关像素
由于各种屏幕的像素密度都有所不同,因此相同数量的像素在不同设备上的实际大小也有所差异,这样使用像素(px)定义布局尺寸就会产生问题。
因此,请务必使用密度无关像素 dp 或独立比例像素 sp 单位指定尺寸。
1、dp与px的转换
因为ui给你的设计图是以px为单位的,Android开发则是使用dp作为单位的,那么该如何转换呢?
密度类型 | 代表的分辨率(px) | 屏幕像素密度(dpi) | 换算(px/dp) | 比例 |
---|---|---|---|---|
低密度(ldpi) | 240x320 | 120 | 1dp=0.75px | 3 |
中密度(mdpi) | 320x480 | 160 | 1dp=1px | 4 |
高密度(hdpi) | 480x800 | 240 | 1dp=1.5px | 6 |
超高密度(xhdpi) | 720x1280 | 320 | 1dp=2px | 8 |
超超高密度(xxhdpi) | 1080x1920 | 480 | 1dp=3px | 12 |
2、关于dp和sp需要注意的点
- 使用dp来代替px作为控件长度的统一度量单位
- 使用sp作为文字的统一度量单位
- 推荐使用12sp、14sp、18sp、22sp作为字体设置的大小,不推荐使用奇数和小数,容易造成精度的丢失问题;小于12sp的字体会太小导致用户看不清
二、 图片资源的匹配
1. 把图片放置到xhdpi应该是首选
原因:
xhdpi分辨率以内的手机需求量最旺盛
目前市面上最普遍的高端机的分辨率还多集中在720X1080范围内(xhdpi),所以目前来看xhpdi规格的图片资源成为了首选节省设计资源&工作量
在现在的App开发中(iOS和Android版本),有些设计师为了保持App不同版本的体验交互一致,可能会以iPhone手机为基础进行设计,包括后期的切图之类的。
设计师们一般都会用最新的iPhone6和iPhone5s(5s和5的尺寸以及分辨率都一样)来做原型设计,所有参数请看下图
机型 | 分辨率(px) | 屏幕尺寸(inch) | 系统密度(dpi) |
---|---|---|---|
iPhone 5s | 640X1164 | 4 | 332 |
iPhone 6 | 1334x750 | 4.7 | 326 |
iPhone 6 Plus | 1080x1920 | 5 | 400 |
iPhone主流的屏幕dpi约等于320, 刚好属于xhdpi,所以选择xhdpi作为唯一一套dpi图片资源,可以让设计师不用专门为Android端切图,直接把iPhone的那一套切好的图片资源放入drawable-xhdpi文件夹里就好,这样大大减少的设计师的工作量!
2、关于图片需要注意的点
如果是.9图或者是不需要多个分辨率的图片,放在drawable文件夹即可
对应分辨率的图片要正确的放在合适的文件夹,否则会造成图片拉伸等问题。
在720×1280中做了图片,要让开发人员放到drawable-xhdpi的资源文件夹中,这样才可以显示正确。一般仅提供一套素材就可以了,可以测试一下应用在低端手机上运行是否流畅,如果比较卡顿,可以根据需要提供部分mdpi的图片素材,因为xhdpi中的图片运行在mdpi的手机上会比较占内存。 以应用图标为例,xhdpi中的图标大小是96px,如果要单独给mdpi提供图标,那么这个图标大小是48px,放到drawable-mdpi的资源文件夹中。各个资源文件夹中的图片尺寸同样符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。
三、 动态布局计算
1、如上图所示,我在项目中的做法是,用(屏幕的宽度(像素)-两边的间距-中间间距)/3,这样得到每个图片的宽度,然后图片的高度设置成高图片的宽度相等(当然也可以重写view,自动设置宽等于高)
代码如下:
LinearLayout.LayoutParams linearParams = LinearLayout.LayoutParams)pic.getLayoutParams();
linearParams.width =(context.getResources().getDisplayMetrics().widthPixels-DisplayUtil.dip2px(context, 44)) / 3;
linearParams.height = linearParams.width;
pic.setLayoutParams(linearParams); //使设置好的布局参数应用到控件
四、 权重的使用
上图展示的图片效果,weight也可以搞定了!可以用比重去做,三个图片各占比为1,再调整下边距,但是高度怎么办,前面说过上,可以重写view,让这个view的高跟宽度相等,这种方式也可以。
五、dimen尺寸资源文件的使用
dimen.xml在values文件夹下面
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="btn_width">16dp</dimen>
<dimen name="btn_height">16dp</dimen>
</resources>
布局中使用:
<Button
android:text="@string/test_dimen1"
android:id="@+id/Button01"
android:layout_width="@dimen/btn_width"
android:layout_height="@dimen/btn_height"/>
文件夹含义: values-v11 ——-API 11+代表android 3.0 +,意思是在API11设备上,该目录下的dimens.xml代替res/values/dimens.xml values-480x320、values-800x480等 ————意思是在不同分辨率下,该目录下的dimens.xml代替res/values/dimens.xml