Android技能树 — 屏幕适配小结

前言:

Android技能树系列:

Android基础知识

Android技能树 — 动画小结

Android技能树 — View小结

Android技能树 — Activity小结

Android技能树 — View事件体系小结

Android技能树 — Android存储路径及IO操作小结

Android技能树 — 多进程相关小结

Android技能树 — Drawable小结

Android技能树 — 屏幕适配小结

数据结构基础知识

Android技能树 — 数组,链表,散列表基础小结

Android技能树 — 树基础知识小结(一)

算法基础知识

Android技能树 — 排序算法基础小结

Rx系列相关

Android技能树 — RxPermission分析

Android技能树 — Rxjava取消订阅小结(1):自带方式

Android技能树 — Rxjava取消订阅小结(2):RxLifeCycle

关于屏幕适配,几乎每隔一段时间就会看见有人发出来说XXX方案,实现超级简单的适配方式等等。所以我把我目前了解过的常用的适配方案做个总结,并简单说说原理,从而让大家也初步了解各个方案的实现。(其实很多人都是看见别人写的适配方案,虽然可能实际在使用了,但是却从来没有去了解过这个方案的原理,而且遇到一些简单的坑的时候,因为不知道原理,也无法自己解决。)

常见适配方案:

  1. 生成分辨率values文件夹
  2. 生成values -sw 文件夹
  3. 谷歌百分比布局库
  4. AutoLayout
  5. 动态更改density

1. 基础知识

其实本来不想写这块,因为基本大家都懂什么dp, dpi ,px , inch ,density等,但是后面的一些适配都会涉及到这些原理,外加有时候面试别人,都是感觉知道这个知识点,但并不是真正的了解,所以我这边还是重新提一下,我会用通俗易懂的例子来让大家更好的理解
(PS: 当然想不看的可以直接跳过。)

这边直接放一个脑图讲下基本的基础知识:

1.1 px

我们可以看到现在市面上的手机分辨率截止到2018-05月,统计为:


这里额外提一下,类似1080 x 1812,720 x 1184 等看着很奇怪的结尾不是0的分辨率,大部分是因为有虚拟键的原因,虚拟键占去了一部分高度。

以1080 X 1920为例,它代表的是手机上的像素点,



类似这种,表示横着有1080个像素点,竖着有1920个像素点,所以1080 X 1920 代表了手机在横向、纵向上的像素点数总和

所以如果我们写了一个Button,假设高度和宽度都为10px , 则说明在这个屏幕点上高宽都占了10个点。

1.2 inch(屏幕尺寸)

手机屏幕的物理尺寸,我们经常听到有人说我买的是iPhone 8 plus,尺寸是5.5的屏幕,iPhone 8尺寸是 4.7的。其实它们所带的单位都是inch(英寸), 1(inch)≈2.54(cm)

百度搜到的图

所以屏幕尺寸就是按屏幕对角测量的实际物理尺寸。
为简便起见,Android 将所有实际屏幕尺寸分组为四种通用尺寸:小、 正常、大和超大。

1.3 dpi

屏幕物理区域中的像素量;通常称为 dpi(Dots Per Inch 每英寸 点数)。所以看标题就知道,他更像是在求一个密度。那我们既然知道了手机屏幕对角线的尺寸,我们只要知道了手机对角线上的px数量,除一下就知道了每英寸上的像素点数了。

所以我们只需要通过勾股定理获取对角线上的像素值,再除以屏幕尺寸值就可以了。


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

六种通用的密度:

  • ldpi(低)~120dpi
  • mdpi(中)~160dpi
  • hdpi(高)~240dpi
  • xhdpi(超高)~320dpi
  • xxhdpi(超超高)~480dpi
  • xxxhdpi(超超超高)~640dpi

1.4 dp 和 density

其实dp 本来是叫dip (Density Independent Pixels),所有有时候面试的别人,面试者会弄错,把dip当做了dpi,所以你问他请说下 dp 和 dip ,他会把 dip说能dpi的内容。

我们举例说下这块知识点:
要画一个 高和宽各为屏幕的一般的按钮,我们假设有二块屏幕,一块是100 X 100 ,一块是 200 X 200 ,那这时候第一块的屏幕上我们写Button 应该为:

<Button 
     layout_height = "50px"
     layout_width = "50px"/>

