【Android 屏幕适配】屏幕适配通用解决方案 ④ ( 自定义组件解决方案 | 计算设计稿与实际布局的比例系数 )

举报
韩曙亮 发表于 2022/08/20 00:27:49 2022/08/20
【摘要】 文章目录 一、计算素材宽高与屏幕布局宽高比例系数 参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持 在博客 【Android 屏幕适配】屏幕适配通用解...


参考文档 :


在博客 【Android 屏幕适配】屏幕适配通用解决方案 ② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 ) 中 , 提出 如果要实现将 宽高为 720 x 1232 的设计稿 , 对应 手机屏幕中除 状态栏之外的 布局 , 需要完成如下操作 :


首先 ,获取到实际的设备屏幕数据 , 如 手机屏幕实际宽高 , 屏幕像素密度 DPI 等数据 ;

然后 , 计算实际设备的宽高 , 扣掉状态栏的高度 , 不同手机设备状态栏高度不同 , 然后再进行后续计算 ;

再后 , 给出一个 设计稿屏幕实际有效像素值换算比例 ;

最后 , 根据给出的比例 , 在 自定义组件的 onMeasure 方法 中 , 进 行动态换算 , 计算出在当前设备中每个组件的 实际坐标数据 ;


在博客 【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 ) 中 , 完成了前两项工作 , 已经获取了实际的屏幕数据 , 状态栏高度 ;

本篇博客中完成第三项工作 , 计算设计稿与实际布局的比例系数 ;





一、计算素材宽高与屏幕布局宽高比例系数



美工给的素材宽高为 720 × 1280 720 \times 1280 720×1280 , 去除 48 48 48 像素的状态栏高度后 , 还剩下 720 × 1232 720 \times 1232 720×1232 分辨率 ;

    /**
     * 屏幕适配参考宽度 / 设计稿宽度
     */
    public final float REFERENCE_WIDTH = 720;
    /**
     * 屏幕适配参考高度 / 设计稿高度
     * 这里注意标准高度是 1280, 去掉了状态栏后为 1232
     */
    public final float REFERENCE_HEIGHT = 1232;

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

通过 , 可以得到屏幕中布局的宽高 , 直接记录在成员变量中 ;

【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 ) 二、获取设备屏幕数据 博客章节完成了对应数据 .

    /**
     * 设备布局实际宽度
     */
    public float screenWidth;
    /**
     * 设备布局实际高度
     */
    public float screenHeight;

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

设计稿坐标数据 转为 屏幕真实坐标数据 比例系数公式 :

设计稿宽度 屏幕布局宽度 = 设计稿组件宽度 布局组件宽度    公式① \cfrac{设计稿宽度}{屏幕布局宽度} = \cfrac{设计稿组件宽度}{布局组件宽度} \ \ \ 公式① 屏幕布局宽度设计稿宽度=布局组件宽度设计稿组件宽度   公式

设计稿高度 屏幕布局高度 = 设计稿组件高度 布局组件高度     公式② \cfrac{设计稿高度}{屏幕布局高度} = \cfrac{设计稿组件高度}{布局组件高度}\ \ \ \ 公式② 屏幕布局高度设计稿高度=布局组件高度设计稿组件高度    公式

上述公式中 , 布局组件宽度布局组件高度 , 就是我们在自定义组件计算出的内容 ;

设计稿宽度 就是 REFERENCE_WIDTH 成员变量 ;

    /**
     * 屏幕适配参考宽度 / 设计稿宽度
     */
    public final float REFERENCE_WIDTH = 720;

  
 
  • 1
  • 2
  • 3
  • 4

设计稿高度 就是 REFERENCE_HEIGHT 成员变量 ;

    /**
     * 屏幕适配参考高度 / 设计稿高度
     * 这里注意标准高度是 1280, 去掉了状态栏后为 1232
     */
    public final float REFERENCE_HEIGHT = 1232;

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

屏幕布局宽度 , 在 【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 ) 二、获取设备屏幕数据 博客章节完成了对应数据的计算 , 就是 screenWidth 成员变量 ;

    /**
     * 设备布局实际宽度
     */
    public float screenWidth;

  
 
  • 1
  • 2
  • 3
  • 4

屏幕布局高度 , 在 【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 ) 二、获取设备屏幕数据 博客章节完成了对应数据的计算 , 就是 screenHeight 成员变量 ;

    /**
     * 设备布局实际高度
     */
    public float screenHeight;

  
 
  • 1
  • 2
  • 3
  • 4

布局组件宽度 公式如下 : 根据上面的 公式① 可以推导出如下公式 ;

布局组件宽度 = 设计稿组件宽度 × 屏幕布局宽度 设计稿宽度 布局组件宽度 = 设计稿组件宽度 \times \cfrac{屏幕布局宽度}{设计稿宽度} 布局组件宽度=设计稿组件宽度×设计稿宽度屏幕布局宽度

其中的 屏幕布局宽度 设计稿宽度 \cfrac{屏幕布局宽度}{设计稿宽度} 设计稿宽度屏幕布局宽度 就是宽度的设计稿与实际布局的比例系数 ;


布局组件高度 公式如下 : 根据上面的 公式② 可以推导出如下公式 ;

布局组件高度 = 设计稿组件高度 × 屏幕布局高度 设计稿高度 布局组件高度 = 设计稿组件高度 \times \cfrac{屏幕布局高度}{设计稿高度} 布局组件高度=设计稿组件高度×设计稿高度屏幕布局高度

其中的 屏幕布局高度 设计稿高度 \cfrac{屏幕布局高度}{设计稿高度} 设计稿高度屏幕布局高度 就是高度的设计稿与实际布局的比例系数 ;


则有如下代码 , 分别用于计算 设计稿坐标数据 转为 屏幕真实坐标数据 比例系数公式 :

    /**
     * 获取设备实际宽度与参考宽度的比值
     * @return
     */
    public float getWidthScaleValue(){
        return screenWidth / REFERENCE_WIDTH;
    }

    /**
     * 获取沙设备实际高度与参考高度的比值
     * @return
     */
    public float getHeightScaleValue(){
        return screenHeight / REFERENCE_HEIGHT;
    }

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

文章来源: hanshuliang.blog.csdn.net,作者:韩曙亮,版权归原作者所有,如需转载,请联系作者。

原文链接:hanshuliang.blog.csdn.net/article/details/126423565

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。