【android】移植IOS视图响应陀螺仪交互行为

IOS有个很有趣味的特性：背景图片可以响应陀螺仪方向的变化，去改变X、Y轴上的值，从而让整个界面看着充满着灵性。具体步骤是：解锁苹果产品，在IOS7以上，摆动手势，观察桌面背景图片的变化。

 

刚好，我们的产品现在遇到了一个场景：标题栏以下，占据40%空间的是一张png图片，背景是一片星空，如果不给点交互，感觉太死板了

这时候想，如果把IOS这个特性移植到本场景中，作用对象是背景那个星空，那多美啊~

二话不说，跪求美工大哥把png图片的前景和背景分离，拿到两张图片，开搞~

 

实现之后的效果产品大哥也觉得很赞，就把这套方案共享出来了，调用很简单，一共三句：声明、注册、解注册。

本模块工作原理：监听加速器里的陀螺仪传感器，获取其在x、y轴上的偏移数据，换算成一个垂直、水平上的位移值，赋值给视图的x、y属性。

先来看下效果，比较渣，建议下载APK demo体验；源码地址：http://git.oschina.net/yso/IOSParallelView

 

一句话讲解陀螺仪xyz方向：以portrait屏幕方向为例，手机的左下角为原点，x轴:水平方向，越右越大；y轴：垂直方向，越高越大；z轴：屏幕对着你的方向，越近越大；

 

下面来说下具体的实现步骤：

准备工作

1：设置一个视图响应陀螺仪事件，最大移动的距离为30dp（举个例子）；

2：设置视图宽高为：原始宽高 +2倍的30dp（用于左移和右移到极限都能看到图片）

3：把图片往屏幕的左上角扯30dp距离，（通过设置 x、y为-30dp）

ps：因此，我们设置x、y的范围是-60dp（再往左上角扯30dp）~0dp（往右下角扯了60dp）

 

接下来开始响应陀螺仪事件了

1：将陀螺仪在x、y轴上的数据拿到，互换x、y参数位置，传递给调用方

 //为什么要互换 x,y；是因为陀螺仪在y轴上的左右倾斜数据，最终会反应在图片在水平位置上的变化；同理x轴上下倾斜反应在垂直位置上的变化
 //为调用端统一坐标，我们在这里就做了调换，调用端按照正常的坐标系使用即可

2：调用端60dp* 拿到偏移数据*修正常量（0.02f挺好），变成在水平、垂直上的偏移量（我们规定为-30dp~30dp，总不能无限偏移吧。。）

3：将结果减去30dp（为什么-30dp是因为我们x、y初始就是-30dp，不是0），赋值在视图的x、y属性上。

4：没了。

 

调用超级简单，贴上代码

初始化里传入Context、要移动的视图、单向移动的最大距离；

在onResume里面注册传感器事件，开始监听陀螺仪

在onPause里面注销传感器事件

public class MainActivity extends AppCompatActivity {
    ParallelViewHelper parallelViewHelper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        parallelViewHelper = new ParallelViewHelper(this, findViewById(R.id.main_image_background));
    }

    @Override
    protected void onResume() {
        super.onResume();
        parallelViewHelper.start();
    }

    @Override
    protected void onPause() {
        super.onPause();
        parallelViewHelper.stop();
    }
}

 

 

 

已知问题：

不能响应屏幕改变事件、不能在横屏上工作。因为现在的APK大部分都定死了方向为portrait，我就不做这方面的优化了。

解决思路：响应activity的onConfigChange事件，拿到屏幕旋转方向。

或者创建一个监听系统方向变化的类OrientationEventListener，在事件中拿到屏幕旋转的角度。

 

老规矩有啥建议欢迎一起交流~