第二个屏幕的Button应该为:

<Button 
     layout_height = "100px"
     layout_width = "100px"/>

这样是不是都各自占了屏幕的高宽的一半,但是假如有第三个屏幕 300 X 300 呢,难不成再写一个Button的高宽值? 所以我们可以用一种单位来代替,但是这种单位可以在不同的屏幕环境下,值是不同的。比如我们就把这个单位当做“haha”。

比如我们现在都这么写:

<Button 
     layout_height = "50haha"
     layout_width = "50haha"/>

这时候在100 x 100的时候, 50haha = 50px ,在200 X 200 屏幕的时候 , 50 haha = 100px , 在 300 X 300 屏幕的时候,50haha 等150px。

这个感觉就很像你跟别人说我欠你50 money,如果在中国,代表你欠别人50元人民币,但是如果在美国,你这么说,指你欠50美元,也就是欠了三百多元人民币。(这个例子不要跟我较真,我就意思意思而已)

所以dp就是类似我们上面自己定义的haha这个单位。

比如50dp = 50px ,这时候1dp = 1px , 50dp = 100px的时候 是 1dp = 2px ,所以我们可以看到倍数分别为 1 和 2 ,我们用density来代表这个倍数。也就是说: dp * density = px,这时候就是 50 dp * 1 = 50px , 50dp * 2 = 100px

(就像是我说我欠你50 money,在中国,这个density就是1 , 也就是欠你50元人民币,在美国可能就是指300多人民币,这个density也就是 美元换算成人民币的倍数)

那么这个density具体是怎么来的呢?其实很简单,记不记得我们前面说过dpi ,也就是屏幕的密度,我们就用这个密度来做比较,比如我们 把160dpi 作为标准,那另外一个手机是320dpi ,那么这个density就是 (320/160 = 2)。
所以我们再次把公式 : dp * density = px 转变为: dp * (dpi / 160) = px

那么为什么用160dpi作为标准呢,以前看到文章提过:mdpi基于第一款 Android 设备 ″T-Mobile G1″ 的屏幕配置(缩放系数scale=1)。

1.5 基础知识小结

所以假如我们现在的手机分辨率知道了,手机屏幕尺寸也知道了。我们通过公式求出 dpi ,然后 dpi / 160 就是当前手机的density,然后我们就知道我写了1dp 在这台手机上具体是多少px了。

具体的安卓手机尺寸四个分类及6中dpi分类:


我们的某台手机的dpi,density,分辨率等如何获取呢,:

DisplayMetrics mDisplayMetrics = getResources().getDisplayMetrics();    
//横向分辨率
int width = mDisplayMetrics.widthPixels;  
//竖向分辨率
int height = mDisplayMetrics.heightPixels;  
//density值
float density = mDisplayMetrics.density;  
//dpi的值就等于density * 160
float dpi = density * 160;

也许有人说,那我们使用dp不是已经完美的实现了各种兼容性吗,就像我们上面提到过的,100 X 100 ,200X200 , 300 X 300的屏幕,我们都只要写50haha, 就分别代表了50,100,150,不是就占了各自屏幕的一半了么。理论上的确是这样,但是我们刚提过我们的density是等于 (dpi / 160),而dpi又由分辨率和屏幕尺寸同时决定,安卓手机的碎片化太过严重,所以很多手机虽然分辨率不同及屏幕尺寸不同,造成最后的dpi一样,所以最后的density也一样,就造成了适配实现不全。假设我们多了一个400X400 的设备,因为它的屏幕尺寸也同时变大了很多,所以最终的density和300X300一样,那这时候我们写了50haha,也就代表了150px,这时候明显在400X400上面并没有显示为一半,甚至当这个400X400的设置的屏幕尺寸超级大,反而可能算下来的density与100X100的一样,那这时候50haha可能就只有50px,则显示差距就更大了。
(其实主要原因就是dpi不是单独由分辨率来决定,同时还有屏幕尺寸影响,所以二个变量同时作用,造成不同分辨率的手机最后的density也可能相同。这样dp转换成的px也就相同了,但是手机的分辨率本身有不同,这时候就会出现适配不对。)

2 各类适配方案

2.1 生成分辨率values文件夹

