【移动开发】iOS和Android不规则按钮解决方案

好久没有写Android和iOS了,最近看看之前写的项目,别忘了,2333

效果图
简单介绍一下界面效果,按钮打开都是会高亮显示,并且按下车灯打开的按钮时,顶部的车辆车灯处会有灯光,最后左侧的光条会做来回扫描的效果。由于一些不明不白的原因,iOS界面写到一半,这个方案被推翻了。所以iOS的界面跟Android的界面有一点不一样。
Android图

iOS图

首先说一下解决方案的思路,Android和iOS的原理差不多,其实底部的圆形按钮是由五个相同大小的正方形按钮叠加而成,按钮的背景图分上下左右四个扇形,中间一个较小的圆形,这么五个部分,背景图除了自己对应部分显示以外,其他都是透明的背景色,如下图:
示例
通过按钮的事件,获取点击位置的背景图是否有像素,来判定点击事件是否生效,如果没有生效那需要穿透到下一个按钮。
上面的图是UI的工作,代码的部分得分开来讲。

1.Android

既然涉及到图片的操作,那一想应该是用ImageButton呗

final ImageButton topBtn = (ImageButton) findViewById(R.id.top_btn);
final Bitmap bitMap = ((BitmapDrawable)topBtn.getDrawable()).getBitmap();
topBtn.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        if(bitMap.getPixel((int)(motionEvent.getX()),(int)(motionEvent.getY()))!=0)
        {
            //TODO Click
        }else{
            
        }
        return false;
    }
});    

2.iOS

iOS有大神写好的框架OBShapedButton(适用于storyboard),点击方法跟普通的UIButton一样,用起来十分方便。

大神GitHub传送门:https://github.com/ole/OBShapedButton

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值