我们在设计APP选项时,对于只有两个选项的抉择时下拉显然不是那么好操作,这是我们可以选择使用切换开关按钮来实现这个功能,下面是原型动演示态图,这是我参考微信设计的:
![64294e1b1f6e17719fc5b700b7b4d293.gif](https://i-blog.csdnimg.cn/blog_migrate/804c7b487eb7a153099738fd349690bf.gif)
首先我们来创建原件,这里主要用到了快关(组合)这下面的两个原件,创建一个巨型和一个圆,原件宽度自己定,高度一样即可,创建完以后需要把两个元件居中对齐,然后分别命名为按钮和背景。
![d6691ad6ed1463020ab344ce2ea9d7d9.png](https://i-blog.csdnimg.cn/blog_migrate/e6b100d48bfb6e355a27b434b639036c.jpeg)
从动画我们可以看到,当我们点击的时候背景色在变化,这里我们是设置了选中状态,当我们选中原件时替换原有的颜色即可,这里我设置了按钮的边框颜色和背景的背景色,让他们在选中是跟背景颜色一致。
![0ba76a7b2cb1cd51c566a3429c195a78.png](https://i-blog.csdnimg.cn/blog_migrate/409ced142fac649ea28e645b625cc814.jpeg)
接下来进行交互设计,当我们选中按钮时将按钮移动右侧,再次点击按钮时将按钮移到左侧,因为元件的X坐标是以左边为基准的,所以我们在计算坐标时要把本身的宽度计算进去,首先是从左到右移动,这里我们选中按钮在下方找到X右边的FX点进去定义按钮和背景的局部变量,然后插入值[[LVAR1.x+LVAR2.width-LVAR1.width]],y轴水平不变,直接赋值即可[[target.y]],动画选择线性500ms即可。
![5d8075ce3b4eb1552a24c574fb6c6da7.png](https://i-blog.csdnimg.cn/blog_migrate/721935a34d1f757853411b7f699392f3.jpeg)
接着是反向移动,原理跟上面一样,只是计算的时候我们需要先加上按钮本身的宽度再减去背景的宽度,这样x坐标就回到了之前的位置了:[[LVAR1.x+LVAR1.width-LVAR2.width]],y轴水平不变,直接赋值即可[[target.y]],动画选择线性500ms即可。
![a520aa9499c7371b6d38c538eb59c1f7.png](https://i-blog.csdnimg.cn/blog_migrate/79348e3e3d32d2b30fb7883207b6a1f0.jpeg)
到这里我们的按钮已经实现了左右切换了,但是你会发现点击按钮时会出现连个case事件,不好操作,所以我们需要再事件前面添加一个判断语句,当按钮原件选中时执行那个事件,按钮原件未选中时执行那个事件(默认是为选中状态的)。
![347eb84fef6c7211dcc05ff05fe0b300.png](https://i-blog.csdnimg.cn/blog_migrate/c9915d402379295d78706db0fa93abc6.jpeg)
现在我们就已经实现了切换样式了,但是你会发现状态没有发生改变,因为目前还没有设置选中状态,这里我们要在事件后面继续添加一个选中状态,当我们点击按钮时,设置按钮和背景为选中状态,这样我们选中状态中的颜色就会被切换了,当我们再次点击按钮时取消选中状态即可。
![573a306127226980fc8fb309ed65e0be.png](https://i-blog.csdnimg.cn/blog_migrate/0fa0f9eebd05cbb635b0be3691f7a980.jpeg)
这样我们的切换样式就实现了,因为这是手机端的设计,点击按钮还是不怎么方便,所以这里我再加个功能,当我点击背景时就可以实现按钮的切换,这样操作更符合app使用(微信也是这样设计的),这里直接把按钮的事件复制到背景上即可。
![74014a53f69476df316958d2e92aabe1.png](https://i-blog.csdnimg.cn/blog_migrate/7f1b4eed436748dad621083486f9bd4f.jpeg)