前言:从开始接触rn到现在终于能写出点东西了,的确得为自己好好地点个赞 ,不管咋样,学习还是得继续啊,废话少说了,在rn中我们也需要对屏幕进行适配,但是rn中的适配貌似比android原生容易很多(不得佩服facebook那些大神哈,对android原生控件封装的太屌!)。
我们先看看rn中的屏幕适配(作为一个android程序员去做rn确实比ios程序员考虑的东西多一点点哈,嘻嘻~~):
结合android的一些适配经验,我在rn中也封装了一个工具类
ScreenUtils.js:
/**
* 屏幕工具类
* ui设计基准,iphone 6
* width:750
* height:1334
*/
var ReactNative = require('react-native');
var Dimensions = require('Dimensions');
export var screenW = Dimensions.get('window').width;
export var screenH = Dimensions.get('window').height;
var fontScale = ReactNative.PixelRatio.getFontScale();
export var pixelRatio = ReactNative.PixelRatio.get();
const r2=2;
const w2 = 750/r2;``
const h2 = 1334/r2;
/**
* 设置text为sp
* @param size sp
* @returns {Number} dp
*/
export const DEFAULT_DENSITY=2;
export function setSpText(size:Number) {
var scaleWidth = screenW / w2;
var scaleHeight = screenH / h2;
var scale = Math.min(scaleWidth, scaleHeight);
size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
return size;
}
/**
* 屏幕适配,缩放size
* @param size
* @returns {Number}
* @constructor
*/
export function scaleSize(size:Number) {
var scaleWidth = screenW / w2;
var scaleHeight = screenH / h2;
var scale = Math.min(scaleWidth, scaleHeight);
size = Math.round((size * scale + 0.5));
return size/DEFAULT_DENSITY;
}
搞过rn的童鞋知道,rn中直接写宽高都是dp的,所以我们要以一个美工设计的ui基准来计算我们的宽高,数学不好哈,不过大概是这样的:
我们先定义好ui的设计基准:
/**
* 屏幕工具类
* ui设计基准,iphone 6
* width:750
* height:1334
*/
var ReactNative = require('react-native');
var Dimensions = require('Dimensions');
export var screenW = Dimensions.get('window').width;
export var screenH = Dimensions.get('window').height;
var fontScale = ReactNative.PixelRatio.getFontScale();
export var pixelRatio = ReactNative.PixelRatio.get();
const r2=2;
const w2 = 750/r2;``
const h2 = 1334/r2;
/**
* 设置text为sp
* @param size sp
* @returns {Number} dp
*/
export const DEFAULT_DENSITY=2;
然后获取到我们自己手机的屏幕宽高,生成一个百分比,然后算出在iphone6上的100px,在我们手机上是多少px,最后转换成dp设置在在我们布局的style中:
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
justifyContent: 'space-between',
flexDirection: 'row',
paddingTop: ScreenUtils.scaleSize(22),
paddingBottom: ScreenUtils.scaleSize(22),
paddingRight: ScreenUtils.scaleSize(12),
paddingLeft: ScreenUtils.scaleSize(12),
alignItems: 'center'
},
});
好啦~!!,rn上的适配就完啦,是不是soeasy呢???
但是在android原生中,我们写布局大多数都是在xml中写的,所以我们在写布局的时候,压根就不知道我要运行在什么手机上,所以android官方建议我们使用dp啊,然后建很多layout文件啊,很多value文件啊,是的!我个人也是比较推崇官方的做法的,效率高,清晰明了,好啦!!除了android官方说的那种方法,我们是否也可以像rn一样运行后再重新算出百分比,然后再布局呢?答案是肯定的,因为rn就是一个例子,它也是对原生控件封装过的,所以才能用js轻易控制,在此之前鸿洋大神也对百分比布局做了封装,也对齐做了很详细的解析了,先贴上大神的博客链接:
[http://blog.csdn.net/lmj623565791/article/details/46767825](http://blog.csdn.net/lmj623565791/article/details/46767825
好啦!我们今天要做的也就是在百分比布局的基础上简单封装下,然后使得其能够像rn一样,直接写上美工标的px就能完美适配大部分手机了。
先上张运行好的效果图(效果还是很不错的!):
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="com.example.leo.textdemo.MainActivity">
<com.yasin.px_percent_layout.PercentLinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_widthPercent="10%w"
app:layout_heightPercent="10%h"
android:text="10%w,10%h"
android:background="#ff0000"
android:textColor="#fff"
/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_widthPercent="20%sw"
app:layout_heightPercent="20%sh"
android:text="屏幕宽的20%sw,屏幕高的20%sh"
android:background="#ffff00"
android:textColor="#ff00"
/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_widthPercent="200px"
app:layout_heightPercent="200px"
android:text="iphone6为基准的宽:200px,高:200px"
android:background="#0000ff"
android:textColor="#fff"
/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_widthPercent="375px"
app:layout_heightPercent="375px"
android:text="iphone6为基准的宽:370px,高:370px,textsize为28px"
android:background="#00ff00"
app:layout_textSizePercent="28px"
android:textColor="#ff00"
/>
</com.yasin.px_percent_layout.PercentLinearLayout>
</RelativeLayout>
先走一遍百分比布,看它到底是咋实现适配的(以下是来自鸿洋大神封装过后的代码,我就直接拿走解析了,嘻嘻!!):
PercentLinearLayout.java:
package com.yasin.px_percent_layout;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import