屏幕适配入门-了解基本概念-图片适配

最新推荐文章于 2023-04-06 19:46:59 发布

benjamin gao

最新推荐文章于 2023-04-06 19:46:59 发布

阅读量643

点赞数

分类专栏：屏幕适配文章标签：屏幕适配

本文链接：https://blog.csdn.net/musk6/article/details/53789550

版权

屏幕适配专栏收录该内容

5 篇文章 0 订阅

订阅专栏

google 点击打开链接

看不懂google的看这个启蒙篇点击打开链接

鸿洋给出的建议：点击打开链接

主要是通过设置百分比的方式达到适配的目的。

就是在项目中针对你所需要适配的手机屏幕的分辨率各自编写一个文件夹。

然后我们根据一个基准，为基准的意思就是：

比如480*320的分辨率为基准

宽度为320，将任何分辨率的宽度分为320份，取值为x1-x320
高度为480，将任何分辨率的高度分为480份，取值为y1-y480

这样做的原理是设定一基准屏幕分辨率 w*h ，然后将宽度等分为 w 份，高度等分为 h 份

然后针对所有的屏幕分辨率宽度分为 w份，高度分为 h份。

当宽1/宽2 ！= 高1/高2 ，对于 10*10 的一张图片来说，在屏幕分辨率为宽1*高1 ，和屏幕分辨率为宽2*高2 ，图片会变形： 720*1280 vs 320*480

google提供的支持百分比的方式布局：点击打开链接

当然了Android-percent-support这个库，基本可以解决上述问题，是不是有点小激动，稍等，我们先描述下这个support-lib。

这个库提供了：

两种布局供大家使用：
PercentRelativeLayout、PercentFrameLayout，通过名字就可以看出，这是继承自FrameLayout和RelativeLayout两个容器类；
支持的属性有：

layout_widthPercent、layout_heightPercent、
layout_marginPercent、layout_marginLeftPercent、
layout_marginTopPercent、layout_marginRightPercent、
layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。

可以看到支持宽高，以及margin。

也就是说，大家只要在开发过程中使用PercentRelativeLayout、PercentFrameLayout替换FrameLayout、RelativeLayout即可。

=========================================================================

一位UI设计的建议点击打开链接

1、了解几个概念

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

（2）屏幕大小。屏幕大小是手机对角线的物理尺寸，以英寸（inch）为单位。比如某某手机为“5寸大屏手机”，就是指对角线的尺寸，5寸×2.54厘米/寸=12.7厘米。

（3）密度（dpi，dots per inch；或PPI，pixels per inch）。从英文顾名思义，就是每英寸的像素点数，数值越高当然显示越细腻。假如我们知道一部手机的分辨率是1080×1920，屏幕大小是5英寸，你能否算出此屏幕的密度呢？哈哈，中学的勾股定理派上用场啦！通过宽1080和高1920，根据勾股定理，我们得出对角线的像素数大约是2203，那么用2203除以5就是此屏幕的密度了，计算结果是440。440dpi的屏幕已经相当细腻了。

2、android推荐的屏幕分辨率和对应的屏幕密度

博主在理解Android运行时dp和px的转化关系是出错，正确的理解是不存在“系统密度”和“实际密度”之分，

Android 采用的就是真是设备的密度！

屏幕尺寸 2.8 3.6 3.9 4.6 4.6

dp总数 320 320 320 360 360

3、一个重要的单位dp

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

另外，文字尺寸使用sp，即scale-independentpixel的缩写，这样，当你在系统设置里调节字号大小时，应用中的文字也会随之变大变小。

4、dp与px的转换

在安卓中，系统密度为160dpi的中密度手机屏幕为基准屏幕，即320×480的手机屏幕。在这个屏幕中，1dp=1px。

100dp在320×480（mdpi，160dpi）中是100px。那么100dp在480×800（hdpi，240dpi）的手机上是多少px呢？我们知道100dp在两个手机上看起来差不多大，根据160与240的比例关系，我们可以知道，在480×800中，100dp实际覆盖了150px。因此，如果你为mdpi手机提供了一张100px的图片，这张图片在hdpi手机上就会拉伸至150px，但是他们都是100dp。

中密度和高密度的缩放比例似乎可以不通过160dpi和240dpi计算，而通过320px和480px也可以算出。但是按照宽度计算缩放比例不适用于超高密度xhdpi和超超高密度xxhdpi了。即720×1280中1dp是多少px呢？如果用720/320，你会得出1dp=2.25px，实际这样算出来是不对的。dp与px的换算要以系统密度为准，720×1280的系统密度为320，320×480的系统密度为160，320/160=2，那么在720×1280中，1dp=2px。同理，在1080×1920中，1dp=3px。

