ReactNative与Android中的屏幕适配

最新推荐文章于 2024-06-27 14:17:05 发布
最新推荐文章于 2024-06-27 14:17:05 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： 【React-Native2点滴知识 】

前言：从开始接触rn到现在终于能写出点东西了，的确得为自己好好地点个赞 ，不管咋样，学习还是得继续啊，废话少说了，在rn中我们也需要对屏幕进行适配，但是rn中的适配貌似比Android原生容易很多（不得佩服facebook那些大神哈，对android原生控件封装的太屌！）。

http://blog.csdn.net/vv_bug/article/details/54958200

我们先看看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;
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

搞过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;
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

然后获取到我们自己手机的屏幕宽高，生成一个百分比，然后算出在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'
    },
});
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

好啦～！！，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>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

这里写图片描述

先走一遍百分比布，看它到底是咋实现适配的(以下是来自鸿洋大神封装过后的代码，我就直接拿走解析了，嘻嘻！！)：

PercentLinearLayout.Java:

package com.yasin.px_percent_layout;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class PercentLinearLayout extends LinearLayout {

    private static final String TAG = "PercentLinearLayout";
    private PercentLayoutHelper mPercentLayoutHelper;

    public PercentLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPercentLayoutHelper = new PercentLayoutHelper(this);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int tmpHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, heightMode);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int tmpWidthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, widthMode);

        //fixed scrollview height problems
        if (heightMode == MeasureSpec.UNSPECIFIED && getParent() != null && (getParent() instanceof ScrollView)) {
            int baseHeight = 0;
            Context context = getContext();
            if (context instanceof Activity) {
                Activity act = (Activity) context;
                int measuredHeight = act.findViewById(android.R.id.content).getMeasuredHeight();
                baseHeight = measuredHeight;
            } else {
                baseHeight = getScreenHeight();
            }
            tmpHeightMeasureSpec = MeasureSpec.makeMeasureSpec(baseHeight, heightMode);
        }

        mPercentLayoutHelper.adjustChildren(tmpWidthMeasureSpec, tmpHeightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mPercentLayoutHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    private int getScreenHeight() {
        WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.heightPixels;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        mPercentLayoutHelper.restoreOriginalParams();
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(getContext(), attrs);
    }


    public static class LayoutParams extends LinearLayout.LayoutParams
            implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
        }

        @Override
        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            return mPercentLayoutInfo;
        }

        @Override
        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
            PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
        }

        public LayoutParams(int width, int height) {
            super(width, height);
        }


        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }

        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }

    }

}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111

代码不要太简单哈，就在构造方法中创建了一个mPercentLayoutHelper：

 public PercentLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        mPercentLayoutHelper = new PercentLayoutHelper(this);
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

我们待会再来说这个PercentLayoutHelper，

然后就是创建了一个自己的LayoutParams：

public static class LayoutParams extends LinearLayout.LayoutParams
            implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
        }

        @Override
        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            return mPercentLayoutInfo;
        }

        @Override
        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
            PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
        }

        public LayoutParams(int width, int height) {
            super(width, height);
        }


        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }

        public LayoutParams(MarginLayoutParams source) {
            super(source);
        }

    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

其中也咩有啥代码，创建了一个PercentLayoutInfo。

然后核心代码就是onMeasure方法里面了：


        mPercentLayoutHelper.adjustChildren(tmpWidthMeasureSpec, tmpHeightMeasureSpec);
 
 
  • 1
  • 2

 
 
  • 1
  • 2

核心也就这一句。

终结下来就是： 
1、先获取到我们在布局文件中定义的属性：

 app:layout_widthPercent="10%w"
 app:layout_heightPercent="10%h"
 .......
 
 
  • 1
  • 2
  • 3

 
 
  • 1
  • 2
  • 3

2、然后把获取到的属性封装进一个叫PercentLayoutInfo的类中：

public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
        }
 
 
  • 1
  • 2
  • 3
  • 4

 
 
  • 1
  • 2
  • 3
  • 4