因为我们上面提过 , px = (dpi / 160) * dp, 但是dpi又是同时由分辨率和屏幕尺寸同时决定,造成了不同的分辨率,dpi可能一样,这样最终得到的px一样,比如都是占屏幕的一半,300X300得到的可能是150,但是400X 400得到的也是150,这时候就不对了。

那我们就想到了。我们能不能不是同时受到分辨率和屏幕尺寸决定,而是只受一个因素来影响,这样就是真正的按比例来了。比如300X300是150,400X400是200,500X500是250,是只受分辨率的影响,所以分辨率大的,最终得到的结果一定就大。所以我们就不能使用dp了。而是一个新的单位,而这个单位是根据不同的分辨率,得到不同的值,那怎么计算呢,就是穷举法,比如刚才的300X300,我们规定1 haha等于1 px,然后再600 X 600里面,1 haha 等2 px , 1200X1200里面是 1 haha 等于 3 px 。所以我们在不同分辨率下的values文件夹下写上不同的值:

300X300下
<dimens name = "1haha"> 1px </dimens>
600X600下
<dimens name = "1haha"> 2px </dimens>
1200X1200下
<dimens name = "1haha"> 3px </dimens>

所以这个就是方案1 ,附上文章链接。

Android 屏幕适配方案
我们可以看下面的图:

我们可以看到列举了所有可能的屏幕分辨率的values,然后手动按照倍数,进行相应的赋值。当然这些文件不可能手写,通过Java自动生成相应的文件:


这样最终影响结果的就只是分辨率的了,分辨率越大的,x1的值越大。

但是这个方案有一个致命的缺陷,那就是需要精准命中才能适配,比如1920x1080的手机就一定要找到1920x1080的限定符,否则就只能用统一的默认的dimens文件了。而使用默认的尺寸的话,UI就很可能变形,简单说,就是容错机制很差。


2.2 生成values -sw 文件夹

可以参考:Android 目前最稳定和高效的UI适配方案

骚年你的屏幕适配方式该升级了!-smallestWidth 限定符适配方案

其实这个方式跟上面的2.1方法原理可以说一模一样。唯一的区别就是使用了sw来保证一定的容错性。


我们看到其实就是把上面具体的分辨率values改成了values - sw而已。


2.3 百分比布局库

Android 百分比布局库(percent-support-lib) 解析与扩展
Android 增强版百分比布局库 为了适配而扩展

其实这个也是很简单的,字面意思,我写了这个Button宽度为父布局的百分之50,则在不同手机上,都是占据了百分之50。使用过过百分比布局的人都应该知道,我们写的时候是这么写的:

<android.support.percent. PercentRelativeLayout
    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">

    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:gravity="center"
        />

</PercentRelativeLayout >

其实原理很简单,就是动态计算实际的百分之50在不同机器的时候到底占了多少px,2.1,2.2则是等于提前帮我们计算好了具体的px,然后写在了文件里面,然后我们去读数据。

那它的实现原理是什么呢?简单来说就是二步:

  1. 获取用户到底填了多少的百分比数值
  2. 获取父布局的空间,然后乘以用户填的百分比数值,或者一个新数值,然后赋值给该控件。

我们一步步来看源码:

2.3.1 获取用户到底填了多少的百分比数值:

我们知道我们的百分比布局中的核心属性是子控件填写:

app:layout_heightPercent="20%"
app:layout_widthPercent="30%"

所以我们需要在PercentRelativeLayout中遍历它下面的子控件,然后分别获取每个子控件的百分比数值。
其实很简单,写过自定义View的人应该都知道,因为这个其实就是自定义属性而已。

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PercentLayout_Layout);
float value = array.getFraction(R.styleable.PercentLayout_Layout_layout_widthPercent, 1, 1,-1f);

2.3.2 获取计算后的值并且赋值:

因为要动态获取父控件的控件,同时把新的值赋值给子控件,所以该行为在onMeasure方法中执行。

//传入的ViewGroup.LayoutParams params是遍历的每个子View的LayoutParams
public void fillLayoutParams(ViewGroup.LayoutParams params, int widthHint,
                int heightHint) {
            // Preserve the original layout params, so we can restore them after the measure step.
            mPreservedParams.width = params.width;
            mPreservedParams.height = params.height;

            if (widthPercent >= 0) {
                params.width = (int) (widthHint * widthPercent);
            }
            if (heightPercent >= 0) {
                params.height = (int) (heightHint * heightPercent);
            }
            if (Log.isLoggable(TAG, Log.DEBUG)) {
                Log.d(TAG, "after fillLayoutParams: (" + params.width + ", " + params.height + ")");
            }
}