大家可以记住下面这个比例，dp与px的换算就十分easy啦！

ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12，我们发现，相隔数字之间还是2倍的关系。计算的时候，以mdpi为基准。比如在720×1280（xhdpi）中，1dp等于多少px呢？mdpi是4，xhdpi是8，2倍的关系，即1dp=2px。反着计算更重要，比如你用PhotoShop在720×1280的画布中制作了界面效果图，两个元素的间距是20px，那要标注多少dp呢？2倍的关系，那就是10dp！

当安卓系统字号设为“普通”时，sp与px的尺寸换算和dp与px是一样的。比如某个文字大小在720×1280的PS画布中是24px，那么告诉工程师，这个文字大小是12sp。

5、建议在xdhpi中作图（此处相关修正见后面补充，此处暂保留初始版本）

安卓手机有这么多屏幕，我到底依据哪种屏幕作图呢？没有必要为不同密度的手机都提供一套素材，大部分情况下，一套就够了。

现在手机比较高的分辨率是1080×1920，你可以选择这个尺寸作图，但是图片素材将会增大应用安装包的大小。并且尺寸越大的图片占用的内存也就越高。如果你不是设计ROM，而是做一款应用，我建议大家用PS在720×1280的画布中作图。这个尺寸兼顾了美观性、经济性和计算的简单。美观性是指，以这个尺寸做出来的应用，在720×1280中显示完美，在1080×1920中看起来也比较清晰；经济性是指，这个分辨率下导出的图片尺寸适中，内存消耗不会过高，并且图片文件大小适中，安装包也不会过大；计算的简单，就是1dp=2px啊，多好计算啊！

做出来的图片，记着让界面工程师放进drawable-xhdpi的资源文件夹中。

6、屏幕的宽高差异

在720×1280中作图，要考虑向下兼容不同的屏幕。通过计算我们可以知道，320×480和480×800的屏幕宽度都是320dp，而720×1280和1080×1920的屏幕宽度都是360dp。它们之间有40dp的差距，这40dp在设计中影响还是很大的。如下图蝴蝶图片距离屏幕的左右边距在320dp宽的屏幕和360dp宽的屏幕中就不一样。

不仅宽度上有差异，高度上的差异更加明显。对于天气等工具类应用，由于界面一般是独占式的，更要考虑屏幕之间的比例差异。

如果想消除这些比例差异，可以通过添加布局文件来实现。一般情况下，布局文件放在layout文件夹中，如果要单独对360dp的屏幕进行调整，你可以单做做一个布局文件放在layout-w360dp中；不过，最好是默认针对360dp的屏幕布局（较为主流），然后对320dp的屏幕单独布局，将布局文件放到layout-w320dp中；如果你想对某个特殊的分辨率进行调整，那么你可以将布局文件放在标有分辨率的文件夹中，如layout-854×480。

7、几个资源的文件夹

在720×1280中做了图片，要让开发人员放到drawable-xhdpi的资源文件夹中，这样才可以显示正确。个人认为仅提供一套素材就可以了，可以测试一下应用在低端手机上运行是否流畅，如果比较卡顿，可以根据需要提供部分mdpi的图片素材，因为xhdpi中的图片运行在mdpi的手机上会比较占内存。

以应用图标为例，xhdpi中的图标大小是96px，如果要单独给mdpi提供图标，那么这个图标大小是48px，放到drawable-mdpi的资源文件夹中。各个资源文件夹中的图片尺寸同样符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。

如果你把一个高2px的分割线素材做成了9.png图片，你想让细线在不同密度中都是2px，而不被安卓根据密度进行缩放，怎么办？你可以把这个分割线素材放到drawable-nodpi中，这个资源文件夹中的图片，将按照实际像素大小进行显示，而不会被安卓根据密度进行缩放。即在mdpi中细线是2px（2dp），在xhdpi中细线是2px（1dp）。

以上是对安卓屏幕的初步总结，不知道你看完后是豁然开朗，还是一头雾水？这篇文章主要为了实用起见，避开了过多深入的分析，如果你还有什么疑问，可以留言。

----------------------------------------------------------

最后补充一下，不少朋友问我安卓平板的设计，提到最多的是1280×800的分辨率，这个分辨率的平板一般是10.1寸的中密度屏幕，直接在PS中建立1280×800的画布，提取之后的素材让开发放到drawable-mdpi中即可。并且中密度的平板中，1dp=1px，比较好换算单位。

----------------------------------------------------------

【2016年2月19日补充】感谢大家对这篇文章的肯定，时间飞逝，这篇文章的理论成型于三年前，发表于两年前，这几年手机硬件的发展十分迅速，屏幕分辨率1080×1920已是标配，2560x1440的2K屏也是屡见不鲜。伴随着硬件的发展，上述相关理论也应当做一些修正，在720×1080的画布中作图貌似已经不合时宜了。

大家完全可以在1080×1920（xxhdpi）分辨率的画布中作图，主要的图片素材从1080×1920的画布中提取并让程序员放置在drawable-xxhdpi中；对于小图标等线条较为精细的图片，可以制作和提取两套不同尺寸的图标，一套按照xxhdpi来做，一套按照xhdpi来做。

