Android屏幕适配(5) — 最小宽度smallWidth适配

概述

最小宽度smallWidth适配实现屏幕适配方案

详细

前言

在之前的文章中,我们讲到了Android屏幕适配的一些知识,大家感兴趣的话可参考
Android屏幕适配(1) — 概念解释
Android屏幕适配(2) — drawable与mipmap
Android屏幕适配(3) — 资源文件夹命名与匹配规则
Android屏幕适配(4) — 宽高限定符
今天就让我们来学习下Android屏幕适配的最小宽度smallWidth适配相关知识吧。
今天涉及知识有:

  1. 屏幕适配原理
  2. SmallWidthDimensHelper屏幕values文件夹生成帮助类的使用
  3. 效果图和项目结构图
  4. screenMatch插件的使用

一.屏幕适配原理

1.1 最小宽度的理解

之前我们已经讲过屏幕适配的原理是: px=(实际分辨率/涉及基准分辨率)*dp,由于无法兼顾横竖两个方向,所以会采取宽,或者高的一个方向来适配。今天要讲的最小宽度smallWidth适配与之前又有所区别。最小宽度是指对手机或平板而言,最短的两条边,不一定是屏幕的宽度。(例如对平板而言,有的高度其实是小于宽度的,这是所谓的最小宽度其实是平板的高度)

1.2 values文件夹理解

利用SmallWidthDimensHelper帮助类,我们生成的values文件夹名字类似如下:

    values-sw240dp
    values-sw360dp
    values-sw400dp
    values-sw960dp
    values-sw1080dp
    ......

以我测试的手机为例,我手机信息如下:

    *************屏幕信息*************
    宽=1080 高=2032
    dpi=480  density(屏幕像素比例)=3.0
    smallwidthDensity(最小宽度)=360.0
    **********************************

可以看到我手机屏幕尺寸: 1080x2032,dpi=480,density(屏幕像素比例)=3.0,接着有一个smallwidthDensity(最小宽度)=360.0
这里我们需要注意的是,我手机屏幕尺寸: 1080x2032适配的values文件夹并不是values-sw1080dp,而是values-sw360dpvalues-swXXXdp文件夹格式,这里的XXX表示的可不是屏幕宽度尺寸,而是最小宽度Density。我们可以通过公式:

    smallwidthDensity = 屏幕最短尺寸(屏幕宽高尺寸较短的那个)/屏幕像素比例(density)

来获取一个参考值。
为什么说是一个参考值呢,因为我们的手机一般默认最小宽度我们计算的这个值,一般不会去改它,但是在手机的设置—>系统—>开发者模式/开发人员选项—>最小宽度上是显示默认最小宽度,如下图

1.3 布局向上兼容

由上面的讲解我们已经知道,为了适配屏幕,我们会生成大批量values-swXXXdp文件夹。类似如下:

    values-sw240dp
    values-sw360dp
    values-sw400dp
    values-sw960dp
    values-sw1080dp

以我测试为例,加载的是values-sw360dp文件夹,若项目中没有values-sw360dp文件夹,则会向上匹配values-sw240dp文件夹,如果values-sw240dp文件夹没有,则会再往小的匹配,如果还是没有,则会匹配默认values文件夹。

二. SmallWidthDimensHelper屏幕values文件夹生成帮助类的使用

这里我封装了一个自动生成values dimens文件夹的工具类。此类要在Android项目中新建一个Java_module,然后在Javamain方法中执行以下调用:

        public static void main(String[] args) {
            System.out.println("======我是中国人=======");
            SmallWidthDimensHelper helper = new SmallWidthDimensHelper();
            helper.setBase(1080, 1920) //设计图基准宽高
                    .setDefaultScale(1.0f) //默认缩放比
                    .createSmallWidthDimens(); //最小宽度适配
        }

以上代码的setBase(1080, 1920)设置的是设计图即UI给出的基准屏幕宽高, setDefaultScale(1.0f)设置的是默认values文件夹中dp和实际dp的比值。

三. 效果图和项目结构图

下面贴出MainActivity中布局代码:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <TextView
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="70dp"/>
        <Button
            android:id="@+id/btn_test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_text"
            android:layout_marginTop="50dp"/>
        <Button
            android:id="@+id/btn_test2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试n"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_test"
            android:layout_marginTop="50dp"/>
        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/act_one"
            android:layout_width="@dimen/dp_360"
            android:layout_height="@dimen/dp_100"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="@dimen/dp_20"
            app:layout_constraintStart_toStartOf="parent"
            android:background="#ff0000"/>
        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/act_two"
            android:layout_width="@dimen/dp_720"
            android:layout_height="@dimen/dp_0"
            android:background="#00ff00"
            app:layout_constraintBottom_toBottomOf="@+id/act_one"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/act_one" />
    </androidx.constraintlayout.widget.ConstraintLayout>

