Android仿酷狗旋转界面功能-自定义控件实现

本文介绍了一种仿iOS酷狗音乐应用中的旋转界面实现方案。利用ValueAnimator、Rotation等技术,实现视图随手势左右滑动而旋转的效果。文章详细解析了旋转角度计算方法及代码实现细节。

引言

该旋转界面主要是仿照IOS酷狗版的旋转界面来实现,本项目通过结合ValueAnimator、Rotation、PivotX和PivotY来实现,目前主要实现了左旋转和右旋转,该功能主要是在我的乐乐音乐播放器里面使用,其项目地址如下:https://github.com/zhangliangming/HappyPlayer5.git 。

需求

  • 在界面上左右滑,View的角度根据手势移动。
  • 只拦截左右滑动,上下方向的滑动无影响。
  • 子View的左右滑动事件无影响。

预览图

image

实现思路

  • RotateLayout:左右旋转View
  • onInterceptTouchEvent:该方法只要做左右移动拦截,上下移动不拦截。
  • ValueAnimator:该动画只要改变RotateLayout View的角度位置,在ACTION_UP和界面打开时调用。
  • ACTION_MOVE时,根据移动的X位移,修改RotateLayout的角度。
  • 角度算法:先确定旋转view的旋转中心为Q(width/2,height*1.5),然后根据第一次触摸时,该触摸点在屏幕上面的AXY(ax,ay)坐标,根据A点和Q点,计算出该次的夹角A。滑动时,同理计算滑动时的BXY(bx,by)坐标,计算出B点和Q点的夹角B,通过B - A,可以得出view的旋转度数。计算夹角时,可以使用tan来计算,如果计算出来的夹角为负数时,需要+180来得到真正的夹角。
  • 注意,需要activity开启硬件加速,动画才流畅。

主要代码分析

onFinishInflate

360截图20180213200906771.png

该方法只要实现两种方式,一种是通过布局xml文件来初始化RotateLayout;另外一种是新new RotateLayout。

onLayout

360截图20180213201016587.png
360截图20180213201029936.png

该方法只要是在初始化成功之后,修改RotateLayout的角度。

onInterceptTouchEvent

360截图20180213201201541.png
360截图20180213201300429.png

该方法只要是拦截左右移动和判断是否在左右不拦截的子View集合里面。

onTouchEvent

360截图20180213201300429.png

该方法只要在用户左右移动的时候,修改RotateLayout的角度。

360截图20180213201437316.png

该方法只要是ACTION_UP的时候,需要判断当前RotateLayout当前的角度,如果小于关闭窗口的标志值,则角度还原0.否则关闭view.

源码

具体的代码和调用Demo,可到源码地址处查看:
https://github.com/zhangliangming/RotateLayout.git

最后

如果有问题,可到github上面留言。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值