【寫在前面】如果看完這篇部落格，對你有幫助的話，歡迎加入全棧技術交流群，群內不定時釋出熱門學習資料，也歡迎進行技術交流，對我的部落格有疑問也可以在群裡@我。《全棧技術交流群歡迎你》

好久沒有寫Android和iOS了，最近看看之前寫的專案，別忘了，2333

效果圖
簡單介紹一下介面效果，按鈕開啟都是會高亮顯示，並且按下車燈開啟的按鈕時，頂部的車輛車燈處會有燈光，最後左側的光條會做來回掃描的效果。由於一些不明不白的原因，iOS介面寫到一半，這個方案被推翻了。所以iOS的介面跟Android的介面有一點不一樣。

首先說一下解決方案的思路，Android和iOS的原理差不多，其實底部的圓形按鈕是由五個相同大小的正方形按鈕疊加而成，按鈕的背景圖分上下左右四個扇形，中間一個較小的圓形，這麼五個部分，背景圖除了自己對應部分顯示以外，其他都是透明的背景色，如下圖：

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