生成文件夹部分结构图如下:
 

 

image.png


随便打开一个dimens.xml文件部分代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <dimen name="dp_0">0.0dp</dimen>
    <dimen name="dp_1">0.29dp</dimen>
    <dimen name="dp_2">0.59dp</dimen>
    <dimen name="dp_3">0.88dp</dimen>
    <dimen name="dp_4">1.18dp</dimen>
    <dimen name="dp_5">1.48dp</dimen>
    <dimen name="dp_6">1.77dp</dimen>
    <dimen name="dp_7">2.07dp</dimen>
    <dimen name="dp_8">2.37dp</dimen>
    <dimen name="dp_9">2.66dp</dimen>
    <dimen name="dp_10">2.96dp</dimen>
    <dimen name="dp_11">3.25dp</dimen>
    <dimen name="dp_12">3.55dp</dimen>
    <dimen name="dp_13">3.85dp</dimen>
    <dimen name="dp_14">4.14dp</dimen>
    <dimen name="dp_15">4.44dp</dimen>
    <dimen name="dp_16">4.74dp</dimen>
    ......

注意,这里生成的值也是dp
屏幕适配部分机型效果图如下:

四. ScreenMatch插件的使用

最小宽度适配方案其实在Androidstudio中由一个插件ScreenMatch,其使用的话可参考

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/94804.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

42、基于51单片机的蓝牙智能手环系统(全套资料)

编号&#xff1a;42 基于51单片机的蓝牙智能手环系统 功能描述&#xff1a; 本设计由STC89C52单片机最小系统ADXL345三轴加速传感器模块DS1302时钟模块DS18B20温度传感器模块Pulse Sensor心率采集模块BT06蓝牙模块LCD1602显示模块键盘模块组成 1、采用STC89C52单片机为主控制…

国际旅游网络的大数据分析(数学建模练习题)

题目&#xff1a;国际旅游网络的大数据分析 伴随着大数据时代的到来,数据分析已经深入到现代社会生活中的各个方面。 无论是国家政府部门、企事业单位还是个人&#xff0c;数据分析工作都是进行决策之前的 重要环节。 山东省应用统计学会是在省民政厅注册的学术类社会组织&…

Node与Express后端架构:高性能的Web应用服务

在现代Web应用开发中&#xff0c;后端架构的性能和可扩展性至关重要。Node.js作为一个基于事件驱动、非阻塞I/O的平台&#xff0c;以及Express作为一个流行的Node.js框架&#xff0c;共同构建了高性能的Web应用服务。 在本文中&#xff0c;我们将深入探讨Node与Express后端架构…

先进API生产力工具eqable HTTP,一站式开发调试工具推荐

简介 Reqable是什么? Regable Fiddler/Charles Postman Reqable是HTTP一站式开发调试国产化解决方案&#xff0c;拥有更便捷的体验&#xff0c;更先进的协议&#xff0c;更高效的性能和更精致的界面。 Reqable是一款跨平台的专业HTTP开发和调试工具&#xff0c;在全平台支持…

opencv 车牌号的定位和识别+UI界面识别系统

目录 一、实现和完整UI视频效果展示 主界面&#xff1a; 识别结果界面&#xff1a;&#xff08;识别车牌颜色和车牌号&#xff09; 查看历史记录界面&#xff1a; 二、原理介绍&#xff1a; 车牌检测->图像灰度化->Canny边缘检测->膨胀与腐蚀 边缘检测及预处理…

关于单例模式

单例模式的目的&#xff1a; 单例模式的目的和其他的设计模式的目的都是一样的&#xff0c;都是为了降低对象之间的耦合性&#xff0c;增加代码的可复用性&#xff0c;可维护性和可扩展性。 单例模式&#xff1a; 单例模式是一种常用的设计模式&#xff0c;用简单的言语说&am…

Springboot2.0快速入门(第一章)

目录 一&#xff0c;SpringBoot简介1.1&#xff0c;回顾什么是Spring1.2&#xff0c;Spring是如何简化Java开发的1.3&#xff0c;什么是SpringBoot 二&#xff0c;Hello&#xff0c;World2.1&#xff0c;准备工作2.2&#xff0c;创建基础项目说明2.3&#xff0c;创建第一个Hell…

Gitlab设置中文