当然具体源码会更多,我不会大篇幅完整讲流程,更多的是讲解思路。


2.4 AutoLayout

Android AutoLayout全新的适配方式 堪称适配终结者

使用方式很简单:

  1. 注册设计图尺寸

autolayout引入

dependencies {
    compile project(':autolayout')
}

在你的项目的AndroidManifest中注明你的设计稿的尺寸。

<meta-data android:name="design_width" android:value="768"></meta-data>
<meta-data android:name="design_height" android:value="1280"></meta-data>
  1. Activity中开启设配
    让你的Activity去继承AutoLayoutActivity

我们想到的原理,肯定也是把填在AndroidManifest.xml里面的数值读取出来,然后作为参考值。然后在不同手机上动态的计算出来数值,是不是感觉和百分比布局有点相似。

我们来看下AutoLayoutActivity源码:

public class AutoLayoutActivity extends AppCompatActivity
{
    private static final String LAYOUT_LINEARLAYOUT = "LinearLayout";
    private static final String LAYOUT_FRAMELAYOUT = "FrameLayout";
    private static final String LAYOUT_RELATIVELAYOUT = "RelativeLayout";


    @Override
    public View onCreateView(String name, Context context, AttributeSet attrs)
    {
        View view = null;
        if (name.equals(LAYOUT_FRAMELAYOUT))
        {
            view = new AutoFrameLayout(context, attrs);
        }

        if (name.equals(LAYOUT_LINEARLAYOUT))
        {
            view = new AutoLinearLayout(context, attrs);
        }

        if (name.equals(LAYOUT_RELATIVELAYOUT))
        {
            view = new AutoRelativeLayout(context, attrs);
        }

        if (view != null) return view;

        return super.onCreateView(name, context, attrs);
    }
}

我们发现把我们写在Layout.xml里面的布局控件替换成AutoXXXX等自定义控件。那我们以AutoLinearLayout来分析:其实看过百分比布局的源码,就会发现基本架构都一样,所以百分比布局的代码看得懂,再去看AutoLayout相关代码会很快。


2.5 动态更改density

一种极低成本的Android屏幕适配方式
Android屏幕适配很麻烦吗?不!太简单了。
Android 屏幕适配从未如斯简单
骚年你的屏幕适配方式该升级了!-今日头条适配方案

  1. 假如设计图是按1920px * 1080px来设计,以density为3来标注,也就是屏幕其实是640dp * 360dp。这时候如果我们的Button想要占据一半,是不是宽度需要设置成180dp。
  2. 那假如我们的手机屏幕是1280X 720,density是2 ,则宽度是360dp,的确当设置成180dp的时候也正好占据一半。
  3. 但是万一1280X 720的手机的density是3呢,则宽度为240dp, 这时候设置成180dp,实际的px值为: 180 * 3 = 540px ,但是我们想要的是360px ,也就是 180 * density = 360px , 既然我们设置成的180dp不能改变(也就是设置一个值,适配各种手机),那么我们只能改变这个density值。
  4. 换成公式就是: 180 * density = 360,那么density是多少。哈哈。没错是2 ,我们动态把density从 3变成2,是不是就符合了。
  5. 比如960X540 的手机,density是2 ,因为我们的Button宽度设置成了180dp,宽度为180 X 2 = 360px,超过了一半,我们只需要动态更改density满足 180X density = 270px即可,所以我们的density算出来是1.5。

那么density具体怎么得出来呢,很简单,我们刚才假设的是有一个按钮,占了屏幕的一半,那我们假设占了整个手机屏幕不就可以了。
设计图的宽度是360dp,而960X540的手机,只要540/360 = 1.5就可以得到,所以 density = 设备真实宽(单位px) / 360

if (orientation.equals("height")) {
        targetDensity = (appDisplayMetrics.heightPixels - barHeight) / 667f;
} else {
        targetDensity = appDisplayMetrics.widthPixels / 360f;
}

所以本方案就是动态更改density以满足设计图方案。

结语:

emm.......大家轻喷即可。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容