3、在onMeasure方法中根据传进的属性对子控件进行重置大小：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int tmpHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, heightMode);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int tmpWidthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, widthMode);

        //fixed scrollview height problems
        if (heightMode == MeasureSpec.UNSPECIFIED && getParent() != null && (getParent() instanceof ScrollView)) {
            int baseHeight = 0;
            Context context = getContext();
            if (context instanceof Activity) {
                Activity act = (Activity) context;
                int measuredHeight = act.findViewById(android.R.id.content).getMeasuredHeight();
                baseHeight = measuredHeight;
            } else {
                baseHeight = getScreenHeight();
            }
            tmpHeightMeasureSpec = MeasureSpec.makeMeasureSpec(baseHeight, heightMode);
        }

        mPercentLayoutHelper.adjustChildren(tmpWidthMeasureSpec, tmpHeightMeasureSpec);
        super.onMeasure(widthMeasureSpec, hei }
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

看完是不是觉得很简单呢？ 是的，本来就不难哈，我们接着往下看：

先看看它是咋拿到我们在布局文件中写的属性的（怎么封装）：

public static PercentLayoutInfo getPercentLayoutInfo(Context context,
                                                         AttributeSet attrs) {
        PercentLayoutInfo info = null;
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PercentLayout_Layout);

        info = setWidthAndHeightVal(array, info);

        info = setMarginRelatedVal(array, info);

        info = setTextSizeSupportVal(array, info);

        info = setMinMaxWidthHeightRelatedVal(array, info);

        info = setPaddingRelatedVal(array, info);


        array.recycle();

        if (Log.isLoggable(TAG, Log.DEBUG)) {
            Log.d(TAG, "constructed: " + info);
        }
        return info;
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

获取TypedArray数组中的数据（我们就只看setWidthAndHeightVal代码了）：

