React Native移动开发实战-4-Android平台的适配原理
打开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。
表5.1 Android文件夹后缀命名与像素密度(dp)范围的对应关系
|
后缀 |
像素密度(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移动开发实战》
React Native移动开发实战-4-Android平台的适配原理的更多相关文章
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- <React Native移动开发实战>-1-React Native的JSX解决方案
JSX并不是一门新的开发语言,而是Facebook提出的语法方案:一种可以在JavaScript代码中直接书写HTML标签的语法糖,所以,JSX本质上还是JavaScript语言. 小知识:语法糖(S ...
- React Native 混合开发与实现
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简 ...
- 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native之微信分享(iOS Android)
React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...
- Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- 【转】decorView和window之间的层级及关系
转载请注明出处:http://blog.csdn.net/guxiao1201/article/details/41744107 首先贴出实现Activity对话框圆角的核心代码 @Override ...
- Day9 抽象类和接口
抽象类 抽象类定义 只约定类所具有的抽象行为,没有具体实现相应行为. 语法格式 abstract class 类名{ 常量; 变量; 构造(); 访问修饰符abstract 返回类型 方法名;//抽象 ...
- 微信小程序、安卓APP、苹果APP对比分析
今天的话题主要是关于微信小程序.安卓APP.苹果APP对比分析.既然是对比分析肯定是将它们一个一个说明. 本篇不涉及技术话题,只讲解微信小程序.安卓APP.苹果APP它们各自的优缺点及其应用场景. 一 ...
- leetcode566. Reshape the Matrix
https://leetcode.com/problems/reshape-the-matrix/description/ public int[][] matrixReshape(int[][] n ...
- chrome 浏览器插件开发(一)—— 创建第一个chrome插件
最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...
- jQuery 事件函数传参异常identifier starts immediately after numeric literal
问题情境: var arr=[aabbcc,112233]; var html = ""; for(var i =0;i<arr.length;i++){ html += ' ...
- mac上ssh工具,包含简易的文件传输功能
最近需要在mac上连ssh,但是之前在mac上用的都是简易的SSH Shell,没有找到传输文件的功能. 这时候就非常想念win上的winscp,有个界面,传点东西还是很直观的. 几经搜寻,终于找到一 ...
- vue指令:v-model绑定表单控件;v-model与v-bind结合使用
一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...
- Kubernetes学习之路(十一)之Pod状态和生命周期管理
一.什么是Pod? Pod是kubernetes中你可以创建和部署的最小也是最简的单位.一个Pod代表着集群中运行的一个进程. Pod中封装着应用的容器(有的情况下是好几个容器),存储.独立的网络IP ...
- spring学习笔记 星球日one - xml方式配置bean
ide: idea lib包的导入:http://webcache.googleusercontent.com/search?q=cache:http://zyjustin9.iteye.com/bl ...