在1080×1920（xxhdpi）这个分辨率中，dp和px的关系为：1dp=3px，这个也比较好计算。大家作图的时候，元素尺寸以及各种间隙最好选择3的倍数，以便于转换为dp。

/*==================================================================*/

术语和概念

屏幕尺寸

按屏幕对角测量的实际物理尺寸。

为简便起见，Android 将所有实际屏幕尺寸分组为四种通用尺寸：小、正常、大和超大。

屏幕密度

屏幕物理区域中的像素量；通常称为 dpi（每英寸点数）。例如，与“正常”或“高”密度屏幕相比，“低”密度屏幕在给定物理区域的像素较少。

为简便起见，Android 将所有屏幕密度分组为六种通用密度：低、中、高、超高、超超高和超超超高。

方向

从用户视角看屏幕的方向，即横屏还是竖屏，分别表示屏幕的纵横比是宽还是高。请注意，不仅不同的设备默认以不同的方向操作，而且方向在运行时可随着用户旋转设备而改变。

分辨率

屏幕上物理像素的总数。添加对多种屏幕的支持时，应用不会直接使用分辨率；而只应关注通用尺寸和密度组指定的屏幕尺寸及密度。

密度无关像素 (dp)

在定义 UI 布局时应使用的虚拟像素单位，用于以密度无关方式表示布局维度或位置。

密度无关像素等于 160 dpi 屏幕上的一个物理像素，这是系统为“中”密度屏幕假设的基线密度。在运行时，系统根据使用中屏幕的实际密度按需要以透明方式处理 dp 单位的任何缩放。dp 单位转换为屏幕像素很简单： px = dp * (dpi / 160) 。例如，在 240 dpi 屏幕上，1 dp 等于 1.5 物理像素。在定义应用的 UI 时应始终使用 dp 单位，以确保在不同密度的屏幕上正常显示 UI。

谷歌官方文档链接点击打开链接

美工切图是根据指定的屏幕分辨率，例如 720 * 1280 ,她只考虑屏幕宽有 720 个像素，高有 1280 个像素，然后依据宽高像素，切图；

根据图片宽度/屏幕宽度，得到图片宽度所占比例，根据这个比例来做适配（这个比例也可以用图片高度/屏幕高度得到，因为原始图片的宽高比是固定的，只要得到目标屏幕上图片应该显示的宽，就能得到此时图片的高要求是多少）；

由此，可以得到一种适配方案，针对各种屏幕分辨率保持图片分辨率占屏幕分辨率的比例不变就能达到要求。

假如在以 1080*1920 屏幕分辨率切图，图片宽高也是 1080*1920 ; 现在要求适配 720*1280 屏幕分辨率；

图片宽高比 = 1080/1920;

在1080*1920屏幕分辨率上，图片宽/屏幕宽 = 1080/1080 = 1，占比100%;

显然适配720*1280 屏幕分辨率，要求图片宽 720 pixels, 依据图片宽高比得到要求图片的高度是 1080/1920 = 720/h , h = 1280 。

假如说主流手机厂商在 google标准的 720 * 1280 定制为 720*1200 或 720*1400，那么适配就会出现问题，前者出现高度展示不全，后者出现图片无法填充屏幕。

所以尴尬的问题来了，对于定制屏幕怎么适配呢？

so,方案来了：

场景一：必须完整的展示切图，一个像素都不能少，

妥协方案1：牺牲图片原始宽高比，已达到展示图片完整信息

妥协方案2：牺牲部分图片（按照当前屏幕分辨率宽高比对图片进行截取得到一张新的图片，已达到图片不变形），保证图片不变形（但是新图片的宽高比和原始图片的宽高比是不一样的）

超高要求方案：既要保证图片不变形，也要保证图片在屏幕中的占比，只能针对要求的分辨率重新切图了。

妥协方案2：如何实现呢？

图片适配

方案1

ImageView有一个属性叫

 android:adjustViewBounds="true"

可以实现图片自适应缩放展示

前2张图是原图大小

最后一张图设置了自适应属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--原图-->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="30dp"
        android:background="#6000"
        android:src="@drawable/sp" />

    <!--原图，不过imageView的宽度匹配父窗体-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:background="#6000"
        android:scaleType="fitStart"
        android:src="@drawable/sp" />

    <!--ImageView的宽度匹配父窗体，图片自适应缩放-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="#6000"
        android:src="@drawable/sp" />
</LinearLayout>

=============================================================================

android是如何读取屏幕分辨率的呢？

Android可以读取设备的真是分辨率。

benjamin gao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
屏幕适配入门-了解基本概念-图片适配

google官方https://developer.android.google.cn/guide/practices/screens_support.html大神的文章http://www.zcool.com.cn/article/ZNjI3NDQ=.html
复制链接

扫一扫