美文网首页
屏幕适配总结

屏幕适配总结

作者: 梦止惰 | 来源:发表于2018-07-03 15:44 被阅读199次

    前言

    屏幕适配网上有很多解决方案,下面我罗列一部分:
    *Google的官方权威适配文档

    一、屏幕尺寸,屏幕分辨率,屏幕像素密度

    1.屏幕尺寸

    • 屏幕尺寸:就是手机对角线的物理长度
    • 单位:英寸 1英寸=2.5cm
      用图来表示说明


      image.png

    2.屏幕分辨率

    • 含义:手机在横向、纵向上的像素点数总和
      如图,1920*1080就是屏幕的分辨率


      image.png

    3.像素密度

    • 含义:每英寸的像素点数
      单位:dpi


      image.png

    4.他们三者之间的关系

    对角线长度=(屏幕的宽^2 + 屏幕的高^2)的开方
    dpi=对角线/屏幕尺寸
    density=dpi/160dpi
    px= dp x density=dp x (dpi /160)
    dip和dp是一个意思,即密度无关像素,规定以160dpi为基准,1dip=1px

    5.mdpi hdpi xhdpi xxhdpi xxxhdpi的区分

    名称 像素密度范围 dp转px 图标尺寸 对应的屏幕分辨率
    mdpi 120*160dpi 1dp=1px 48*48px 320x480
    hdpi 160*240dpi 1dp=1.5px 72*72px 480x800
    xhdpi 240*320dpi 1dp=2px 96*96px 720x1280
    xxhdpi 320*480dpi 1dp=3px 144*144px 1080x1920
    xxxhdpi 480*640dpi 1dp=4px 192*192px 3840*2160

    二、屏幕适配

    1、使用wrap_content,match_parent,weight进行适配

    2、.9图进行适配

    3、限定符适配

    3.1、平板适配

    顺带说一下平板适配,虽然大多数app都不会做平板适配(我们公司也一样)但是可以了解一下
    我们在做屏幕的适配时在屏幕 尺寸相差不大的情况下,dp可以使不同分辨率的设备上展示效果相似。但是在屏幕尺寸相差比较大的情况下(平板),dp就失去了这种效果。所以需要以下的限定符来约束,采用多套布局,数值等方式来适配。
    限定符就是android在进行资源加载的时候会按照屏幕的相关信息对文件夹对应的名字进行识别,而这些特殊名字就是我们的限定符

    限定符分类:
    屏幕尺寸
    small 小屏幕
    normal 基准屏幕
    large 大屏幕
    xlarge 超大屏幕
    屏幕密度
    ldpi <=120dpi
    mdpi <= 160dpi
    hdpi <= 240dpi
    xhdpi <= 320dpi
    xxhdpi <= 480dpi
    xxhdpi <= 640dpi(只用来存放icon)
    nodpi 与屏幕密度无关的资源.系统不会针对屏幕密度对其中资源进行压缩或者拉伸
    tvdpi 介于mdpi与hdpi之间,特定针对213dpi,专门为电视准备的,手机应用开发不需要关心这个密度值.
    屏幕方向
    land 横向
    port 纵向
    屏幕宽高比
    long 比标准屏幕宽高比明显的高或者宽的这样屏幕
    notlong 和标准屏幕配置一样的屏幕宽高比

    3.1.1 使用尺寸限定符:

    适用于android3.2之前,Google推出了最小宽度限定符

    当我们要在大屏幕上显示不同的布局,就要使用large限定符。例如,在宽的屏幕左边显示列表右边显示列表项的详细信息,在一般宽度的屏幕只显示列表,不显示列表项的详细信息,我们就可以使用large限定符。
    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="match_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="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <!-- 列表 -->
    <fragment android:id="@+id/headlines"
              android:layout_height="match_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="400dp"
              android:layout_marginRight="10dp"/>
    <!-- 列表项的详细信息 -->
    <fragment android:id="@+id/article"
              android:layout_height="match_parent"
              android:name="com.example.android.newsreader.ArticleFragment"
              android:layout_width="match_parent" />
    </LinearLayout>
    

    如果这个程序运行在屏幕尺寸大于7inch的设备上,系统就会加载res/layout-large/main.xml 而不是res/layout/main.xml,在小于7inch的设备上就会加载res/layout/main.xml。

    3.1.2 最小宽度限定符:

    最小宽度限定符的使用和large基本一致,只是使用了具体的宽度限定。
    res/layout/main.xml,单面板(默认)布局:同上
    res/layout-sw600dp/main.xml,双面板布局: Small Width 最小宽度 同上
    这种方式是不区分屏幕方向的。所以如果要适配android全部的版本,就要使用large限定符和sw600dp文件同时存在于项目res目录下。

    1.使用布局别名加载

    res/layout/main.xml: 单面板布局
    res/layout-large/main.xml: 多面板布局
    res/layout-sw600dp/main.xml: 多面板布局
    代替上面的限定符布局,改为
    res/layout/main.xml 单面板布局
    res/layout/main_twopanes.xml 双面板布局
    然后在res下建立
    res/values/layout.xml、
    res/values-large/layout.xml、
    res/values-sw600dp/layout.xml三个文件。
    例:

    <resources>
        <item name="main" type="layout">@layout/main</item>
    </resources>
    
    2.使用屏幕方向限定符

    如果我们要求给横屏、竖屏显示的布局不一样。就可以使用屏幕方向限定符来实现。
    例如,要在平板上实现横竖屏显示不用的布局,可以用以下方式实现。
    res/values-sw600dp-land/layouts.xml:横屏
    res/values-sw600dp-port/layouts.xml:竖屏

    4.手机屏幕适配

    4.1、限定符的使用

    这里推荐一个Android插件 ScreenMatch
    插件应用步骤:
    第一步安装插件不用说吧
    第二步:右键点击app出现下图

    image.png
    点击screenMatch,点击ok出现以下图
    image.png
    点击ok,会生成三个文件
    image.png image.png

    若values没有dimens,在values下面新建dimens,将screenMatch_example_dimens中的所有dimens 拷贝到dimens中,再次右击项目,点击screenMatch,就会生成我们需要的dimens文件了


    image.png

    这里可能大家有个疑问为啥用360dp为基准呢,因为这里采用的最小宽度限定符sw360
    sw360dp 的平板屏幕分辨率为1920*1080 尺寸:5-6 dpi 440左右,我们换算成手机的分辨率:
    440/160 *360=990<1080 所以可以适配大部分机型,相当于xxhdpi的尺寸

    4.2 对于自定义view,我们怎么适配呢

    这里实际上我们定义一个屏幕分辨率的标准,然后传入实际屏幕的宽高,算出他们的宽高分别的scale就可以啦

    public class UIUtils {
    
        private Context context;
    
        private static UIUtils utils ;
    
        public static UIUtils getInstance(Context context){
            if(utils == null){
                utils = new UIUtils(context);
            }
            return utils;
        }
    
    
        //参照宽高
        public final float STANDARD_WIDTH = 720;
        public final float STANDARD_HEIGHT = 1232;
    
        //当前设备实际宽高
        public float displayMetricsWidth ;
        public float displayMetricsHeight ;
    
        private  final String DIMEN_CLASS = "com.android.internal.R$dimen";
    
    
        private UIUtils(Context context){
            this.context = context;
            //
            WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    
            //加载当前界面信息
            DisplayMetrics displayMetrics = new DisplayMetrics();
            windowManager.getDefaultDisplay().getMetrics(displayMetrics);
    
            if(displayMetricsWidth == 0.0f || displayMetricsHeight == 0.0f){
                //获取状态框信息
                int systemBarHeight = getValue(context,"system_bar_height",48);
               //这里要减去状态栏的宽高
                if(displayMetrics.widthPixels > displayMetrics.heightPixels){//横屏
                    this.displayMetricsWidth = displayMetrics.heightPixels;
                    this.displayMetricsHeight = displayMetrics.widthPixels - systemBarHeight;
                }else{//竖屏
                    this.displayMetricsWidth = displayMetrics.widthPixels;
                    this.displayMetricsHeight = displayMetrics.heightPixels - systemBarHeight;
                }
    
            }
        }
    
        //对外提供系数
        public float getHorizontalScaleValue(){
            return displayMetricsWidth / STANDARD_WIDTH;
        }
    
        public float getVerticalScaleValue(){
    
            Log.i("testbarry","displayMetricsHeight:"+displayMetricsHeight);
            return displayMetricsHeight / STANDARD_HEIGHT;
        }
    
    
    
        public int getValue(Context context,String systemid,int defValue) {
    
            try {
                Class<?> clazz = Class.forName(DIMEN_CLASS);
                Object r = clazz.newInstance();
                Field field = clazz.getField(systemid);
                int x = (int) field.get(r);
                return context.getResources().getDimensionPixelOffset(x);
    
            } catch (Exception e) {
               return defValue;
            }
        }
    }
    
    

    在外边调用:

     float scaleX =  UIUtils.getInstance(this.getContext()).getHorizontalScaleValue();
     float scaleY =  UIUtils.getInstance(this.getContext()).getVerticalScaleValue();
      LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();
     layoutParams.width = (int) (layoutParams.width * scaleX);
    layoutParams.height = (int) (layoutParams.height * scaleY);
    

    5.全面屏适配

    在manifest下面的activity节点加入以下代码就好了

        <!-- 全面屏适配 -->
                <meta-data android:name="android.max_aspect"
                    android:value="2.1"/>
    

    6.刘海屏

    不同的厂商有不同的适配规则,去他们的开方平台查看官方文档即可

    内容引用的文章:https://www.jianshu.com/p/bb80ad6f25e5
    https://www.jianshu.com/p/ec5a1a30694b

    相关文章

      网友评论

          本文标题:屏幕适配总结

          本文链接:https://www.haomeiwen.com/subject/vvbduftx.html