private static PercentLayoutInfo setWidthAndHeightVal(TypedArray array, PercentLayoutInfo info) {
        PercentLayoutInfo.PercentVal percentVal = getPercentVal(array, R.styleable.PercentLayout_Layout_layout_widthPercent, true);
        if (percentVal != null) {
            if (Log.isLoggable(TAG, Log.VERBOSE)) {
                Log.v(TAG, "percent width: " + percentVal.percent);
            }
            info = checkForInfoExists(info);
            info.widthPercent = percentVal;
        }
        percentVal = getPercentVal(array, R.styleable.PercentLayout_Layout_layout_heightPercent, false);

        if (percentVal != null) {
            if (Log.isLoggable(TAG, Log.VERBOSE)) {
                Log.v(TAG, "percent height: " + percentVal.percent);
            }
            info = checkForInfoExists(info);
            info.heightPercent = percentVal;
        }

        return info;
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

获取到heightPercent跟widthPercent信息然后赋给info对象，没啥好看的，重点看看咋获取到的widthPercent信息：

private static PercentLayoutInfo.PercentVal getPercentVal(TypedArray array, int index, boolean baseWidth) {
        String sizeStr = array.getString(index);
        PercentLayoutInfo.PercentVal percentVal = getPercentVal(sizeStr, baseWidth);
        return percentVal;
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

也没啥看的（继续往下走）：

 private static PercentLayoutInfo.PercentVal getPercentVal(String percentStr, boolean isOnWidth) {
        //valid param
        if (percentStr == null) {
            return null;
        }
        Pattern p = Pattern.compile(REGEX_PERCENT);
        Matcher matcher = p.matcher(percentStr);
        if (TextUtils.isEmpty(percentStr) ||
                (!matcher.matches() && !(percentStr.toLowerCase().endsWith("px")))) {
            throw new RuntimeException("the value of layout_xxxPercent invalid! ==>" + percentStr);
        }
        String floatVal;
        String lastAlpha;
        float percent;
        int len = percentStr.length();
        if (matcher.matches()) {
            //extract the float value
            floatVal = matcher.group(1);
            lastAlpha = percentStr.substring(len - 1);
            percent = Float.parseFloat(floatVal) / 100f;
        } else {
            //extract the float value
            floatVal = percentStr.substring(0, percentStr.indexOf("px"));
            lastAlpha = percentStr.substring(len - 1);
            percent = Float.parseFloat(floatVal);
        }

        PercentLayoutInfo.PercentVal percentVal = new PercentLayoutInfo.PercentVal();
        percentVal.percent = percent;
        if (percentStr.endsWith(PercentLayoutInfo.BASEMODE.SW)) {
            percentVal.basemode = PercentLayoutInfo.BASEMODE.BASE_SCREEN_WIDTH;
        } else if (percentStr.endsWith(PercentLayoutInfo.BASEMODE.SH)) {
            percentVal.basemode = PercentLayoutInfo.BASEMODE.BASE_SCREEN_HEIGHT;
        } else if (percentStr.endsWith(PercentLayoutInfo.BASEMODE.PERCENT)) {
            if (isOnWidth) {
                percentVal.basemode = PercentLayoutInfo.BASEMODE.BASE_WIDTH;
            } else {
                percentVal.basemode = PercentLayoutInfo.BASEMODE.BASE_HEIGHT;
            }
        } else if (percentStr.endsWith(PercentLayoutInfo.BASEMODE.W)) {
            percentVal.basemode = PercentLayoutInfo.BASEMODE.BASE_WIDTH;
        } else if (percentStr.endsWith(PercentLayoutInfo.BASEMODE.H)) {
            percentVal.basemode = PercentLayoutInfo.BASEMODE.BASE_HEIGHT;
        } else if (percentStr.endsWith(PercentLayoutInfo.BASEMODE.PX)) {
            percentVal.basemode = PercentLayoutInfo.BASEMODE.ABSOLUTE_PX;
        } else {
            throw new IllegalArgumentException("the " + percentStr + " must be endWith [%|w|h|sw|sh]");
        }

        return percentVal;
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

好啦，终于看到核心代码了，不做太多解释，相信都看得懂，简单来说就是获取到我们设置的值，然后判断我们设置的值属于哪种类型：

类型有：

 private enum BASEMODE {

            BASE_WIDTH, BASE_HEIGHT, BASE_SCREEN_WIDTH, BASE_SCREEN_HEIGHT, ABSOLUTE_PX;

            /**
             * width_parent
             */
            public static final String PERCENT = "%";
            /**
             * width_parent
             */
            public static final String W = "w";
            /**
             * height_parent
             */
            public static final String H = "h";
            /**
             * width_screen
             */
            public static final String SW = "sw";
            /**
             * height_screen
             */
            public static final String SH = "sh";
            /**
             * absolute px
             */
            public static final String PX = "px";
        }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

就是我们布局中写的：

app:layout_widthPercent="10%w"
            app:layout_heightPercent="10%h"
            app:layout_widthPercent="20%sw"
            app:layout_heightPercent="20%sh"
            app:layout_widthPercent="200px"
            app:layout_heightPercent="200px"
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

小伙伴是不是看懂了呢？ 比如20％sw，就是把20跟sw取出来，然后封装进类中。

好啦，我们已经拿到我们在布局中设置的属性了，然后我们就得根据我们设置的值重新赋给子控件了。

在onMeasure中我们找到adjustChildren方法：

/**
     * Iterates over children and changes their width and height to one calculated from percentage
     * values.
     *
     * @param widthMeasureSpec  Width MeasureSpec of the parent ViewGroup.
     * @param heightMeasureSpec Height MeasureSpec of the parent ViewGroup.
     */
    public void adjustChildren(int widthMeasureSpec, int heightMeasureSpec) {
        if (Log.isLoggable(TAG, Log.DEBUG)) {
            Log.d(TAG, "adjustChildren: " + mHost + " widthMeasureSpec: "
                    + View.MeasureSpec.toString(widthMeasureSpec) + " heightMeasureSpec: "
                    + View.MeasureSpec.toString(heightMeasureSpec));
        }
        int widthHint = View.MeasureSpec.getSize(widthMeasureSpec);
        int heightHint = View.MeasureSpec.getSize(heightMeasureSpec);

        if (Log.isLoggable(TAG, Log.DEBUG))
            Log.d(TAG, "widthHint = " + widthHint + " , heightHint = " + heightHint);

        for (int i = 0, N = mHost.getChildCount(); i < N; i++) {
            View view = mHost.getChildAt(i);
            ViewGroup.LayoutParams params = view.getLayoutParams();

            if (Log.isLoggable(TAG, Log.DEBUG)) {
                Log.d(TAG, "should adjust " + view + " " + params);
            }

            if (params instanceof PercentLayoutParams) {
                PercentLayoutInfo info =
                        ((PercentLayoutParams) params).getPercentLayoutInfo();
                if (Log.isLoggable(TAG, Log.DEBUG)) {
                    Log.d(TAG, "using " + info);
                }
                if (info != null) {
                    supportTextSize(widthHint, heightHint, view, info);
                    supportPadding(widthHint, heightHint, view, info);
                    supportMinOrMaxDimesion(widthHint, heightHint, view, info);

                    if (params instanceof ViewGroup.MarginLayoutParams) {
                        info.fillMarginLayoutParams((ViewGroup.MarginLayoutParams) params,
                                widthHint, heightHint);
                    } else {
                        info.fillLayoutParams(params, widthHint, heightHint);
                    }
                }
            }
        }
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

遍历我们的子控件，然后根据我们上面获取到的info类，进行重新布局：

if (info != null) {
                    supportTextSize(widthHint, heightHint, view, info);
                    supportPadding(widthHint, heightHint, view, info);
                    supportMinOrMaxDimesion(widthHint, heightHint, view, info);

                    if (params instanceof ViewGroup.MarginLayoutParams) {
                        info.fillMarginLayoutParams((ViewGroup.MarginLayoutParams) params,
                                widthHint, heightHint);
                    } else {
                        info.fillLayoutParams(params, widthHint, heightHint);
                    }
                }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

demo中我们看到了：

<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"
            />
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

我们有设置一个app:layout_textSizePercent：

看到这我们找到一个方法，没错！也就是这里对textview设置的size大小的：

supportTextSize(widthHint, heightHint, view, info);
 
 
  • 1

 
 
  • 1

我们往下走：

 private void supportTextSize(int widthHint, int heightHint, View view, PercentLayoutInfo info) {
        //textsize percent support

        PercentLayoutInfo.PercentVal textSizePercent = info.textSizePercent;
        if (textSizePercent == null) return;
        float textSize;
        int base = getBaseByModeAndVal(widthHint, heightHint, textSizePercent.basemode);
        if (textSizePercent.basemode == PercentLayoutInfo.BASEMODE.ABSOLUTE_PX) {
            textSize = ViewUtils.scaleTextValue(mHost.getContext(), textSizePercent.percent);
        } else {
            textSize = (int) (base * textSizePercent.percent);
        }
        //Button 和 EditText 是TextView的子类
        if (view instanceof TextView) {
            ((TextView) view).setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
        }
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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

这里如果我们是直接设置的px的话（如：app:layout_textSizePercent=”28px”），我们就需要根据ui基准，然后算出在我们手机上应该显示多少：

int base = getBaseByModeAndVal(widthHint, heightHint, textSizePercent.basemode);
        if (textSizePercent.basemode == PercentLayoutInfo.BASEMODE.ABSOLUTE_PX) {
            textSize = ViewUtils.scaleTextValue(mHost.getContext(), textSizePercent.percent);
        } else {
            textSize = (int) (base * textSizePercent.percent);
        }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

如果是直接设置的20％w，20％h，20％sh这样的值的话，我们就需要用父布局的宽、高、屏幕宽、高乘一个我们设置进去的百分比进行计算了：

textSize = (int) (base * textSizePercent.percent);
 
 
  • 1

 
 
  • 1

好啦！！！剩下的几个方法也都差不多，我就不一一讲了哈：

if (info != null) {
                    supportTextSize(widthHint, heightHint, view, info);
                    supportPadding(widthHint, heightHint, view, info);
                    supportMinOrMaxDimesion(widthHint, heightHint, view, info);

                    if (params instanceof ViewGroup.MarginLayoutParams) {
                        info.fillMarginLayoutParams((ViewGroup.MarginLayoutParams) params,
                                widthHint, heightHint);
                    } else {
                        info.fillLayoutParams(params, widthHint, heightHint);
                    }
                }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

嗯嗯～！ 我们的百分比跟px布局差不多就讲完啦～， 下面看看咋使用它哈：

如果要直接使用px布局的话（不用px布局可不需要做第一步与第二步）： 
1、在项目的manifest文件中定义好ui设计的基准（如iphone6）：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.leo.textdemo" >

    <application
        android:name=".BaseApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        >
        <meta-data android:name="UI_WIDTH" android:value="750"/>
        <meta-data android:name="UI_HEIGHT" android:value="1334"/>
        <meta-data android:name="UI_DENSITY" android:value="2"/>
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SimpleMenuActivtiy">
        </activity>
    </application>

</manifest>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

2、在app中的application文件中，初始化布局：

package com.example.leo.textdemo;

import android.app.Application;
import android.content.Context;

import com.yasin.px_percent_layout.utils.PxAppConfig;

/**
 * Created by leo on 17/2/9.
 */

public class BaseApplication extends Application {
    @Override
    protected void attachBaseContext(Context base) {
        super.attachBaseContext(base);
        PxAppConfig.init(base);
    }
}

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

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

然后我们就可以在布局文件中用起来了：

<?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>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

好啦！！！文章有点长哈，最后附上项目的Git链接： 
https://github.com/913453448/PercentLayoutDemo

barnett_y
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native屏幕适配
夜行者～@
11-27 1444
由于项目中有一个问题没有解决，那就是不同手机屏幕的尺寸是不一样的，这尺寸是一个大问题，越到最后需要修改的尺寸越多，所以今天我抽空研究了一下，首先回忆，android的屏幕尺寸是根据不同手机的values里面的值来进行适配的，但是RN是作桥接到android的，所以在andoid values文件夹中获取尺寸数据是有点困难，然后就开始百度搜索，百度给出的答案是,主要看公式: 设计稿元素宽度（px...
ReactNative屏幕适配工具
08-10
React Native屏幕适配工具
android 获取屏幕宽度_React Native 屏幕适配
weixin_39902184的博客
11-21 244
React Native 屏幕适配开发APP(包括H5)都面临一个问题，怎么适配各种尺寸的屏幕？H5方案：等比例缩放在移动端的web页面适配上，我们采用的是手机淘宝出的 lib-flexible 方案，大部分情况下，rem 一把梭，基本上解决了屏幕适配问题。在 React Native的页面布局里，也很自然想到使用类似的方案，根据当前屏幕宽度，计算出应该显示的尺寸，梭哈即可。然鹅，在和UE同学确认...
React中大屏适配
最新发布
xiaoka__xm的博客
06-27 557
这里原本是有一个eject的运行指令的，运行完后这个指令会自动消失，然后运行。这个插件的主要作用是将像素（px）单位转换为。值（以像素为单位）。重新启动项目，页面适配就完成了！单位，从而方便进行响应式设计。的作用是指定根元素（通常是。
聊聊React Native屏幕适配那些事儿
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-24 2437
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群作者：张子君原文：https://segmentfault.com/a/1190000039805723写在前面在我...
ReactNative进阶（四十四）：Mobile App 适配性优化_react native 适配
2401_84446712的博客
05-08 873
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：在RN实现移动应用开发过程中，通过链接跳转方式跳转至其他技术栈（例如）实现的应用情形中，适配性问题同样值得深思。
ReactNative进阶（四十四）：Mobile App 适配性优化
IT全栈 华强工作室
06-23 1609
移动端应用开发过程中，内容自适应是避不开的一个注意点。相较于PC Web端开发应用设备的数量种类，Mobile APP面临着设备应用多样性问题，各厂商生产设备多样，同一厂商不同型号的电子设备分辨率、屏幕尺寸相异性是不得不考虑的一个问题，尤其是将手持设备，例如iPad等考虑在内，更加剧了设备适配性的思考。在RN实现移动应用开发过程中，通过链接跳转方式跳转至其他技术栈（例如）实现的应用情形中，适配性问题同样值得深思。
详解React Native 屏幕适配（炒鸡简单的方法）
01-19
React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配（ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕）的问题，下面介绍一种几行代码搞定 RN 适配的方法！ 屏幕适配的前置知识 RN ...
React Native中Android物理back键按两次返回键即退出应用
08-29
在React Native开发中，针对Android平台的特性，开发者经常需要处理物理返回键的事件，以实现特定的功能，比如用户按两次返回键退出应用。本文将详细介绍如何在React Native中实现这个功能。 首先，React Native...
ReactNative进阶（三十六）：iOS 横屏适配
IT全栈 华强工作室
01-23 1304
应用RN技术栈实现APP上线后，业务部门领导会上反馈未实现ipad横屏全屏展示，用户体验较差。由此，一场pad横屏全屏展示的APP调优工作由此开展。
ReactNative的响应式网格包含RTL布局支持
08-10
React Native的响应式网格包含RTL布局支持
react-native android图标尺寸规范
xuewenjie0217的博客
05-29 538
具体每个文件夹中对应的图标尺寸规范如下（原则是不低于规范尺寸,单位：px）： res目录下 桌面图标 m40 h60 xh120 xxh180 hdpi文件夹 —— 192x192 xhdpi文件夹 —— 256x256 xxhdpi文件夹 —— 384x384 xxxhdpi文件夹 —— 512x512 注：分辨率适配目录参考 480*800 drawable-hdpi 540*960 drawable-sw360dp-hdpi 720*1280 drawable-sw360d...
RN屏幕、文字大小适配
weixin_42369566的博客
08-11 853
react-native项目屏幕适配、字体大小适配
移动端适配
weixin_73416102的博客
12-08 1944
移动端适配
RN如何适配
book_1992的专栏
05-14 859
RN中使用的尺寸单位是dp 使用PixelRatio进行适配，相关API： 1.PixelRatio.roundToNearestPixel 将布局大小(dp)四舍五入为与整数个像素对应的最近布局大小。例如，在PixelRatio为3的设备上PixelRatio.roundToNearestPixel(8.4) = 8.33，它恰好对应于（8.33 * 3）= 25像素 不是将dp转化为px 2.PixelRatio.getPixelSizeForLayoutSize 将布局大小(dp)转换为像素大小(px
react-native自适应屏幕
xinkailei3的博客
12-21 3217
创建如下js文件 /** * Created by qianxin on 17/6/1. * 屏幕工具类 * ui设计基准,iphone 6 * width:750 * height:1334 */ let ReactNative = require('react-native'); // 获取屏幕的dp let Dimensions = require('Dimensions'); ...
ReactNative屏幕适配解决方案
kakaxiqianxin的专栏
06-12 9218
ReactNative也是以pt为单位的，这种单位会导致界面变形 先上界面布局 render() { return ( &amp;lt;View style={styles.container}&amp;gt; &amp;lt;Text style={styles.welcome}&amp;gt; Welcome to React Native! &amp;...
react-native-video全屏播放及屏幕旋转适配指南
"本文将详细介绍如何使用react-native-video组件在React Native应用中实现视频播放及全屏功能。react-native-video是GitHub上一个流行的开源组件，提供了丰富的功能，包括播放速率控制、音量调整、静音、播放/暂停、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值