实现类似iOS拍照的按钮滑动功能

今天有时间特意来自己写一篇关于自定义view的内容,先上效果图:

实现类似iOS拍照的按钮滑动功能

我菜鸟一个,有不足的地方请多多指教!

由于工作,我也是边工作边学习自定义,刚接触自定义,多亏了辉哥的指教,在此谢谢!

下面进入正题:

我们要实现的是,实现类似iOS拍照的按钮滑动功能,这里就以最近项目中用到的开始、暂停、停止为准,度娘了一下,发现没有,于是决定自己搞吧!

需求分析:
1:进入项目就只有暂停按钮居中,(所有按钮纵坐标不变)

2:点击暂停按钮,暂停按钮消失,开始和停止按钮向两边滑动至屏幕的(1/6-按钮宽度的一半)和(5/6-按钮宽度的一半)

3:点击开始按钮,开始按钮和停止按钮向中间滑动,当重合时显示,暂停按钮显示

一:继承RelativeLayout,复写其中三个方法,在第三个方法中获取屏幕宽度,并分成三等分,分别获取到这三等分的各自中点

1.获取屏幕宽度方法:

实现类似iOS拍照的按钮滑动功能

2.复写其中三个方法,并分成三等分,分别获取到这三等分的各自中点

实现类似iOS拍照的按钮滑动功能

二、待布局加载完成获取子view,先获取子view的数量就是三个:开始、暂停、停止

实现类似iOS拍照的按钮滑动功能

三、接下来就是在初始摆放控件的方法里面进行进行监听、位置摆放等操作

1.设置暂停按钮的初始位置(中点不行),并设置开始按钮和停止按钮的监听,默认三个按钮需要到达的位置为:

开始:屏幕宽度的六分之一减去按钮宽度的一半

暂停:屏幕宽度的一半减去按钮宽度的一半

停止:屏幕宽度的六分之五减去按钮宽度的一半

实现类似iOS拍照的按钮滑动功能

2。因为默认是在进行中所以进入项目就只有暂停按钮,点击暂停按钮就涉及三个按钮的动画:暂停按钮消失、开始按钮向左滑动、停止按钮向右滑动

点击暂停:创建动画集合,分别创建开始和停止的属性动画,最后将开始和停止一起加入动画集合,然后start

实现类似iOS拍照的按钮滑动功能

3.点击开始按钮就涉及三个按钮的动画:开始按钮向右滑动、停止按钮向左滑动,当开始按钮坐标到达暂停按钮时,暂停按钮显示、开始和停止按钮消失

点击开始:创建动画集合,分别创建开始和停止的属性动画,最后将开始和停止一起加入动画集合,然后start

实现类似iOS拍照的按钮滑动功能

四、接下来在xml文件中加入刚写好的布局,在布局中随便加入三个按钮:开始,暂停,停止

实现类似iOS拍照的按钮滑动功能

然后运行,OK!

Git:demo地址