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,在事件中拿到屏幕旋转的角度。

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

【android】移植IOS视图响应陀螺仪交互行为的更多相关文章

  1. 提供给Android和iOS开发人员的UWP移植向导

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:前几天微软发布了一个针对Android和iOS开发人员理解Windows Apps概念 ...

  2. js和android及ios交互

    Android中Java和JavaScript交互 这种交互,Hybrid App 会用的比较多一点, 本文将介绍如何实现Java代码和Javascript代码的相互调用. Android提供了一个很 ...

  3. Android与IOS异同点对照(1)------ 显示

    Android与IOS作为当前世界上最流行的两大移动端操作系统,都拥有无数的粉丝. 那么对于Android或者IOS的开发人员来说,这两个系统都拥有什么同样或者不同的地方那?如今让我们一起来了解一下A ...

  4. iOS 视图控制器转场详解

    iOS 视图控制器转场详解 前言的前言 唐巧前辈在微信公众号「iOSDevTips」以及其博客上推送了我的文章后,我的 Github 各项指标有了大幅度的增长,多谢唐巧前辈的推荐.有些人问我相关的问题 ...

  5. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  6. ArcGIS Runtime SDKs v10.2.4最新(Android、iOS、OSX和.NET)

    ArcGIS Runtime SDKs v10.2.4最新,它包含:Android.iOS.OS X和.NET四大平台,用户和开发人员可以登录Esri最新的SDK安装包.或者通过云盘下载(http:/ ...

  7. iOS与JS开发交互总结

    hybrid.jpg 前言 Web 页面中的 JS 与 iOS Native 如何交互是每个 iOS 猿必须掌握的技能.而说到 Native 与 JS 交互,就不得不提一嘴 Hybrid. Hybri ...

  8. View Programming Guide for iOS ---- iOS 视图编程指南(二)---View and Window Architecture

    View and Window Architecture 视图和窗口架构 Views and windows present your application’s user interface and ...

  9. View Programming Guide for iOS ---- iOS 视图编程指南(一)

    Next About Windows and Views 关于窗口和视图 In iOS, you use windows and views to present your application’s ...

随机推荐

  1. js检查浏览器是否处于隐身模式

    网上大部分的文章写隐身模式下 localStorage 对象不可用,直接以 localStorage 能否写入来判断浏览器是否处于隐身模式其实是错的,在隐身模式下localStorage也是能使用的, ...

  2. 什么原因接触接触impala的

    最近一个项目,关于大数据的改造项目,底层选择Impala还是sparkSQL呢? 最后选择Impala.这样就开启了我的Impala学习之旅.我大部分负责Imapa接口开发工作. 我是控制不住的想整个 ...

  3. Linux同步网络时间

    1.date '+%Y%M%D' 按照格式显示当前日期,结果如下: [root@LAMP ~]# date "+%Y-%m-%d %H:%M:%S" -- :: 2.date -s ...

  4. apache与weblogic 的整合

    web服务器与应用服务器的整合中,apache与weblogic 的整合算的上最普遍也是最基础的整合了 今天配置了一下: apache 2.0 weblogic 8.1 1.将weblogic中的mo ...

  5. PHP Web 木马扫描器代码

    scanner.php:<?php/**************PHP Web木马扫描器************************//* [+] 作者: alibaba *//* [+] ...

  6. 使用Java对文件进行解压缩

    最近在一个项目中需要对文件进行自动的解压缩,Java提供了这种支持,还是挺好用的. 工具包封装在java.util.zip中. 1.首先是多个文件压缩成一个ZIP文件 思路:用一个ZipOutputS ...

  7. LeetCode——Lowest Common Ancestor of a Binary Search Tree

    Description: Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given no ...

  8. LeetCode——Reverse Linked List

    反转链表,用了一个比较笨的方法. public class Solution { public ListNode reverseList(ListNode head) { if(head == nul ...

  9. 【BZOJ4285】使者 cdq分治+扫描线+树状数组

    [BZOJ4285]使者 Description 公元 8192 年,人类进入星际大航海时代.在不懈的努力之下,人类占领了宇宙中的 n 个行星,并在这些行星之间修建了 n - 1 条星际航道,使得任意 ...

  10. [MongoDB]安装MongoDB遇到问题

    1. 首先,当然是下载 MongoDB MongoDB的官方网站是:http://www.mongodb.org/, 最新版本下载在:http://www.mongodb.org/downloads  ...