Android端与PC端同步绘画板(二)-适配手机和PC屏幕大小

前言

关于手机端与PC端如何建立通讯，请参考：
Android端与PC端同步绘画板(一)-使用Socket建立连接
这篇文章我们来简单说一下关于手机端和PC端的屏幕适配问题，因为我们都知道因为Android碎片化问题，屏幕适配一直是个难题，所以android和pc之间画板也是需要屏幕适配的，否则会造成一系列问题；

问题

从上图我们可以看到假如手机端为全屏绘制，屏幕的分辨率为1280*720，可绘制区域也就是1280*720，PC端画板在电脑上给一个固定的宽高，可绘制区域的分辨率为800*600；
假如在手机端的500*500的位置绘制圆1，由于两边的分辨率大小不同，在PC端的显示位置有所偏移，同样是500*500的位置绘制的圆1，但显示效果却大不相同
同样在手机端1100*650位置绘制圆2，由于PC端的可绘制区域大小只有800*600，所以根本就无法显示出Android端绘制的圆2；

如何解决

1.给android端一个可绘制区域的View一个固定的大小（800*600），使用Px来做尺寸单位，这样子，绘制出来的位置就会和PC端同步，但由于android的碎片化问题，因为同样100px的图片，在不同手机上显示的实际大小可能不同，如下图所示：

同样，这样子的方式，在手机端绘制区域是无法全屏绘制的；
2.第二种方式先说一下大概思路：

• 首先将可绘制区域的View宽高设置为match_parent;
• 然后在View执行onMeasure方法的时候记录下View的原始大小，并给定新的大小（和PC端一样的大小）
• 接着在View执行onSizeChanged方法的时候使用获取到的原始大小除以重新给定的大小得到缩放倍数，调用方法将画布进行缩放；
• 缩放后的画布位置发生了改变，调用方法平移到原先位置即可；

假如我们给定PC端画布的大小为800*600，以屏幕分辨率为1280*720的手机为例

<com.rock.drawboard.ui.view.SketchpadView        android:id="@+id/SketchadView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_toLeftOf="@+id/control_board"/>

1.首先将Android端用来绘制的View宽高设置为match_parent，此时Andorid端画布的View应该为1280*720

    private int oldWidth;    private int oldHeight;    private final int CONFIRM_WIDGHT = 800;    private final int CONFIRM_HEIGHT = 600;    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int w = MeasureSpec.getSize(widthMeasureSpec);        int h = MeasureSpec.getSize(heightMeasureSpec);        //取得view原始宽高        oldWidth = w > oldWidth ? w : oldWidth;        oldHeight = h > oldHeight ? h : oldHeight;        //设置新的宽高        setMeasuredDimension(CONFIRM_WIDGHT, CONFIRM_HEIGHT);    }

2.然后我们在View的onMeasure方法中获取View的初始宽高，并设置新的宽高（800*600），由于设置新的宽高后View会重新调用onMeasure方法，所以我们用个三目运算来得到最大宽高，设置新的宽高后由上图可知画布的中心点和位置产生了移动；

protected void onSizeChanged(int w, int h, int oldw, int oldh) {        LogUtils.e("onSizeChanged", "width: " + w + "height:　" + h);        //根据原始大小进行缩放        float scaleX = (float) oldWidth / (float) w;        float scaleY = (float) oldHeight / (float) h;        setScaleX(scaleX);        setScaleY(scaleY);        //缩放后平移到原始位置        setTranslationX(-(oldWidth - w) / 2);        setTranslationY((oldHeight - h) / 2);     }

3.接着在onSizeChange方法中首先进行缩放，将800*600的画布缩放到原来的大小，但分辨率不变，又上图可知缩放后由于中心点位置所以有一部分画布移动到了屏幕外边；
4.最后我们调用方法进行平移，就完成了将画布重新布满屏幕，并且分辨率为800*600；
5.此时Android端和PC端的屏幕分辨率即可一致；

具体实现细节请参考项目：

Android端源码地址