1. 打开设置 2.选择首选项Preferences 3. 下滑选择本地化选项Localization&#xff0c;设置简体中文&#xff0c;然后保存更改save changes。刷新网页即可。

【QT】ComboBox的使用(14)

ComboBox这个控件我常用于多文本的储存、调用&#xff0c;正如他的中文意思为&#xff1a;下拉列表框。 下拉列表框&#xff1a;字面意思就是一个多文本的列表框&#xff0c;今天来看下如何使用ComboBox这个控件。 一.环境配置 1.python 3.7.8 可直接进入官网下载安装&…

葡萄叶病害识别(图像连续识别和视频识别,Python代码,pyTorch框架)

葡萄叶病害识别&#xff08;图像连续识别和视频识别&#xff0c;Python代码&#xff0c;pyTorch框架&#xff09;_哔哩哔哩_bilibili 葡萄数据集 第一个文件夹为 Grape Black Measles&#xff08;葡萄黑麻疹&#xff09;病害&#xff08;3783张&#xff09; Grape Black rot葡…

iOS HealthKit 介绍

文章目录 一、简介二、权限配置1. 在开发者账号中勾选HealthKit2. 在targets的capabilities中添加HealthKit。3. infoPlist需要配置权限 三、创建健康数据管理类1. 引入头文件2. 健康数据读写权限3. 检查权限4. 读取步数数据5. 写入健康数据 四、运行获取权限页面 一、简介 He…

Java源码分析(三)ArrayList

ArrayList是我们经常用到的一个集合类&#xff0c;那么本篇我们一起学习下ArrayList的源码。 一、创建ArrayList 首先&#xff0c;我们从创建ArrayList开始。如下代码&#xff0c;创建一个空的ArrayList&#xff1a; List<String> list new ArrayList<>(); 看下…

Linux下的系统编程——系统调用(五)

前言&#xff1a; 由操作系统实现并提供给外部应用程序的编程接口。(Application Programming Interface,API)。系统调用就是应用程序同系统之间数据交互的桥梁。 一、open/close函数 1.open函数&#xff1a; &#xff08;1&#xff09;int open(char *pathname, int flags)…

npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等

npm常用命令 前端常用的包管理工具 以及 npm淘宝镜像配置等 1. 前言1.1 NodeJs的下载安装1.2 windows上1.3 常用包管理工具 2. npm2.1 npm 的安装2.2 npm初始化包2.3 npm 安装、卸载包2.3.1 非全局安装2.3.1.1 单个包的安装2.3.1.1.1 默认版本安装2.3.1.1.2 指定版本安装 2.3.…

Ceph入门到精通-如何编译安装Quagga?

Quagga 1. 理论部分 1.1 软件简介 Quagga中文翻译斑驴&#xff0c;是一种先进的路由软件包&#xff0c;提供一套基于TCP/IP的路由协议。 1.2 斑驴的应用场景 – 使得操作系统变成专业的路由 – 使得操作系统具有与传统路由通过路由协议直接对接 1.3 斑驴支持的路由协议 …

SpringCluod深入教程

1.Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我们需要一种统一配置管理方案&#…

【前端】常用功能合集

目录 js跳转到新标签打开PDF文件js每十个字符换行 es6用表达式或变量名作为对象的属性名 vuev-for插值、:style、:class父组件加载完后再加载子组件keep-alive缓存跨域请求第三方接口跨域请求之callback&#xff08;不建议&#xff09;读取本地文件浏览器播放提示音audio jquer…

Element Plus 日期选择器的使用和属性

element plus 日期选择器如果如果没有进行处理 他会返回原有的属性值data格式 如果想要获取选中的日期时间就需要通过以下的代码来实现选中的值 format"YYYY/MM/DD" value-format"YYYY-MM-DD" <el-date-pickerv-model"formInline.date" type&…

前端面试基础面试题——1

总结了一些基础的面试题 如果大家有兴趣的话可以关注留意一下 今后会不断更新一些面试题 1.JavaScript 中的 AJAX 原理及应用。 2.什么是闭包?请简单描述一下闭包的特点与应用场景。 3.请简述 HTTPS 与 HTTP 的区别&#xff0c;如何保证 HTTPS 的安全性? 4.请简述…

2023年6月GESP C++ 四级试卷解析

一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 1.高级语言编写的程序需要经过以下&#xff08; &#xff09;操作&#xff0c;可以生成在计算机上运行的可执行代码。 A.编辑 B.保存 C.调试 D.编译 【答案】D 【考纲知识点】编程环境(一级) 【解析】本题…