React Native移动开发实战-4-Android平台的适配

yacheng 发布于2019-06-25 11:32 / 980人阅读

摘要：但是，想要进一步理解的适配，有必要先了解适配的一些基本概念屏幕尺寸屏幕尺寸是指手机屏幕对角线的英寸数。屏幕像素密度屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。

打开Android开发工具Android Studio，选择菜单 Open an existing AndroidStudio project，打开ch04项目的android文件夹，如图5.8所示。

图5.8 Android原生项目结构

从Android的项目结构，想必读者可以隐约感受到：Android适配是基于文件夹的，不同分辨率和尺寸的屏幕会自动适配相应的文件夹下的布局或资源文件。但是，想要进一步理解Android的适配，有必要先了解Android适配的一些基本概念：

屏幕尺寸：屏幕尺寸是指手机屏幕对角线的英寸数。

屏幕分辨率：屏幕分辨率是指屏幕宽高像素数。

屏幕像素密度：屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。

另外，编写代码时常用的尺寸单位有：

px：像素。

dp（dip的缩写）：规定密度为160的屏幕上，1像素对应的尺寸为1dp。320密度的屏幕上，1像素对应0.5dp，以此类推。在密度为160的屏幕上，1英寸有160个像素，那么
px对应的尺寸=1/160英寸。所以说dp是个物理尺寸，跟像素无关。所以，100dp的尺寸在不同手机上显示出来，物理尺寸看上去基本是一样的。

sp（Scale-independentPixel），即与缩放无关的抽象像素。sp和dp很类似但唯一的区别是，Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等等），当文字尺寸是“正常”时，1sp=1dp=0.00625英寸，而当文字尺寸是“大”或“超大”时，1sp>1dp=0.00625英寸。

在创建项目的时候，会自动创建不同的mipmap或layout文件夹（在不同像素密度上提供不同的图片），文件夹的后缀表明了该布局或资源的像素密度（dp）范围，对应关系如下参见5.1。

后缀像素密度（dp）的范围
mdpi 120dp ~ 160dp
hdpi 160dp ~ 240dp
xhdpi 240dp ~ 320dp
xxhdpi 320dp ~ 480dp
xxxhdpi 480dp ~ 640dp

对于上述Android项目中的mipmap文件夹，Android的适配机制是这样的：系统会先到后缀与设备匹配的mipmap目录下找对应的图片，当找不到的时候会去“更高”一级的目录去找，再找不到，继续往高一级的找，如果还是找不到就退而求其次去低一级的找，依次类推。

例如：在密度为xxhdpi的手机上运行Android App，首先会在drawable-xxhdpi目录下寻找图片资源，找不到再去drawable-xxxhdpi找，如果没有比drawable-xxxhdpi更高的，则再找不到就去drawable-xhdpi找，接着drawable-hdpi，直到找到对应的图片资源，当找到后，系统会按密度对图片做缩放处理，然后再显示到屏幕上，所以如果图片放的目录不正确的话，有可能造成图片因缩放而变得模糊。

同样，用于存放布局文件的layout目录也是通过后缀名来适配的，只不过layout文件夹通常添加设备分辨率作为后缀，如：layout-1280x720、layout-1920x1080以及layout-land-1280x720等。

不难看出，以上适配方法和上述iOS开发中的Size Class是类似的：用于分类适配.

和我一起学吧，《React Native移动开发实战》

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13869.html

翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么？

摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...

darkerXi 2019-08-21 12:05 评论0 收藏0
Android混合开发

摘要：另外已经开始报名，定于月日在上海举行，早鸟票已售罄，想去的抓紧时间报名。和相互调用当前的开发中，会使用大量的甚至出现了混合开发模式，使用开发，页面开发效率高和移植便利性为主。前端周刊第 52 期：JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边哈哈，互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口，讨论这件事情的文章很多，前端周刊就没有收录...

张巨伟 2019-06-25 11:47 评论0 收藏0
【腾讯Bugly干货分享】React Native项目实战总结

摘要：本文来自于腾讯开发者社区，非经作者同意，请勿转载，原文地址小时内拼工作，小时外拼成长这是大家共同的理想。每周都会举行嘉宾分享，话题讨论等活动。上一期我们邀请了腾讯工程师王少鸣分享了项目实战总结。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 8小时内拼工作，8小时外...

张利勇 2019-06-24 19:34 评论0 收藏0
Flutter 开发实战与前景展望 - RTC Dev Meetup

摘要：稳定性中大部分异常是不会引起应用崩溃，更多会在上体现为红色错误堆栈，上异常等等。它是的实现类，实现跨帧保存的就是存放在这里，同时它也充当了和之间的桥梁。一整块的重绘区域，决定重绘的影响区域。手势在手势中引入了竞技的概念事件在中尤为重要。大家好，我是郭树煜，Github GSY 系列开源项目的作者，系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...

_ipo 2019-05-27 17:43 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0